jQuery UIを用いた日付及び時間のピッカーの利用方法
2024/01/13
jQuery UIを用いた日付及び時間のピッカーを実装したい。以下にソースコードとサンプルをメモ。
参考サイト
http://103px.blog.fc2.com/blog-entry-28.html
サンプル
https://taitan916.info/sample/datetimepicker2/
ソース
<html> <head> <meta HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8"> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <link href="./css/datepicker.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery-ui-1.9.2.min.js"></script> <script type="text/javascript" src="./js/jquery.ui.datetimepicker.js"></script> <script type="text/javascript" src="./js/jquery.ui.datetimepicker-jp.js"></script> <script type="text/javascript"> $(function(){ $("#calender").datetimepicker(); }); </script> </head> <body> <form action="" method="post" name=""> <input type="hidden" name="mode" value="regist"> <table> <tr> <th>日時</th> <td colspan="3"> <input type="text" id="calender" name="calender"> </td> </tr> </table> </form> </body> </html>
注意点
いつも使っているgoogleAPIのjQueryuiでは上手いこといかなかった。下記からダウンロードして使うことで改善された。
関連記事
-
-
画像の登録フォームにてjQueryプラグイン(piCEdit)を用いてWebカメラの映像を撮影させる方法
form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...
-
-
「input type="number"」のテキストボックスを桁数制限且つ半角数値のみ入力可にする方法
「input type="number"」のテキストボックスに対して「2桁まで」 ...
-
-
FullCalendarでラベルごとに表示・非表示を切り替える方法
Googleカレンダーだとページ左側にマイカレンダーというのがあり、その中に任意 ...
-
-
jquery.cookie.jsで保存期間を時間指定する方法
jquery.cookie.jsで保存期間を1時間等、時間指定したい。公式サイト ...
-
-
jQueryで画像が存在すれば表示、なければノーイメージ画像を表示
やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...