Question

我在两个类上都使用仅日期格式的 Datetimepicker （如果我从 ValidFrom 框中选择Date，则可以正常工作）。我的用例是，一旦选择了 ValidFrom ， ValidTo 应该会自动增加 1个月（这种情况正在发生）。现在我面临的问题是，一旦在 ValidTo 框中选择了来自 ValidFrom 的日期，该日期应不小于 ValidFrom 中的日期>，而且，有效期中的日期只能减少，而不能增加30天。

以下是我的Datetimepicker代码：

<script>
    $(document).ready(function () {
        $('#ValidFrom').datetimepicker({
            datepicker: true,
            timepicker: false,
            format: 'm/d/Y',
            step: 30,
            minDate: new Date(),
            onChangeDateTime: function (dp, $input) {
                var date = new Date($input.val());
                date.setMonth(date.getMonth() + 1);
                date = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
                $('#ValidTo').val(date);
            },

        });
        $('#ValidTo').datetimepicker({
            datepicker: true,
            timepicker: false,
            format: 'm/d/Y',
            step: 30,
            minDate: new Date(),

        });

    });

</script>

P.S。我已经尝试过其他问题中提到的方法，但是它们没有取得成果。

Answer 1

尝试如下更新minDate和maxDate。

$('#ValidTo').datetimepicker('option', 'minDate', minDate);
$('#ValidTo').datetimepicker('option', 'maxDate', maxDate);

或者，如果不起作用，请尝试如下操作。

$('#ValidTo').data("DateTimePicker").setMinDate(minDate);
$('#ValidTo').data("DateTimePicker").setMaxDate(maxDate);

您的完整代码应如下所示。

$(document).ready(function() {
  $('#ValidFrom').datetimepicker({
    datepicker: true,
    timepicker: false,
    format: 'm/d/Y',
    step: 30,
    minDate: new Date(),
    onChangeDateTime: function(dp, $input) {
      var date = new Date($input.val());
      $('#ValidTo').datetimepicker('option', 'minDate', date);
      date.setMonth(date.getMonth() + 1);
      $('#ValidTo').datetimepicker('option', 'maxDate', date);
      date = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
      $('#ValidTo').val(date);
    },
  });
  
  $('#ValidTo').datetimepicker({
    datepicker: true,
    timepicker: false,
    format: 'm/d/Y',
    step: 30,
    minDate: new Date(),
  });

});

Answer 2

这里是handy tool，可能有助于创建所需的约束。

根据另一个Datetimepicker日期设置Datetimepicker minDate

2 个答案: