Question

我有一个具有多个位置的自定义约会表格。在星期日，所有地点都关闭。在星期六，只有几个营业处。一个地点非常忙，以至于所有约会至少需要提前1周。

我在寻找答案，说：“您无法更新当前选择器。您需要销毁它，在数组中设置保留日期，并使用这些选项重建日期选择器。”，这意味着复制自定义日期选择器表格以及所有奇怪的区域格式和选项。

然后，在告诉所有人这将是值得做的事之外，我发现您可以在接下来的7天中动态地进行以下操作：

$('input.datepicker').datepicker( 'option', 'minDate', '+7d');

那行得通！然后还发现您可以使用以下命令告诉当前日期选择器切换到今天的日期：

$('input.datepicker').datepicker('setDate', 'today');

那么我可以现场直播一个日期选择器来隐藏周末吗？我应该可以，但是我发现的选项失败了：

$('input.datepicker').datepicker({ beforeShowDay: jQuery.datepicker.noWeekends });

我真的很想能够说“没有周末”或“没有星期日”，而无需破坏和重建，但这不是一个热门话题，因为大多数表格不需要动态更新日期选择器。

这只是我要完成的事情的一个小提琴：https://jsfiddle.net/56qsau34/

编辑：所以我真的很接近，但是我将错误的方法（？）应用于实时日期选择器。如果您做出最后的猜测并将其正确编写，它将起作用！

$('input.datepicker').datepicker( 'option', 'beforeShowDay', jQuery.datepicker.noWeekends );

编辑＃2：只为可怜的灵魂找到了最终解决方案。当您意识到需要“切换” noWeekends功能时，此函数将返回所有带有“ true”的日期，这将非常方便：

$('input.datepicker').datepicker('option', 'beforeShowDay', function(d) {       
    var year = d.getFullYear(),
        month = ("0" + (d.getMonth() + 1)).slice(-2),
        day = ("0" + (d.getDate())).slice(-2);

    var formatted = year + '-' + month + '-' + day;

    //is it a sunday - this was the missing bit for all my specs
    if (d.getUTCDay() != 0) {
      return [true, "",""]; 
    }else{
      return [false, "",""];
    }
}

Answer 1

这有帮助吗？ Can the jQuery UI Datepicker be made to disable Saturdays and Sundays (and holidays)?

周末可见但不能选择。

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!--
    want to hide weekends from calendar

    https://stackoverflow.com/questions/501943/can-the-jquery-ui-datepicker-be-made-to-disable-saturdays-and-sundays-and-holid


-->


  <title>jQuery UI Datepicker - Disable the Selection of some days  </title> 


    <link href="jquery-ui-1.10.3.css" rel="stylesheet">

              <script
              src="https://code.jquery.com/jquery-2.2.0.min.js"
              integrity="sha256-ihAoc6M/JPfrIiIeayPE9xjin4UWjsx2mjW/rtmxLM4="
              crossorigin="anonymous"></script>


              <script
              src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"
              integrity="sha256-lnH4vnCtlKU2LmD0ZW1dU7ohTTKrcKP50WA9fa350cE="
              crossorigin="anonymous"></script>


    <script type="text/javascript">


        $(function () {
            $(".datepicker1").datepicker({
                beforeShowDay: $.datepicker.noWeekends
            });
        });
    </script>

</head>
<body>
    <h3>Click in the TextBox to select a date :</h3>
    <p>weekends are not selectable</p>
    <input type="text" class="datepicker1" />

</body>
</html>

Answer 2

是的，您可以更改options而不会破坏小部件。

$.datepicker.noSundays = function (date) {
   return [ date.getDay() != 0, "" ];
}

$("#foo").click(function() {
  $("input").datepicker();
});

$("#nowknd").click(function() {
  $("#datepicker").datepicker('option', 'beforeShowDay', $.datepicker.noWeekends);
});

$("#okwknd").click(function() {
  $("#datepicker").datepicker('option', 'beforeShowDay', '');
});

$("#nosuns").click(function() {
  $("#datepicker").datepicker('option', 'beforeShowDay', $.datepicker.noSundays);
});

$("#weekblock").click(function() {
  $("#datepicker").datepicker('option', 'minDate', '+7d');
});

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<p>Date:<input type="text" id="datepicker"></p>
<p>
  <button id="foo">Make it a datepicker</button>
  <button id="nowknd">Block weekends</button>
  <button id="okwknd">Allow weekends</button>
  <button id="nosuns">Block Sundays</button>
  <button id="weekblock">Block off a week</button>
</p>

动态日期封锁jquery datepicker

2 个答案: