Daterangepicker - 无法选择今天的日期答案

【问题标题】：Daterangepicker - unable to select today's dateDaterangepicker - 无法选择今天的日期
【发布时间】：2017-07-07 20:08:27
【问题描述】：

我在我的应用程序中使用了以下代码作为日期选择器。使用了 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 日（今天的日期）.. 它不会是可点击的。但是，如果你选择 19th.. 它会起作用
我不知道为什么它不适合你。但它对我有用。我可以选择今天的日期。
嗨..页面加载后，您可以选择2月18日（今天）..将值存储在输入字段中吗？？
例如选择 19th feb.. 手动删除输入字段。如果您可以再次选择 2 月 19 日并在输入字段中显示日期？？

标签： javascript jquery daterangepicker bootstrap-daterangepicker

【解决方案1】：

请read the doc

如果您使用日期范围作为过滤器，您可能需要附加一个选择器到输入，但默认情况下将其留空。这个例子显示如何使用autoUpdateInput 设置来实现这一点，以及 apply 和 cancel 事件。

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

"autoUpdateInput": false,

或

"autoUpdateInput": true,

【讨论】：

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

【解决方案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'));
      });

【讨论】：

您好 Puhan... 感谢您宝贵的 cmets。 90% 工作正常。
但是，jsfiddle.net/jkenluv/z9tgdh7k/2 请检查此链接.. 加载后.. 今天的日期不可点击.. 如果我选择 2 月 19 日并选择下一个输入日期 19 日。有用。但是，不仅适用于今天的第一个输入
无法理解。你能告诉我这里不能点击是什么意思吗？
请点击小提琴链接。 1) 单击第一个输入字段，选择今天的日期。它会选择并显示输入值吗？ 2) 在第一个输入字段中，选择 2 月 19 日。现在，您也可以在第二个输入字段中选择 2 月 19 日。你的逻辑在这里有效。是否可以在第一个输入字段上实现相同的逻辑？谢谢
嗨..有什么解决方案吗？

【解决方案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' ) })

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

它会起作用，但你永远不能更新 daterangepicker.js。最好覆盖 hide 方法。

【讨论】：

【解决方案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/

【讨论】：