2016/06/27

javascipt　datePicker　営業日の制御 

打ち合わせ希望日をカレンダーで選択してもらってフォームで予約を入れてもらう。
このような制御が必要になった。


当初<input type="date">で良いかな？
と思ったが、ユーザがPC：スマホで7対3位で、まだまだPCが有利なので、

datepickerを使うことにした。

その際に、
・土日は選択させない。
・4営業日以降しか選択できない。

という条件を付けたい。

土日は選択させない事は先人の知恵で問題なく解決。
問題は、4営業日以降の縛り


datepickerの変数だけでは処理できなかったので、
起算点を今日にして、今日の曜日を取得し、
datepikcerのオプション　minDate　で制御した。


以下ソース。
<HEAD>
<META HTTP-EQUIV=Content-Type CONTENT=text/html;CHARSET=UTF-8>
<TITLE>アポどり用フォーム</TITLE>
<!-- jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- jQuery-UI -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<!-- jQuery-UI-datepicker -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js\"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css\" >
<script>
<!-- 今日の曜日を抽出-->
var dateObj = new Date() ;
var weekDayList = [0,1,2,3,4,5,6] ;
var todayWeekDay = weekDayList[ dateObj.getDay() ] ;
<!--datepicker 定義-->
    $(function(){
     // Datepicker の呼び出し
    $( "#datepicker" ).datepicker({onClose: function(dateText, inst) {
     //プラン番号の取得
     //日付オブジェクトの作成
    var date = new Date(dateText);
    var weekDay = parseInt(date.getDay());
    var check = false;
    if(weekDay > 0 && weekDay < 6){
    check = true;
    }
    if(!check){
    alert("この日は選択できません");
    $( "#datepicker" ).val('');
    }
    }});
//判別4(木曜)、5(金曜）は+6day　それ以外は+4dayでOK
    if(todayWeekDay == 4 || todayWeekDay == 5){
            $( "#datepicker" ).datepicker( "option", 'minDate', "+6d" );
            $( "#datepicker" ).datepicker( "option", 'maxDate', "2m" );
            }            
            else{
            $( "#datepicker" ).datepicker( "option", 'minDate', "+4d" );
            $( "#datepicker" ).datepicker( "option", 'maxDate', "2m" );
            }
     }
     );
</script>
</HEAD>
<BODY>
<FORM ACTION="mail.php" METHOD="POST" ENCTYPE="application/x-www-form-urlencoded" >
<input type="text" name="date1" class="form_text-small\" id="datepicker" readonly="readonly">
</FORM>


こんな感じで実装すればよい。

            $( "#datepicker" ).datepicker( "option", 'minDate', "+4d" );
            $( "#datepicker" ).datepicker( "option", 'maxDate', "2m" );

肝はこの部分。
By

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)