Category js

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>

異なる配送先を選んだ場合には住所の入力欄が作られるスクリプト

<script>
window.onload = function() { /* チェックボックス */
var check = document.getElementById(“check”); /* 同じ住所 */
var non = document.getElementById(“non”); /* 違う住所 */
var frm = document.getElementById(“frm”); /* formのID */

//
non.checked = false;
non.value = ‘off’;

/* チェックボックスにonclickイベントハンドラをセット */

non.onclick = function() {
var hide_area = document.getElementById(“hide_area”);
check.checked = false; /* */
check.value = ‘off’;

if( non.value == ‘off’ ) {

hide_area1.innerText=”郵便番号:”;

var zipp = document.createElement(“input”);
zipp.type = “text”;
zipp.id = “zipp”;
zipp.name = ‘zipp’;
zipp.size = ‘4’;
zipp.maxLength = ‘3’;
hide_area1.appendChild(zipp);

var zipp2 = document.createElement(“input”);
zipp2.type = “text”;
zipp2.id = “zipp2″;
zipp2.name = ‘zipp2’;
zipp2.size = ‘5’;
zipp2.maxLength = ‘4’;
zipp2.onKeyUp=”AjaxZip3.zip2addr(‘zipp’,’zipp2′,’pref31′,’haisosaki’);”
hide_area1.appendChild(zipp2);
}
};

//上記と同じ住所 clicked
check.onclick = function() {
non.value = ‘off’;
hide_area.addClassName(“hide_class”);
};

</script>

書いているうちにもっと簡単な方法を思いついた｡

display:none のクラスをあてたり､とったりすればいいのだ｡

$(“hide_area”).removeClassName(“hide_class”);  // 一行で片付いた｡