首页 > 解决方案 > 各种 JQuery datepicker 只允许最后一天

问题描述

在我的表单上,我有各种 JQuery 日期选择器,我只允许每个月的最后一天。这是循环中的代码(根据组中的用户数量生成 X 个不同的日期选择器):

<div class="col-sm-9">
<input type="text"
readonly
placeholder="<?php _e(DATE_FORMAT, TEXT_DOMAIN); ?>"
data-minDate="<?php echo date(API_DATE_FORMAT,$_SERVER['REQUEST_TIME']); ?>"
class="input_datepicker form-control input_user_edit"
name="input_block_access"
<?php echo (!empty($user->getDate()) && (int)date('Y',
    strtotime($user->getDate())) !== 1) ? 'value="'.$user->getDate().'"' : ''; ?>
    onchange="disableFields(this)"
>

现在我试图禁用除每个月的最后一天以外的所有日子。这是javascript代码:

jQuery(function() { 
              function getLastDayOfYearAndMonth(year, month)
              {
                  return(new Date((new Date(year, month + 1, 1)) - 1)).getDate();                    
              }
              jQuery("#ui-datepicker-div").datepicker({
                beforeShowDay:LastDay
              });

              jQuery(".input_datepicker").each(function(){
                jQuery(this).datepicker({
                    beforeShowDay:LastDay
                });
                console.log(jQuery(this).datepicker("widget"));
              });

              function LastDay(date){
                  // getDate() returns the day [ 0 to 31 ]                    
                  var last = getLastDayOfYearAndMonth(date.getFullYear(), date.getMonth());
                  console.log(date.getDate()+"->"+last);
                  if (date.getDate() == last)
                      return [true, ""];
                  return [false, ""];
              }
          })

不幸的是,不同的日期选择器显示所有天。

编辑:从 Wordpress 生成的 HTML 代码:

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="position: absolute; top: 680px; left: 570px; z-index: 1; display: block;">...</div>

<form>
    <div class="form-group row">
        <label class="col-sm-3 col-form-label" for="input_cancel_access">End Date</label>
        <div class="col-sm-9">
            <input type="text" readonly="" placeholder="jj.mm.aaaa" data-date-format="mm/" data-mindate="2021-12-31" class="input_datepicker form-control input_user_edit hasDatepicker" name="input_cancel_access" value="" onchange="disablePasswordInput(this)" id="dp1611299063605">
        </div>
    </div>
</form>
...
<form>
    <div class="form-group row">
        <label class="col-sm-3 col-form-label" for="input_cancel_access">End Date</label>
        <div class="col-sm-9">
            <input type="text" readonly="" placeholder="jj.mm.aaaa" data-date-format="mm/" data-mindate="2021-12-31" class="input_datepicker form-control input_user_edit hasDatepicker" name="input_cancel_access" value="31.01.2020" onchange="disablePasswordInput(this)" id="dp1611299063603">
        </div>
    </div>
</form>

希望有人可以用这段代码指出错误。

标签: javascriptjquerydatepicker

解决方案


推荐阅读