問題
jQuery UIのDatepickerでフォームの日付入力をカレンダー選択にするには？
解決策
- 必要なファイルをCDNから読み込みます。
- カレンダー表示用のボタンを用意し、そのボタンにクリックイベントを設定します。
- クリックイベントの処理内で「$('日付用のテキストフィールド').datepicker({ オプション: 設定 });」でDatepickerの設定を行い、続けて「$('日付用のテキストフィールド').datepicker("show");」でカレンダーを表示させます。
フォームの日付入力をカレンダー選択にする。
jQuery UIのDatepickerでフォームの日付入力をカレンダー選択にして、フォームの入力ストレスを軽減し、ユーサビリティを高めましょう。
DEMOはこちら
- ※入力フィールドの隣のアイコンをクリックすると、カレンダーが表示されます。
- ※カレンダーの日付を選択すると、入力フィールドにその日付が表示されます。
CDNを利用して、jQuery UIを読み込みます。
CDNを利用して、jQuery UIを読み込みます。
<head>
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
...
</head>フォームの作成
まず、フォームの作成を行います。
HTML
<form action="" method="post">
<table>
<tbody>
<tr>
<th scope="row"><label for="cal">日付</label></th>
<td>
<input id="cal" type="text" name="cal" class="input-text cal"> <a class="cal-icon" href="#"></a>
</td>
</tr>
</tbody>
</table>
</form>CSS
@media print, all and (min-width: 768px) {
form input.cal{
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
form .cal-icon{
content: "";
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
cursor: pointer;
background-image: url(../images/common/anchor-cal.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 30px auto;
}
form .cal-icon:hover{
filter:alpha(opacity=60); /* IE 6,7*/
-ms-filter: "alpha(opacity=60)"; /* IE 8,9 */
-moz-opacity:0.6; /* FF , Netscape */
-khtml-opacity: 0.6; /* Safari 1.x */
opacity:0.6;
zoom:1; /*IE*/
}
form .input-text[readonly]{
background-color: #C4BAB7;
}
}
@media only screen and (max-width: 767px) {
form .input-text.cal{
width: 75%;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
form .cal-icon{
content: "";
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
cursor: pointer;
background-image: url(../images/common/anchor-cal.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 30px auto;
}
form .cal-icon:hover{
filter:alpha(opacity=60); /* IE 6,7*/
-ms-filter: "alpha(opacity=60)"; /* IE 8,9 */
-moz-opacity:0.6; /* FF , Netscape */
-khtml-opacity: 0.6; /* Safari 1.x */
opacity:0.6;
zoom:1; /*IE*/
}
form .input-text[readonly]{
background-color: #C4BAB7;
}
}入力フィールドの隣のアイコンにクリックイベントを設定する。
入力フィールドの隣のアイコンにクリックイベントを設定します。
if($('form .input-text.cal').length){
$('form .input-text.cal').prop('readonly',true);
$('form .cal-icon').click(function(){
event.preventDefault();
$(this).closest('form').find('.input-text.cal').datepicker({
dateFormat: "yy年m月d日"
});
$(this).closest('form').find('.input-text.cal').datepicker("show");
});
};ポイント!
- 「$(‘日付用のテキストフィールド’).datepicker({ オプション: 設定 });」でDatepickerの設定を行うことができます。
- 「$(‘日付用のテキストフィールド’).datepicker(“show”);」でカレンダーを表示させることができます。
コメント