*

「DateTimePicker」 日時の入力も怖くない!jQuery プラグイン

公開日: : JQuery

calendar

こんにちは♪

お久しぶりの更新となってしまって。。。

これからもチョコチョコ更新していこうと思いますのでよろしくお願いしますm(__)m

 

ウェブサイトを構築していると入力フォームとかよく作りますよね。フォームを作成していて意外にやっかいなのが日時の入力欄!

「2014/01/01 0:0:00」

手入力とか煩雑なことさせるわけにもいかないし、何かいい方法は無いのかと常々悩んでおりました。

 

日時の入力支援機能がめちゃ便利

timepicker

DateTimePickerを使うと画像のように入力支援を行ってくれます。フォーマットとかも変更できてめちゃ便利♪

これならユーザーも入力が苦ではないですよね。

 

下準備

さてさて、ここからは使い方を紹介します。

Githubで公開されているのでまずはダウンロード。ダウンロードしたzipファイルを解凍します。

jQuery本体はこちらからダウロードしてください。

使用するファイルは以下の2つjquery.datetimepicker.cssとjquery.datetimepicker.js。

<!-- jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.datetimepicker.js"></script>

<!-- CSS -->
<link rel="stylesheet" href="jquery.datetimepicker.css">

こんな感じで読み込ませれば下準備は完了。(ファイルのパスは自環境に合わせて変更してください)

使い方

次に簡単な使い方を説明します。


<script>
$(function(){
$('#hoge').datetimepicker();
});
</script>

 

id=”hoge”の要素に対してピッカーを表示させたい場合は上記のように書いて


<input id="hoge" type="text"> 

みたいな感じでインプットタグを作成。これだけで完成です。DateTimePickerには様々なオプションがあるのでちょっとだけ紹介していきます。

 

オプションの使い方

  • 表記を日本語にしたい
$(function(){
$('#hoge').datetimepicker({
 lang:"ja"
});
});
  •  時間表記を10分区切りにしたい
$(function(){
$('#hoge').datetimepicker({
 step:10
});
});

等々、詳しくはこちらからどうぞ。

日付の入力のさせ方に困ってる(>_<)とか時間入力のフォームが上手く作れない(・_;)って方は是非お試しください♪

お問い合わせはこちら!

関連記事

OWL Carousel – Amazonのおすすめ商品的なカルーセルがサクッと作れるJQueryプラグイン

カルーセルと聞いたら「ん?まき・・・」としか脳みそが働きませんでした。どうもOsamuです。

記事を読む

お問い合わせはこちら!

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

お問い合わせはこちら!

Laravel 5.1の自動ログインのお試し!

セッションの保持時間を1分にする 単位:分 デフォルト

SourceTreeで差分ファイルを抽出

GitのクライアントでSourceTreeを利用する時、コミットの差分

第104回 PHP勉強会に参加しました!

昨日「第104回 PHP勉強会@東京」に参加し、メイン発表をしました。

Windows10にLaravel開発環境を構築

本記事は筆者のノートパソコンにLaravelプロジェクトの開発環境を構

複数のXAMPPインストール

Windows環境でPHP開発をする際にXAMPPをインストールするこ

→もっと見る

  • AWS構築 - クラウドアドバイザー
PAGE TOP ↑