0

有一个网页忽略周末，不允许用户选择周六或周日。我想启用它，在进行互联网搜索时，我发现下面给出的一段代码我认为可能是造成这种情况的原因。问题是我不知道要评论哪一行或者我必须做哪些改变才能启用周末。请帮忙

function datepick()
{
    var weekend_strtday = <?php echo $this->weekendDatailsArr[0]['weekendstartday']; ?>;
    var weekend_endday = <?php echo $this->weekendDatailsArr[0]['weekendday']; ?>;
    $('#from_date').datepicker({
                    beforeShowDay: function(date) {
                        var day1 = date.getDay();
                        return [(day1 != weekend_strtday && day1 != weekend_endday)];
                    },
    $('#to_date').datepicker({
                    beforeShowDay: function(date) {
                        var day2 = date.getDay();
                        return [(day2 != weekend_strtday && day2 != weekend_endday)];
                    },
4

1 回答 1

0

要使用此方法，您需要添加 JQuery UI 、 JQUery 和 JQUery 基本主题 css。

这是一个修改过的 datepick 函数，可以做到这一点。

在datepick()这些变量中存储了 0(sunday) - 6(sataurday)用户无法选择的工作日。

var weekend_strtday = 0;
var weekend_endday =  6;

beforeShowDay函数内部

一个以日期为参数的函数，并且必须返回一个包含以下内容的数组：

[0]：真/假，表示此日期是否可选

[1]: 添加到日期单元格的 CSS 类名或默认显示的 ""

[2]：此日期的可选弹出工具提示

该函数在日期选择器中的每一天在显示之前都会被调用。

欲了解更多信息，请查看此处

http://api.jqueryui.com/datepicker/#option-beforeShow

beforeShowDay: function(date) {
  var day1 = date.getDay();
  return [(day1 != weekend_strtday && day1 != weekend_endday)];
}

我们正在检查当前日期是否等于周末，并返回一个带有第一个索引的数组，true/false该索引指示该日期是否可选。

function datepick()
{
    var weekend_strtday = 0;
    var weekend_endday =  6;
    $('#from_date').datepicker({
       beforeShowDay: function(date) {
         var day1 = date.getDay();
         return [(day1 != weekend_strtday && day1 != weekend_endday)];
        }
    });
  
    $('#to_date').datepicker({
      beforeShowDay: function(date) {
         var day2 = date.getDay();
         return [(day2 != weekend_strtday && day2 != weekend_endday)]
       }
    });
  
 }
datepick();
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form>
  From_date: <input id="from_date" type="text">
  To _date: <input id="to_date" type="text">
</form>

更新

要显示所有日期，您只需beforeShowDay从配置中删除即可。

只需选择输入$('#from_date')和调用datepicker();方法。

$('#from_date').datepicker();
$('#to_date').datepicker();

检查下面的片段，

$('#from_date').datepicker();
$('#to_date').datepicker();
  
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form>
  From_date: <input id="from_date" type="text">
  To _date: <input id="to_date" type="text">
</form>

于 2017-01-11T08:27:20.253 回答