Bootstrap 具有每月持续时间选项的日期时间选择器（1 个月、2 个月、3 个月等）

Question

我有 2 个输入，即取件日期和 return 日期，我有一个 select 选项，持续时间为 1 个月 2 个月 3 个月等我想做的是当您选择持续时间（例如 1 个月）时，它会自动填写取件日期（今天），return 日期将从现在起 1 个月，如果您更改持续时间，它也会执行相同的操作。

<div class="col-md-6 location-option" style="margin-bottom: 0px;">
  <select name="s">
   <option disabled selected value required>Duration: 1-36 Months</option>
   <option value="Monthly">1 Month</option>
   <option value="Monthly">2 Months</option>
    <option value="Monthly">3 Months</option>
    <option value="Monthly">4 Months</option>
    <option value="Monthly">5 Months</option>
    <option value="Monthly">6 Months</option>
    <option value="Monthly">7 Months</option>
    <option value="Monthly">8 Months</option>
    <option value="Monthly">9 Months</option>
    <option value="Monthly">10 Months</option>
    <option value="Monthly">11 Months</option>
    <option value="Monthly">12 Months</option>
    <option value="Monthly">13 Months</option>
    <option value="Monthly">14 Months</option>
    <option value="Monthly">15 Months</option>
    <option value="Monthly">16 Months</option>
    <option value="Monthly">17 Months</option>
    <option value="Monthly">18 Months</option>
    <option value="Monthly">19 Months</option>
    <option value="Monthly">20 Months</option>
    <option value="Monthly">21 Months</option>
    <option value="Monthly">22 Months</option>
    <option value="Monthly">23 Months</option>
    <option value="Monthly">24 Months</option>
    <option value="Monthly">25 Months</option>
    <option value="Monthly">26 Months</option>
    <option value="Monthly">27 Months</option>
    <option value="Monthly">28 Months</option>
    <option value="Monthly">29 Months</option>
    <option value="Monthly">30 Months</option>
    <option value="Monthly">31 Months</option>
    <option value="Monthly">32 Months</option>
    <option value="Monthly">33 Months</option>
    <option value="Monthly">34 Months</option>
    <option value="Monthly">35 Months</option>
    <option value="Monthly">36 Months</option>

   <!--<option value="quarterly">Quarterly</option>
   <option value="Semi-Annually">Semi-Annual</option>
   <option value="Annually">Yearly</option>
   <option value="Customized">Customized</option>-->
 </select>
</div>

 <div class="col-md-6 location-start">
  <h5> Pickup Date </h5>
   <input type="text" name="datepickerrange" class="form-control datetimepicker-input datetimepicker" id='datetimepicker8' autocomplete="off" required/>
</div>
<div class="col-md-6 location-return">
  <h5> RETURN </h5>
  <input type="text" name="datepickerrangeto" class="form-control datetimepicker-input datetimepicker" id='datetimepicker9' autocomplete="off" required/>
</div>

脚本

$('#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() });

Answer 1

首先更改下拉列表元素的值。所有元素都具有相同的值没有任何意义。

<select name="s">
      <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>

现在您可以使用 defaultDate 和此语法来更新日期：

$(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 = s]').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);

    });                        

})

Bootstrap 具有每月持续时间选项的日期时间选择器（1 个月、2 个月、3 个月等）

Bootstrap Datetime Picker with monthly duration option (1 month, 2 months. 3 months, etc)

javascript

jquery

datetimepicker

twitter-bootstrap-3

bootstrap-datetimepicker