カテゴリ:
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)
新着情報
【オープンソースソフトウェア環境構築】Apple silicon Macで開発環境を構築
【Rust Tips】Actix webでJSONをPOSTする
【Rust Tips】コマンドライン引数を取得する
Copyright© 2004-2018 モバイル開発系(K) All rights reserved.
[Home]