今日の人気記事

  1. 水平・垂直のどちらにもタブ設置可のコンテンツを実装「Vertical Tabs」
  2. クリックで開閉するスライド・ナビゲーション「bigSlide」
  3. 入力に応じてテキストエリアの高さを調節「Autosize」
  4. 画像にボーダーアニメーション効果を「Inset Border」

日付と時間の入力を補助する「DateTimePicker」

スポンサーリンク

日付と時間の入力を補助するプラグイン「DateTimePicker」を紹介します。

jQueryプラグイン「DateTimePicker」

指定したフォームをクリックするとカレンダーと時間が表示され、日付と時間を簡単に入力することができます。

ユーザーに優しいインターフェースをつくれますね。また、日付や時間のみの入力に設定することもできるので、便利!

スポンサーリンク

デモのフォームをクリックして、日付と時間を選択してみましょう。

「DateTimePicker」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>DateTimePicker - jQueryまとめのカルマ</title>
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/>
<body>
<h1>DateTimePickerのデモでーす。</h1>
<input type="text" value="" id="datetimepicker"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.datetimepicker.js"></script>
<script>
$('#datetimepicker').datetimepicker();
</script>

</body>
</html>
スポンサーリンク

関連記事(一部広告含む)