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にて何らかの処理中にブラウザをロックする「waitMe」プラグインの利用方法
jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたい。 ...
-
-
javascriptやjQueryで画像を書き換えても変わらない場合
けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...
-
-
国土地理院のAPIを使用して無料でジオコーディング(住所→経度緯度)を行う方法
GoogleMapAPIでジオコーディングをするには、支払い情報を登録したアカウ ...
-
-
ajaxのエラー詳細を取得する
success or errorで分岐処理はできるけど、 エラー詳細取れないの？ ...
-
-
jquery.cookie.jsで「$.cookie is not a function」エラー
フロントエンド側でCookieを利用したい場合jquery-cookieを用いる ...