使用开始日期和休假天来计算jquery datepicker中的假期和周末

时间:2020-11-11 10:41:29

标签: jquery jquery-ui-datepicker

我正在使用JQuery-UI datepicker。在我的代码中,我已经能够使用Beginning_date和Leave_days来获取resumption_date。

当用户选择开始日期时,在#leave_days键入时,将自动生成恢复日期。成功完成此操作无需考虑周末和节假日:

$(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: disabledays,
    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: disabledays,
    yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
    enableOnReadonly: true,
    beforeShow: function(i) {
      if ($(i).attr('readonly')) {
        return false;
      }
    }
  });
});

function disabledays(date) {
  var ymd = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
  //if u have to disable a list of day
  var removeDays = holidayDays;
  if ($.inArray(ymd, removeDays) >= 0) {
    return [false];
  } else {
    //Show accept sundays
    var day = date.getDay();
    return [(day == 1 || day == 2 || day == 3 || day == 4 || day == 5)];
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

不允许用户选择恢复日期,它是从开始日期和休假日期自动生成的。

我能够使用以下方法从开始日期和休假日中获取恢复日期:

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

});

也禁用了周末和节假日。

注意:不允许用户选择恢复日期

如何将残疾人加入

$("#leave_days").on('keyup blur', function(e) {

为了计算残疾人士的假期和周末到开始日期和休假天的时间以获取恢复日期?

谢谢

0 个答案:

没有答案