如何在JQuery-UI日期选择器中从休假天减去周末

时间:2020-11-07 14:59:36

标签: laravel jquery-ui-datepicker

我正在Laravel-5.8项目中使用JQuery-UI datepicker

< script type = "text/javascript" >
  $(document).ready(function() {

    $("#leave_days").on('keyup blur', function(e) {
      var periodval = parseInt($("#leave_days").val());
      var weekendval = parseInt($("#weekendinclusive").val());

      var startDate = $('.commencement_date');
      var endDate = $('.resumption_date');

      var dte = startDate.datepicker("getDate");

      dte.setDate(dte.getDate() + periodval);
      endDate.datepicker("setDate", dte);

    });

    $('.commencement_date').datepicker({
      dateFormat: 'dd-mm-yy',
      changeMonth: true,
      changeYear: true,
      showAnim: 'slideDown',
      duration: 'fast',
      minDate: +1,
      setDate: new Date(),
        beforeShowDay: $.datepicker.noWeekends,
      yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
    }).datepicker('setDate', '1');

    $('.resumption_date').datepicker({
      dateFormat: 'dd-mm-yy',
      changeMonth: true,
      changeYear: true,
      showAnim: 'slideDown',
      duration: 'fast',
      minDate: +1,
        beforeShowDay: $.datepicker.noWeekends,
      yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
      enableOnReadonly: true,
      beforeShow: function(i) {
        if ($(i).attr('readonly')) {
          return false;
        }
      }
    });
  }); <
/script>
<input type="hidden" id="weekendinclusive" class="form-control" value="0">
<div class="col-sm-4">
  <div class="form-group">
    <label>Commencement Date:<span style="color:red;">*</span></label>
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
      </div>
      <input type="text" id="commencement_date" class="form-control commencement_date" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="commencement_date" value="{{old('commencement_date')}}">
    </div>

  </div>
</div>
<div class="col-sm-4">
  <div class="form-group">
    <label>Leave Days:<span style="color:red;">*</span></label><input type="hidden" id="leave_balance" value="0" disabled>
    <input type="text" id="leave_days" name="no_of_days" class="form-control no_of_days" placeholder="e.g. 10" value="{{old('no_of_days')}}" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" style="width: 100%;"
      maxlength="3" onkeyup="checkScore(this.value)" onkeypress="allowNumbersOnly(event)">
  </div>
</div>
<div class="col-sm-4">
  <div class="form-group">
    <label>Resumption Date:</label>
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
      </div>
      <input type="text" id="resumption_date" class="form-control resumption_date" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="resumption_date" value="{{old('resumption_date')}}">
    </div>

  </div>
</div>

当用户选择开始日期时,他输入请假天,然后自动加载恢复日期。

使用beforeShowDay禁用周末:$。datepicker.noWeekends。

但是,我发现,尽管周末被禁用,但它仍被视为日期选择器中的休假部分:starting_date和resumption_date。

我该如何纠正?

谢谢

0 个答案:

没有答案