出雲川開発

datepicker でカレンダーを2つ作って開始日～終了日にする

日付フォーマットが海外スタイルなのでyyyy/mm/ddになおす

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script src="js/jquery.ui.datepicker-ja.js"></script> <!--これを読ませるだけで日付フォーマット完成-->

<script language="javascript" type="text/javascript">

$(function() {     $( "#datepicker_begin" ).datepicker();   });

$(function(){   　$("#datepicker_end").datepicker();   });

</script

</pre>

 

<h3>開始日が終了日より後にならないようにする</h3>

<p>ボタンはsubmitさせて､jsでfalseを返して止めるやり方</p>

<pre>

function next_button(){

var datepicker_begin = document.getElementById("datepicker_begin");

var datepicker_end = document.getElementById("datepicker_end");

// 最終確認

if (  datepicker_begin.value >=  datepicker_end.value  ) {

alert('到着日を返却日よりも前にしてください');

return false; //submit の返り値が false なら submit の処理が中断される

}

}

 

html

<form  name="frm" id="frm" method="post" action="add.php?<?=SID ?>"  onSubmit="return next_button();" >

<dl>

<dt>到着日</dt>

<dd>

<input name="datepicker_begin" id="datepicker_begin" type="text" placeholder="--年--月--日" size="11" maxlength="10" required />

</dd>

<dt>返却日</dt><dd>

<input name="datepicker_end" type="text" class='list_dd trs_bg' id="datepicker_end" placeholder="--年--月--日" size="11" maxlength="10"  required />

</dd>

</dl>