0

週末を無視し、ユーザーが土曜日または日曜日を選択できない Web ページがあります。私はそれを有効にしたかったのですが、インターネット検索を行っているときに、これを引き起こしている可能性があると思われる以下のコードを見つけました。問題は、どの行にコメントすればよいか、または週末を有効にするためにどのような変更を行う必要があるかがわからないことです。助けてください

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]: この日付が選択可能かどうかを示す true/false

[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 に答える