1

我正在为我们的应用程序使用 Daterangepicker。

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

  1. TripOne - 选择日期（例如：2 月 19 日）
  2. TripTwo - 必须从“TripOne”选定日期开始。
  3. TripThree - 必须从“TripTwo”选定日期开始。

以上工作正常。

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

  1. TripOne - 选择今天的日期（不工作）
  2. TripTwo - 如果在 TripOne 上选择了 2 月 20 日，我无法在 TripTwo 上选择相同的 2 月 20 日。
  3. 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();
    });

小提琴页面视图

4

1 回答 1

0

问题不在于日期选择器本身......你就是你使用它的方式。在您的代码中，每次您从行程 #1 日期选择器中选择某些内容时，它都会尝试影响第二个尝试影响第三个的内容:(

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

那么它很简单：在 JQuery UI DatePicker 中动态更改选项失败

长话短说 - 每次更改日期选择器中的值时，更改下一个选择器配置：

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

    // .....

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

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

    // ......
于 2017-02-19T10:43:41.440 回答