Daterangepicker - 仅更改结束日期。但是,目前的默认插件不允许

时间:2017-02-10 04:54:27

标签: javascript jquery bootstrap-daterangepicker

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

  1. 在脚本下方加载'选择出发日期'在点击输入日期字段。但是,一旦用户点击了“开始”#39;日期。必须将文字更改为'选择返回日期'。
  2. 使用插件的当前行为,返回日期不可更改。必须改变开始和放大结束日期。是否有可能只改变'结束'如果用户错误地选择了错误的日期?没有变化开始'日期,直到用户更改。
  3. 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'));
      });
    

0 个答案:

没有答案