株式会社AZU (アズ) | 長野市のWEBシステム・業務システム・WEBサイト制作会社

+ MENU

jQuery UI Datepicker Widget

jQuery UI
Datepicker Widget のカレンダー入力が簡単で便利だった。

<link rel="stylesheet" href="./js/jquery-ui/jquery-ui.css" />
<link rel="stylesheet" href="./js/jquery-ui/jquery-ui.structure.css" />
<link rel="stylesheet" href="./js/jquery-ui/jquery-ui.theme.css" />
<script src="./js/jquery-ui/jquery-ui.js"></script>

<script>
$(function() {
	$('#datepicker').datepicker({
		closeText: '閉じる',
		prevText: '前の月へ',
		nextText: '次の月へ',
		currentText: '今日',
		monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
		monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
		dayNames: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'],
		dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'],
		dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
		weekHeader: '週',
		dateFormat: 'yy/mm/dd',
		showMonthAfterYear: true,
		yearSuffix: '年',
		minDate: '+1d',
		showButtonPanel: true,
		beforeShowDay: function(date) {
			//日曜日
			if (date.getDay() == 0) {
				return [false, ''];
			}
			//土曜日
			if (date.getDay() == 6) {
				return [false, ''];
			}
			//平日
			return [true, ''];
		}
	});
});
</script>

<input id="datepicker" type="text" />
[2015/03/31]
このエントリーをはてなブックマークに追加