Jquery Datepicker在一个日历中选择多个日期范围

问题描述 投票：5回答：5

我的要求是允许用户在一个日历中选择多个日期范围，也不允许更改以前的日期选择。这怎么可能？以下是fiddle的代码和链接

HTML

<p>from</p>
<input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-datefrom">
<p>to</p>
<input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-dateto">

脚本

$( function() {
    var dateFormat = "mm/dd/yy",
      from = $( "#sproid-bookingcondition-datefrom" )
        .datepicker({
          defaultDate: "+1w",
          changeMonth: true,
          numberOfMonths: 1
        })
        .on( "change", function() {
          to.datepicker( "option", "minDate", getDate( this ) );
        }),
      to = $( "#sproid-bookingcondition-dateto" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1
      })
      .on( "change", function() {
        from.datepicker( "option", "maxDate", getDate( this ) );
      });

    function getDate( element ) {
      var date;
      try {
        date = $.datepicker.parseDate( dateFormat, element.value );
      } catch( error ) {
        date = null;
      }

      return date;
    }
  } );
javascript jquery jquery-ui datepicker jquery-ui-datepicker
5个回答
1
投票

请检查这可能会解决您的问题。

$(function() {
    $('input[name="daterange"]').daterangepicker();
    $('input[name="daterange"]').change(function(){
      $(this).val();
      console.log($(this).val());
    });
});
<html>
<head>
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
 
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
</head>
<body>
  <input class="pull-right" type="text" name="daterange" value="01/15/2020 - 02/15/2010">
</body>
</html>
0
投票

不幸的是，这不是datepicker插件能够开箱即用的东西。您需要一些自定义JavaScript才能启用此功能。

我发现了一种使用onSelect和beforeShowDay事件接近你想要的方法。它维护自己的选定日期数组，所以很遗憾没有与显示当前日期等的文本框集成。我只是将它用作内联控件，然后我可以查询数组中当前选择的日期。

您需要更改此代码的唯一方法是将每两个日期分组到范围中，但根据您所需的UX，有多种方法可以执行此操作。就个人而言，我只会按照用户选择的顺序将每两个日期分组为一个范围。然后，如果他们从任何范围中删除日期，则删除整个范围（在此处未编码，您需要添加该范围）。

这是我的代码：

<script>
// Maintain array of dates
var dates = new Array();

function addDate(date) {
    if (jQuery.inArray(date, dates) < 0) 
        dates.push(date);
}

function removeDate(index) {
    dates.splice(index, 1);
}

// Adds a date if we don't have it yet, else remove it
function addOrRemoveDate(date) {
    var index = jQuery.inArray(date, dates);
    if (index >= 0) 
        removeDate(index);
    else 
        addDate(date);
    }

// Takes a 1-digit number and inserts a zero before it
function padNumber(number) {
var ret = new String(number);
if (ret.length == 1) 
    ret = "0" + ret;
    return ret;
}

jQuery(function () {
    jQuery("#datepicker").datepicker({
        onSelect: function (dateText, inst) {
            addOrRemoveDate(dateText);
        },
        beforeShowDay: function (date) {
            var year = date.getFullYear();
            // months and days are inserted into the array in the form, e.g "01/01/2009", but here the format is "1/1/2009"
            var month = padNumber(date.getMonth() + 1);
            var day = padNumber(date.getDate());
            // This depends on the datepicker's date format
            var dateString = month + "/" + day + "/" + year;

            var gotDate = jQuery.inArray(dateString, dates);
            if (gotDate >= 0) {
                // Enable date so it can be deselected. Set style to be highlighted
                return [true, "ui-state-highlight"];
            }
            // Dates not in the array are left enabled, but with no extra style
            return [true, ""];
        }
    });
});
</script>

这是一个小提琴：http://jsfiddle.net/gydL0epa/

0
投票

我认为这个多日期选择器可以帮助您解决问题。

$('#mdp-demo').multiDatesPicker();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js"></script>
<div id="mdp-demo"></div>
0
投票

正如其他人已经建议的那样，我的MultiDatesPicker接近您的需求。它已经允许single range selection，所以你可以分叉该插件并编辑/改进它以允许多个范围选择。

一个快速而肮脏的解决方案是评论the line where the array of selected dates gets reset。

-1
投票

试试这个

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="Scripts/jquery-1.11.1.js"></script>
    <script src="Scripts/jquery-ui-1.11.1.js"></script>
    <script src="Scripts/jquery-ui.multidatespicker.js"></script>
    <link href="css/jquery-ui.css" rel="stylesheet" />
    <link href="css/jquery-ui.structure.css" rel="stylesheet" />
    <link href="css/jquery-ui.theme.css" rel="stylesheet" />
    <link href="css/pepper-ginder-custom.css" rel="stylesheet" />
    <link href="css/prettify.css" rel="stylesheet" />
</head>

<body>
    <input type="text" id="fromDate" />
    <script>
        $(function () {
            $('#fromDate').multiDatesPicker();
        });
    </script>
</body>
</html>

你可以从https://sourceforge.net/projects/multidatespickr/链接下载js文件

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.