如何从下拉列表中获取年份并准备日期，然后在启动日期范围中设置开始日期和结束日期

Question

I have a form, in this form I have one dropdown to select year and text box for datepicker . I am using bootstrap datepicker .

What I need is, If I select a year from dropdown . I need to set startDate and endDate in datepicker. startDate + 3 is endDate .

Eg: If I select 2019 from dropdown. Datepicker calendar need to start with jan 2019 and end with dec 2022.

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>

Script

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

You need to set the dateFormat of the jQuery UI (bootstrap uses jQuery!) datepicker to the format you use first upon initialization. I think you did so already on the data-data-format attribute, so that is ok... Do not initialize the datepicker on demand but do so on document.ready.

Then whenever necessary, set the date of the picker by putting the date into the input, using .val(date.getDate() + (start.getMonth() + 1) + "-" + start.getFullYear()); . That is all there is to it; datepicker will handle the change itself when the user decides to click in the input.