日期范围选择器 - 无法选择今天的日期

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

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

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

它可以工作，但你永远无法更新 daterangepicker.js。最好重写 hide 方法。

Answer 2

请阅读文档

如果您使用日期范围作为过滤器，您可能需要附加一个 选择器到输入，但默认将其留空。这个例子显示 如何使用

autoUpdateInput

设置来实现这一点，以及

apply

和

cancel

事件。

因此，您可以删除

autoUpdateInput

线，也可以将其设置为

true

。

"autoUpdateInput": false,

或

"autoUpdateInput": true,

Answer 3

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 4

做

$("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 5

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

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

Answer 6

以下代码可用于修复问题并保持原始脚本可更新，或从 CDN 加载它：

drpDecorator($('input[class="date-input"]').daterangepicker({
        singleDatePicker: true,
        minYear: 1950,
        maxYear: parseInt(moment().format('YYYY'), 10),
        autoApply: true,
        autoUpdateInput: false,
        "showDropdowns": false,
        locale: {
            firstDay: 1,
            cancelLabel: 'Reset',
            format: 'MM/DD/YY'
        }
    }, function (chosen_date) {
        $(this)[0].element.val(chosen_date.format('MM/DD/YY'));
    })
)


function drpDecorator($dateInput) {
    if ($dateInput.length === 0) {
        return
    }
    const drp = $dateInput.data("daterangepicker");

    drp.hide = function (e) {
        if (!this.isShowing) return;

        //incomplete date selection, revert to last values
        if (!this.endDate) {
            this.startDate = this.oldStartDate.clone();
            this.endDate = this.oldEndDate.clone();
        }

        this.callback(this.startDate.clone(), this.endDate.clone(), this.chosenLabel);

        //if picker is attached to a text input, update it
        this.updateElement();

        $(document).off('.daterangepicker');
        $(window).off('.daterangepicker');
        this.container.hide();
        this.element.trigger('hide.daterangepicker', this);
        this.isShowing = false;
    }
}

https://jsfiddle.net/pwd5sLvf/

Answer 7

我也有同样的问题。您需要编辑 daterangepicker.js 源代码。最好的解决方案是定义取消和应用之间的区别。为此，我从 hide 方法中删除了以下代码并将其粘贴到 clickApply 方法中。为了正确操作 autoApply 并单击当前日期，我添加了对空控制值的检查。

        //incomplete date selection, revert to last values
        if (!this.endDate) {
            this.startDate = this.oldStartDate.clone();
            this.endDate = this.oldEndDate.clone();
        }

        //if a new date range was selected, invoke the user callback function
        if (!this.startDate.isSame(this.oldStartDate) || ($(this.element).is(':text') && $(this.element).val() === '' || !this.endDate.isSame(this.oldEndDate))
            this.callback(this.startDate.clone(), this.endDate.clone(), this.chosenLabel);

        //if picker is attached to a text input, update it
        this.updateElement();