Question

我在我们的应用程序中使用Daterangepicker。

创建多重日期选择器组件（3个输入字段）

TripOne - 选择日期（例如：2月19日）
TripTwo - 必须从'TripOne'选定的日期开始。
TripThree - 必须从'TripTwo'选择日期开始。

以上情况正常。

但是，以下问题不适用于此插件。

TripOne - 选择今天日期（不工作）
TripTwo - 如果在TripOne上选择2月20日，我无法在TripTwo上选择2月20日。
TripThree - 与TripTwo相似。

JS：

var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
var maxLimitDate = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate()+360, 0, 0, 0, 0);

$('input[name="tripOne"]').daterangepicker({
    "autoApply": true,
    "autoUpdateInput": false,
    "singleDatePicker": true,
    "minDate": today,
    "maxDate": maxLimitDate,
    "locale": {
        format: 'DD MMM YYYY'
    }
    },function(start) {
      $("#tripOne").val(start.format('DD MMM YYYY'));
      $('#tripOne').parent().parent().removeClass('has-error');
      var returnTripStartDate = new Date(Date.parse(start));
      $('input[name="tripTwo"]').daterangepicker({
        "autoApply": true,
        "autoUpdateInput": false,
        "singleDatePicker": true,
        "minDate": returnTripStartDate,
        "maxDate": maxLimitDate,
        "locale": {
            format: 'DD MMM YYYY'
        }
      },function(end) {
            $("#tripTwo").val(end.format('DD MMM YYYY'));
            $('#tripTwo').parent().parent().removeClass('has-error');
            var returnTripStartDate2 = new Date(Date.parse(start));
            $('input[name="tripThree"]').daterangepicker({
            "autoApply": true,
            "autoUpdateInput": false,
            "singleDatePicker": true,
            "minDate": returnTripStartDate2,
            "maxDate": maxLimitDate,
            "locale": {
                format: 'DD MMM YYYY'
            }
            },function(end) {
                $("#tripThree").val(end.format('DD MMM YYYY'));
                $('#tripThree').parent().parent().removeClass('has-error');
            });
            $(function() {
                $('.calendar.right').show();
            });
      });
      $(function() {
        $('.calendar.right').show();
      });
      $('input[name="tripOne"]').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('DD MMM YYYY'));
      });
      $('input[name="tripTwo"]').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('DD MMM YYYY'));
      });
      $('input[name="tripThree"]').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('DD MMM YYYY'));
      });
    });
    $(function() {
        $('.calendar.right').show();
    });

Fiddle page view

Answer 1

问题不在于日期选择器本身......您就是使用它的方式。在你的代码中你每次都选择一些不合时宜的东西＃1 datepicker它试图影响试图影响第三个的第二个:(

正确的方法：在文档ready事件上初始化所有3个日期选择器..但等待：您将如何根据您的逻辑更改每个日期选择器配置？

这很简单：Change option dynamically in JQuery UI DatePicker fails

简而言之 - 每次更改日期选择器中的值时，请更改下一个选择器配置：

function(start) 
{
    $("#tripOne").val(start.format('DD MMM YYYY'));

    // .....

    $('input[name="tripTwo"]').datepicker("destroy");

    $("#dteEnd").datepicker({
     // new options here - with your desired value
    });

    // ......

今天日期或之前输入的已选择日期无法选择

1 个答案: