カテゴリ:
jQuery

jQuery UIのSpinnerで時刻を入力する

jQuery UIのDatepickerウィジェットで日付を入力することはできるが、時刻を入力するウィジェットは用意されていない。と思っていたら、jQuery UIのサイトにひっそりとSpinnerで時刻を入力するデモが用意されていた。

jQuery UIのサイトのコードをそのまま載せるのも意味がないので多少アレンジしてシンプルにした。

<!DOCTYPE>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>jQuery UI Time Spinner</title>
		<link rel="stylesheet" href="./stylesheets/jquery-ui-1.10.3.custom.min.css" />
		<script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="./js/external/globalize.js"></script>
		<script type="text/javascript" src="./js/jquery-ui-1.10.3.custom.min.js"></script>
		<script type="text/javascript">
			$.widget('ui.timespinner', $.ui.spinner, {
				options: {
					step: 60 * 1000,
					page: 60
				},
				_parse: function(value) {
					if(typeof value === 'string') {
						if(Number(value) == value) {
							return Number(value);
						}
						return +Globalize.parseDate(value);
					}
					return value;
				},
				_format: function(value) {
					return Globalize.format(new Date(value), 't');
				}
			});

			$(document).ready(function() {
				$('#spinner1').timespinner();
			});
		</script>
		<style>
		</style>
	</head>

	<body>
		<label for="spinner1">時刻</label>
		<input id="spinner1" name="spinner1" value="09:00 AM" />
	</body>
</html>
(2013/05/06)

新着情報
【iOS Objective-C, Swift Tips】アプリアイコンにバッジを表示(Swift)
【iOS Objective-C, Swift Tips】画像の向きを指定して保存する(Swift)
【iOS Objective-C, Swift Tips】UIImagePickerControllerの表示を日本語にする(Swift)

Copyright(C) 2004-2015 モバイル開発系(K) All rights reserved.
[Home]