1

使用 daterangepicker 插件进行此预订。改进所需的额外要求。

  1. 使用下面的脚本在单击输入日期字段上加载“选择出发日期”。但是，一旦用户单击“开始”日期。必须将文本更改为“选择返回日期”。
  2. 使用插件的当前行为，返回日期不可更改。必须更改开始和结束日期。如果用户错误地选择了错误的日期，是否可以仅更改“结束”日期？在用户更改之前，“开始”日期不会更改。

HTML：

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

JS：

$('#returnTripDepart').click(function(){
  $('.daterangepicker').addClass('returnTripDatePicker');
  $('.departure--date').hide();
  $(".returnTripDatePicker").prepend("<div class='departure--date'>Select Departure Date</div>");
});

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="ReturnTrip"]').daterangepicker({
    "autoApply": true,
    "autoUpdateInput": false,
    "minDate": today,
    "maxDate": maxLimitDate,
    "locale": {
        format: 'DD MMM YYYY'
    }
  },function(start:any, end:any) {
        $("#returnTripDepart").val(start.format('DD MMM YYYY'));
        $("#returnTripReturn").val(end.format('DD MMM YYYY'));
  });
4

0 回答 0