Question

我在我的应用程序中使用以下代码作为日期选择器。使用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();
});

但是，我无法选择'今天的日期'或'已选择日期'。这对我们的要求是强制性的。请告诉我如何解决这个问题？

由于

Answer 1

请read the doc

如果您使用日期范围作为过滤器，则可能需要附加一个选择器输入但默认为空。这个例子说明了如何使用autoUpdateInput设置完成该操作 apply和cancel次活动。

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

"autoUpdateInput": false,

OR

"autoUpdateInput": true,

Answer 2

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'));
      });

Answer 3

待办事项

$("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' ) })

Answer 4

在初始化daterangepicker后添加以下功能：

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

Answer 5

这不是最漂亮的解决方案，但是您可以更改daterangepicker.js并在“隐藏”方法中删除以下行：

if (!this.startDate.isSame(this.oldStartDate) || !this.endDate.isSame(this.oldEndDate))

它将起作用，但是您永远无法更新daterangepicker.js。最好覆盖hide方法。

Daterangepicker - 无法选择今天的日期

5 个答案: