1

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

但是，我无法选择“今天的日期”或“已经选择的日期”。这对我们的要求是强制性的。请让我知道如何解决这个问题？

谢谢

谢谢

4

6 回答 6

1

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

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

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

于 2019-06-07T07:01:05.760 回答
0

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

$('input[name="tripOne"]').on('apply.daterangepicker', function (ev, picker) {
        $(this).val(picker.startDate.format('DD MMM YYYY'));
 });
于 2017-09-15T10:36:33.510 回答
0

以下代码可用于修复问题并保持原始脚本可更新，或从 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/

于 2022-02-21T10:44:11.257 回答
0

请阅读文档

如果您使用日期范围作为过滤器，您可能希望将选择器附加到输入，但默认情况下将其留空。这个例子展示了如何使用autoUpdateInput设置 apply和cancel事件来完成。

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

"autoUpdateInput": false,

或者

"autoUpdateInput": true,
于 2017-02-18T08:24:44.730 回答
0

做

$("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' ) })
于 2017-07-31T18:52:37.870 回答
0 
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'));
      });
于 2017-02-18T08:35:14.523 回答