首页 > 解决方案 > Bootstrap Datetime Picker 自动输出返回日期

问题描述

我正在使用 bootstrap-datetimepicker

我在下面有一个工作代码,请帮助我修复下面的第二个脚本,我要做的是一旦您在接送日期时间选择器中选择任何日期并在选择字段上选择持续时间,它将自动填充根据您从持续时间选择和开始日期中选择的持续时间返回日期

First Code js代码:(因为默认日期是我们当前的日期,所以它可以工作)

$(document).ready(function() {

$('#datetimepicker8').datetimepicker({ sideBySide: true, toolbarPlacement: "bottom", showClose: true, stepping: 30, minDate: new Date(), defaultDate : Date.now() });
$('#datetimepicker9').datetimepicker({ sideBySide: true, toolbarPlacement: "bottom", showClose: true, stepping: 30, minDate: new Date()});

$('select[name = sas]').on('change', function() {

    var futureDate = new Date(Date.now());
    futureDate.setMonth(futureDate.getMonth() + parseInt(this.value));
    $('#datetimepicker9').data("DateTimePicker").date(futureDate);

});
})

第二个JS代码不起作用

$(document).ready(function() {

    $('#datetimepicker8').datetimepicker({ sideBySide: true, toolbarPlacement: "bottom", showClose: true, stepping: 30, minDate: new Date()});
    $('#datetimepicker9').datetimepicker({ sideBySide: true, toolbarPlacement: "bottom", showClose: true, stepping: 30, minDate: new Date()});

    $('select[name = sas]').on('change', function() {

        //start date
        $('#datetimepicker8').data("DateTimePicker").date(Date.now());

        //future date
        var futureDate = new Date(Date.now());
        futureDate.setMonth(futureDate.getMonth() + parseInt(this.value));
        $('#datetimepicker9').data("DateTimePicker").date(futureDate);

    });

})

HTML

<select name="sas">
      <option disabled selected value required>Duration: 1-36 Months</option>
      <option value="1">1 Month</option>
      <option value="2">2 Months</option>
      <option value="3">3 Months</option>
      <option value="4">4 Months</option>
      <option value="5">5 Months</option>
      <option value="6">6 Months</option>
      <option value="7">7 Months</option>
      <option value="8">8 Months</option>
      <option value="9">9 Months</option>
      <option value="10">10 Months</option>
      <option value="11">11 Months</option>
      <option value="12">12 Months</option>
      <option value="13">13 Months</option>
      <option value="14">14 Months</option>
      <option value="15">15 Months</option>
      <option value="16">16 Months</option>
      <option value="17">17 Months</option>
      <option value="18">18 Months</option>
      <option value="19">19 Months</option>
      <option value="20">20 Months</option>
      <option value="21">21 Months</option>
      <option value="22">22 Months</option>
      <option value="23">23 Months</option>
      <option value="24">24 Months</option>
      <option value="25">25 Months</option>
      <option value="26">26 Months</option>
      <option value="27">27 Months</option>
      <option value="28">28 Months</option>
      <option value="29">29 Months</option>
      <option value="30">30 Months</option>
      <option value="31">31 Months</option>
      <option value="32">32 Months</option>
      <option value="33">33 Months</option>
      <option value="34">34 Months</option>
      <option value="35">35 Months</option>
      <option value="36">36 Months</option>
</select>

标签: javascriptjqueryhtmldatetimepickerbootstrap-datetimepicker

解决方案


$(文档).ready(函数() {

$('#datetimepicker8').datetimepicker({ sideBySide: true, toolbarPlacement: "bottom", showClose: true, stepping: 30, minDate: new Date() }); 
$('#datetimepicker9').datetimepicker({ sideBySide: true, toolbarPlacement: "bottom", showClose: true, stepping: 30, minDate: new Date()});                                    

$('select[name = sas]').on('change', function() {

    //start date
   var objs = $('#datetimepicker8').data('DateTimePicker').date()


    //future date

     var futureDate = new Date(objs);
    futureDate.setMonth(futureDate.getMonth() + parseInt(this.value));
    $('#datetimepicker9').data("DateTimePicker").date(futureDate);

});                        

})


推荐阅读