Question

我有一个表单，在此表单中我有一个dropdown可以选择year而text box可以选择datepicker。我正在使用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的dateFormat（bootstrap使用jQuery！）datepicker设置为初始化时首先使用的格式。我想你已经在data-data-format属性上这样做了，所以没关系...... 不要按需初始化datepicker，而是在document.ready上执行此操作。

然后在必要时，使用.val(date.getDate() + (start.getMonth() + 1) + "-" + start.getFullYear());将日期输入到输入中来设置选择器的日期。这就是它的全部;当用户决定点击输入时，datepicker将自己处理更改。

如何从下拉列表中获取年份并准备日期，然后在bootstrap daterange中设置startdate和end date

1 个答案: