Daterangepicker - 无法选择今天的日期

问题描述：

我在下面的代码中使用了日期选取器在我的应用程序中。使用daterangepicker插件。Daterangepicker - 无法选择今天的日期

https://jsfiddle.net/jkenluv/z9tgdh7k/

HTML

<input class="form-control input-lg" id="tripOne" name="tripOne" />

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() + 1, nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0); 

$('input[name="tripOne"]').daterangepicker({ 
"autoApply": true, 
"autoUpdateInput": false, 
"singleDatePicker": true, 
"minDate": today, 
"maxDate": maxLimitDate, 
"opens": "left", 
"locale": { 
    format: 'DD MMM YYYY' 
    } 
}, function (start, end) { 
    $("#tripOne").val(start.format('DD MMM YYYY')); 
    $('#tripOne').parent().parent().removeClass('has-error'); 
}); 

$(function() { 
    $('.calendar.right').show(); 
});

但是，我不能能够选择'今天的日期'或'已选定日期'。这对我们的要求是强制性的。请让我知道如何解决这个问题？

感谢

您的代码似乎工作得很好！哪里有问题？ –

例如：上载..选择2月18日（今天的日期）..它不会被点击。但是，如果您选择第19 ..它将工作 – TDG

我不知道为什么它不适合你。但它为我工作。我可以选择今天的日期。 –

答

请read the doc

如果您使用的日期范围作为一个过滤器，你可能要一个选择器连接到输入，但离开它由空默认。此示例显示如何使用autoUpdateInput设置和 apply和cancel事件来完成事件。

因此，无论您可以删除autoUpdateInput线也可以将其设置为true。

"autoUpdateInput": false,

"autoUpdateInput": true,

如果我删除这个...然后onload ..我可以看到今天的日期..但是，我们的日历输入值必须在用户点击输入后触发。此外，我仍然可以点击今日或已选日期 – TDG

答

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'); 
     setTimeout(function(){ 
      $('.daterangepicker').addClass('returnTripEndDatePicker'); 
      $('.departure--date').hide(); 
      $(".returnTripEndDatePicker").prepend("<div class='departure--date'>Select Return Date</div>"); 
      $("#tripTwo").focus(); 
     },120); 
     var returnTripStartDate = new Date(Date.parse(start)); 
     $(function() { 
     $('.calendar.right').show(); 
     }); 
    }); 
    $('input[name="tripTwo"]').daterangepicker({ 
     "autoApply": true, 
     "autoUpdateInput": false, 
     "singleDatePicker": true, 
     "minDate": today, 
     "maxDate": maxLimitDate, 
     "locale": { 
      format: 'DD MMM YYYY' 
     } 
     },function(end) { 
      $("#tripTwo").val(end.format('DD MMM YYYY')); 
      $('#tripTwo').parent().parent().removeClass('has-error'); 
     }); 
    $('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')); 
     });

嗨普罕...感谢您的宝贵意见。 90％正常工作。 – TDG

但是，https://jsfiddle.net/jkenluv/z9tgdh7k/2/请检查这个链接..加载后..今天的日期是不可点击的..如果我选择第十九个二次方，并选择下一个输入日期第十九。有用。但是，今天的日期不能仅在1日输入 – TDG

无法理解。你可以通过点击这里告诉我你的意思吗？ –

答

做

$("element1").datetimepicker({ maxDate: moment.endOf('day') }) 
$("element2").datetimepicker({ maxDate: moment.endOf('day') })

如果使用minDate反其道而行之

$("element1").datetimepicker({ minDate: moment.startOf('day') }) 
$("element2").datetimepicker({ minDate: moment.startOf('day') })

答

在daterangepicker初始化后添加以下函数：

$('input[name="tripOne"]').on('apply.daterangepicker', function (ev, picker) { 
     $(this).val(picker.startDate.format('DD MMM YYYY')); 
});

Daterangepicker - 无法选择今天的日期

相关推荐