如何從下拉列表中獲取年份並准備日期，然后在啟動日期范圍中設置開始日期和結束日期

Question

我有一個表單，在這個表單中，我有一個dropdown選擇datepicker year和text box 。 我正在使用bootstrap datepicker 。

我需要的是，如果我從dropdown選擇年份。 我需要在datepicker中設置startDate和endDate 。 startDate + 3是endDate 。

例如：如果我從下拉列表中選擇2019。 Datepicker日歷需要從2019年1月開始，到2022年12月結束。

HTML

    <div class="col-md-6">
       <div class="form-group {{ $errors->has('summerSeasonYear') ? ' has-error' : '' }}">
                                                    <label>@lang('openingClosingSeason.summerSeasonChooseSeasonLabel') <span class="required">*</span></label>

        <select class="form-control" name="summerSeasonYear" id="summerSeasonYear">
          <option value="0">@lang('openingClosingSeason.summerSeasonChooseSeasonSelect')</option>
           <option value="2017" @if(old('summerSeasonYear') == '2017') selected="selected" @endif>2017</option>
           <option value="2018" @if(old('summerSeasonYear') == '2018') selected="selected" @endif>2018</option>
           <option value="2019" @if(old('summerSeasonYear') == '2019') selected="selected" @endif>2019</option>
       </select>
    </div>
  </div>

    <div class="col-md-6">
      <div class="form-group {{ $errors->has('earliest_summer_open') ? ' has-error' : '' }}">
      <label for="earliest_summer_open">@lang('openingClosingSeason.summerSeasonEarliestOpen') <span class="required">*</span></label>
    <input type="text" class="form-control" id="earliest_summer_open" name="earliest_summer_open" placeholder="@lang('openingClosingSeason.summerSeasonEarliestOpenPlaceholder')" data-date-format="dd.mm.yy" readonly="true" value="{{old('earliest_summer_open')}}">
    </div>
 </div>

腳本

var start = '';
    var end   = '';

    setSummerYear(null, null);

    $('#summerSeasonYear').on('change', function(){
        var summerSeasonYear = $("#summerSeasonYear").val();
        $( "#summerSeasonYear" ).attr( "data-summerYear", summerSeasonYear );
        start = new Date();
        end   = new Date(new Date().setYear(start.getFullYear()+1));
        setSummerYear(start, end)
    });


    function setSummerYear(start, end)
    {
        $('#earliest_summer_open').datepicker({
            autoclose: true,
            todayHighlight: true,
            startDate : start,
            endDate   : end
        });
    }

Answer 1

您需要將jQuery UI（引導程序使用jQuery！）datepicker的dateFormat設置為初始化時首先使用的格式。 我認為您已經在data-data-format屬性上執行了此操作，所以沒關系...不要按需初始化datepicker，而是對document.ready進行初始化。

然后，在必要時，使用.val(date.getDate() + (start.getMonth() + 1) + "-" + start.getFullYear());將日期放入輸入中，以設置選擇器的日期.val(date.getDate() + (start.getMonth() + 1) + "-" + start.getFullYear()); 。 這就是全部。 當用戶決定單擊輸入時，日期選擇器將自行處理更改。