jquery 当前日期或先前输入时已选择的日期无法选择

aydmsdu9  于 2023-06-22  发布在  jQuery
关注(0)|答案(2)|浏览(166)

我正在使用Daterangepicker为我们的应用程序。
创建多行程日期选择器组件(3个输入字段)

  1. TripOne -选择日期(例如:2月19日)
  2. TripTwo -必须从“TripOne”选择的日期开始。
  3. TripThree -必须从“TripTwo”选择的日期开始。
    上面的事情都很好。
    但是,下面的问题不工作在这个插件.
  4. TripOne -选择今天日期(不工作)
  5. TripTwo -如果在TripOne上选择了2月20日,我不能在TripTwo上选择同样的2月20日。
  6. Trip 3-与Trip 2相似。

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

sy5wg1nm

sy5wg1nm1#

问题不在于日期选择器本身。。你就是你使用它的方式。在你的代码中,每次你从trip #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
    });

    // ......
t1rydlwq

t1rydlwq2#

如果您使用的是以下格式的日期选择器:

$('yourInput').daterangepicker(
      (start, end, label) => {
         //business logic
      }

然后将其更改为以下格式:

$('yourInput').daterangepicker().on('apply.daterangepicker',function(ev,pickerr) {

}

相关问题