ＳＱＬの窓 イラストAC フリー素材
<< MKEditor のプロジェクトをそこにあるフ… | TOP | jQuery のアナログ時計 >>

2014年06月06日

実用的かどうかは置いておいて、修正画面の日付入力に jQuery のカレンダーを使用する

 
関連する記事

実用的かどうかは置いておいて、修正画面のデータの初期表示について

入力フィールドをクリックすると、カレンダーが表示されます。
日付を初期表示すると、その日付でカレンダーが表示されます。



DOM を使用したコード

<?php
header( "Content-Type: text/html; Charset=utf-8" );
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );

?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
var datepicker_option = {
	dateFormat: 'yy/mm/dd',
	dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
	monthNames:  ['１月', '２月', '３月', '４月', '５月', '６月', '７月', '８月', '９月', '１０月', '１１月', '１２月'],
	showMonthAfterYear: true,
	yearSuffix: '年',
	changeYear: true,
	showAnim: 'fadeIn'
}
$(function() {
	$( "#birthday" ).datepicker(datepicker_option);
});
</script>

<script>

function check() {

	var pass = document.getElementById("pass").value;
	var text = document.getElementById("comment").value;

	if ( pass.trim() == "" ) {
		alert("パスワードが未入力です");
		document.getElementById("pass").focus();
		return false;
	}
	if ( text.length < 20 ) {
		alert("20文字以上の入力をお願いします");
		document.getElementById("comment").focus();
		document.getElementById("comment").select();
		return false;
	}

}
</script>
</head>
<body>
<span style="color:#ff0000;font-weight:bold;"><?= $_GET['err'] ?></span>
<form action="check.php" method="post" onsubmit="return check();"> 
	名前 <br>
	<input
		type="text"
		id="name"
		name="name"
		readonly
		style="background-color:#c0c0c0;"
		value="<?= $_GET['name'] ?>"><br> 

	備考 <br>
	<textarea
		id="comment"
		name="comment"
		style="width:400px;height:100px;"
		><?= $_GET['comment'] ?></textarea><br>

	パスワード<br>
	<input
		type="password"
		id="pass"
		name="pass"><br>

	生年月日<br>
	<input
		type="text"
		id="birthday"
		name="birthday" value="2014/1/1"><br>

<br>
<hr>

	<input type="submit" name="submit" value="送信"> 
</form>
</body>
</html>



jQuery による記述

<?php
header( "Content-Type: text/html; Charset=utf-8" );
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );

?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
var datepicker_option = {
	dateFormat: 'yy/mm/dd',
	dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
	monthNames:  ['１月', '２月', '３月', '４月', '５月', '６月', '７月', '８月', '９月', '１０月', '１１月', '１２月'],
	showMonthAfterYear: true,
	yearSuffix: '年',
	changeYear: true,
	showAnim: 'fadeIn'
}
$(function() {

	// ***********************************************
	// 更新ボタンがクリックされた時のみ確認
	// ***********************************************
	$( "#target_form" ).submit(function( event ) {

		var pass = $("#pass").val();
		var text = $("#comment").val();

		if ( pass.trim() == "" ) {
			alert("パスワードが未入力です");
			$("#pass").focus();
			event.preventDefault();
			return false;
		}
		if ( text.length < 20 ) {
			alert("20文字以上の入力をお願いします");
			$("#comment").focus();
			$("#comment").select();
			event.preventDefault();
			return;
		}

	});

	// ***********************************************
	// datepicker プラグイン
	// ***********************************************
	$("#birthday").datepicker(datepicker_option);


});
</script>
</head>
<body>
<span style="color:#ff0000;font-weight:bold;"><?= $_GET['err'] ?></span>
<form id="target_form" action="check.php" method="post"> 
	名前 <br>
	<input
		type="text"
		id="name"
		name="name"
		readonly
		style="background-color:#c0c0c0;"
		value="<?= $_GET['name'] ?>"><br> 

	備考 <br>
	<textarea
		id="comment"
		name="comment"
		style="width:400px;height:100px;"
		><?= $_GET['comment'] ?></textarea><br>

	パスワード<br>
	<input
		type="password"
		id="pass"
		name="pass"><br>

	生年月日<br>
	<input
		type="text"
		id="birthday"
		name="birthday"><br>

<br>
<hr>

	<input type="submit" name="submit" value="送信"> 
</form>
</body>
</html>
【PHPの最新記事】
posted by at 2014-06-06 02:43 | PHP | このブログの読者になる | 更新情報をチェックする


Powered by Seesaa