JavaScript + Ajax 実践サンプル集 - カレンダーから日付を選択する

カレンダーから日付を選択する

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのdatePicker()プラグインを利用してポップアップカレンダーを表示します。テキストボックスにフォーカスを移動すると自動的にポップアップカレンダーが表示されます。カレンダーから日付を選択すると自動的に閉じます。日付を選択したくないときは[閉じる]をクリックします。

このサンプルを編集して試してみる

カレンダーの日本語をカスタマイズするには、ui.datepicker-ja.jsを書き換えてください。

$('#example').datepicker();

外部スクリプトCSS部HEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
ui.datepicker-ja.js

jQuery(function($){   
    $.datepicker.regional['ja'] = {clearText: '', clearStatus: '',   
        closeText: '閉じる', closeStatus: '',   
        prevText: '<前月', prevStatus: '',   
        nextText: '次月>', nextStatus: '',   
        currentText: '今日', currentStatus: '',   
        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月'],   
        monthStatus: '', yearStatus: '',   
        weekHeader: 'Wk', weekStatus: '',   
        dayNames: ['日','月','火','水','木','金','土'],   
        dayNamesShort: ['日','月','火','水','木','金','土'],   
        dayNamesMin: ['日','月','火','水','木','金','土'],   
        dayStatus: 'DD', dateStatus: 'D, M d',   
        dateFormat: 'yy/mm/dd', firstDay: 0,    
        initStatus: '', isRTL: false};   
    $.datepicker.setDefaults($.datepicker.regional['ja']);   
});

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
/* Main Flora Style Sheet for jQuery UI ui-datepicker */
#ui-datepicker-div, .ui-datepicker-inline {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 14px;
	padding: 0;
	margin: 0;
	background: #E0F4D7;
	width: 185px;
}
#ui-datepicker-div {
	display: none;
	border: 1px solid #FF9900;
	z-index: 10;
}
.ui-datepicker-inline {
	float: left;
	display: block;
	border: 0;
}
.ui-datepicker-rtl {
	direction: rtl;
}
.ui-datepicker-dialog {
	padding: 5px !important;
	border: 4px ridge #83C948 !important;
}
button.ui-datepicker-trigger {
	width: 25px;
}
img.ui-datepicker-trigger {
	margin: 2px;
	vertical-align: middle;
}
.ui-datepicker-prompt {
	float: left;
	padding: 2px;
	background: #E0F4D7;
	color: #000;
}
*html .ui-datepicker-prompt {
	width: 185px;
}
.ui-datepicker-control, .ui-datepicker-links, .ui-datepicker-header, .ui-datepicker {
	clear: both;
	float: left;
	width: 100%;
	color: #FFF;
}
.ui-datepicker-control {
	background: #FF9900;
	padding: 2px 0px;
}
.ui-datepicker-links {
	background: #E0F4D7;
	padding: 2px 0px;
}
.ui-datepicker-control, .ui-datepicker-links {
	font-weight: bold;
	font-size: 80%;
	letter-spacing: 1px;
}
.ui-datepicker-links label {
	padding: 2px 5px;
	color: #888;
}
.ui-datepicker-clear, .ui-datepicker-prev {
	float: left;
	width: 34%;
}
.ui-datepicker-rtl .ui-datepicker-clear, .ui-datepicker-rtl .ui-datepicker-prev {
	float: right;
	text-align: right;
}
.ui-datepicker-current {
	float: left;
	width: 30%;
	text-align: center;
}
.ui-datepicker-close, .ui-datepicker-next {
	float: right;
	width: 34%;
	text-align: right;
}
.ui-datepicker-rtl .ui-datepicker-close, .ui-datepicker-rtl .ui-datepicker-next {
	float: left;
	text-align: left;
}
.ui-datepicker-header {
	padding: 1px 0 3px;
	background: #83C948;
	text-align: center;
	font-weight: bold;
	height: 1.3em;
}
.ui-datepicker-header select {
	background: #83C948;
	color: #000;
	border: 0px;
	font-weight: bold;
}
.ui-datepicker {
	background: #CCC;
	text-align: center;
	font-size: 100%;
}
.ui-datepicker a {
	display: block;
	width: 100%;
}
.ui-datepicker-title-row {
	background: #B1DB87;
	color: #000;
}
.ui-datepicker-title-row .ui-datepicker-week-end-cell {
	background: #B1DB87;
}
.ui-datepicker-days-row {
	background: #FFF;
	color: #666;
}
.ui-datepicker-week-col {
	background: #B1DB87;
	color: #000;
}
.ui-datepicker-days-cell {
	color: #000;
	border: 1px solid #DDD;
}
.ui-datepicker-days-cell a {
	display: block;
}
.ui-datepicker-week-end-cell {
	background: #E0F4D7;
}
.ui-datepicker-unselectable {
	color: #888;
}
.ui-datepicker-week-over, .ui-datepicker-week-over .ui-datepicker-week-end-cell {
	background: #B1DB87 !important;
}
.ui-datepicker-days-cell-over, .ui-datepicker-days-cell-over.ui-datepicker-week-end-cell {
	background: #FFF !important;
	border: 1px solid #777;
}
* html .ui-datepicker-title-row .ui-datepicker-week-end-cell {
	background: #B1DB87 !important;
}
* html .ui-datepicker-week-end-cell {
	background: #E0F4D7 !important;
	border: 1px solid #DDD !important;
}
* html .ui-datepicker-days-cell-over {
	background: #FFF !important;
	border: 1px solid #777 !important;
}
* html .ui-datepicker-current-day {
	background: #83C948 !important;
}
.ui-datepicker-today {
	background: #B1DB87 !important;
}
.ui-datepicker-current-day {
	background: #83C948 !important;
}
.ui-datepicker-status {
	background: #E0F4D7;
	width: 100%;
	font-size: 80%;
	text-align: center;
}
#ui-datepicker-div a, .ui-datepicker-inline a {
	cursor: pointer;
	margin: 0;
	padding: 0;
	background: none;
	color: #000;
}
.ui-datepicker-inline .ui-datepicker-links a {
	padding: 0 5px !important;
}
.ui-datepicker-control a, .ui-datepicker-links a {
	padding: 2px 5px !important;
	color: #000 !important;
}
.ui-datepicker-title-row a {
	color: #000 !important;
}
.ui-datepicker-control a:hover {
	background: #FDD !important;
	color: #333 !important;
}
.ui-datepicker-links a:hover, .ui-datepicker-title-row a:hover {
	background: #FFF !important;
	color: #333 !important;
}
.ui-datepicker-multi .ui-datepicker {
	border: 1px solid #83C948;
}
.ui-datepicker-one-month {
	float: left;
	width: 185px;
}
.ui-datepicker-new-row {
	clear: left;
}
.ui-datepicker-cover {
	display: none;
	display/**/: block;
	position: absolute;
	z-index: -1;
	filter: mask();
	top: -4px;
	left: -4px;
	width: 193px;
	height: 200px;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
  <link href="jQuery/datePicker/flora.datepicker.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/datePicker/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/datePicker/ui.datepicker.js" type="text/javascript"></script>
  <script src="jQuery/datePicker/ui.datepicker-ja.js" type="text/javascript"></script>
  <script type="text/javascript">

    $(function() {

      $('#example').datepicker();
      $('#exampleRange').datepicker({ rangeSelect: true, firstDay: 1 });    

    });
  </script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
<input type="text" id="example" 
  value="Click inside me to see a datepicker" style="width:300px;"/>
<br /><br />
<input type="text" id="exampleRange" 
  value="Range datepicker starting on Monday." style="width:300px;"/>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

カレンダーから日付を選択する

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

カレンダーから日付を選択する

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!