jQueryのdatetimepickerの使い方とは？datetimepickerを正しく使いこなそう！
- システム
エンジニア - jQueryのdatetimepickerの使い方を教えてください。
- プロジェクト
マネージャー - datetimepickerのjsとcssを使用し、ダウンロードしたりcdnを利用したりして使います。
jQueryのdatetimepickerの使い方とは？
今回は、jQueryのdatetimepickerの使い方について説明します。
jQueryのdatetimepickerを使えば、カレンダーUIで簡単に日時を指定できます。様々なオプションがあり、カスタマイズできます。また、日本語化対応も可能です。jQueryのdatetimepickerの使い方に興味のある方はぜひご覧ください。
基本的な使い方
jQueryのdatetimepickerの基本的な使い方を紹介します。datetimepickerのjsとcssを使用します。ダウンロードしても良いですし、cdnを利用しても良いです。ここではcdnでjQueryのdatetimepickerを使用可能にします。
以下サイトから最新のjsとcssのパスを取得してHTMLに記載します。
https://cdnjs.com/libraries/jquery-datetimepicker
HTMLを以下に記載します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> <meta charset="utf-8"> <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- jQuery-datetimepicker --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw==" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" integrity="sha512-bYPO5jmStZ9WI2602V2zaivdAnbAhtfzmxnEGh9RwtlI00I9s8ulGe4oBa5XxiC6tCITJH/QG70jswBhbLkxPw==" crossorigin="anonymous" /> </head> <body> 日時を選択してください。 <input type="text" id="target"> </body> </html> |
jQueryは以下のように記述します。
|
1 2 3 |
$(function() { $('#target').datetimepicker(); }); |
実行結果は以下のようになります。
See the Pen
jquery_datetimepicker1 by kskumd (@kskumd)
on CodePen.
日付と時刻が選択可能なdatetimepickerが簡単に実現できます。
時刻のみ表示
ここからは、jQueryのdatetimepickerのオプションを紹介します。まずは、時刻のみを表示するdatepickerオプションを紹介します。
HTMLは同じなので省略します。
jQueryは以下のように記述します。
|
1 2 3 4 5 |
$(function() { $('#target').datetimepicker({ datepicker:false, // 時刻のみ表示 }); }); |
実行結果は以下のようになります。
See the Pen
jquery_datetimepicker2 by kskumd (@kskumd)
on CodePen.
時刻の選択のみが可能となっていることが分かります。
日付のみ表示
今度は、日付のみ表示する方法を紹介します。jQueryのdatetimepickerのtimepickerオプションを使用します。
jQueryは以下のように記述します。
|
1 2 3 4 5 |
$(function() { $('#target').datetimepicker({ timepicker:false, // 日付のみ表示 }); }); |
実行結果は以下のようになります。
See the Pen
jquery_datetimepicker3 by kskumd (@kskumd)
on CodePen.
日付の選択のみが可能となっていることが分かります。
選択可能な時刻
jQueryのdatetimepickerのallowTimesオプションを使用すれば、選択可能な時刻を設定できます。
jQueryは以下のように記述します。
|
1 2 3 4 5 6 7 8 |
$(function() { $('#target').datetimepicker({ allowTimes:[ '06:00', '06:30', '07:00', '12:00', '12:20', '12:45', '13:00', '21:00', '21:30'] }); }); |
実行結果は以下のようになります。
See the Pen
jquery_datetimepicker4 by kskumd (@kskumd)
on CodePen.
10分刻み
jQueryのdatetimepickerのstepオプションを使用すれば、刻み時刻を設定できます。ここでは、10分刻みに設定する方法を紹介します。
jQueryは以下のように記述します。
|
1 2 3 4 5 |
$(function() { $('#target').datetimepicker({ step:10, // 10分刻み }); }); |
実行結果は以下のようになります。
See the Pen
jquery_datetimepicker5 by kskumd (@kskumd)
on CodePen.
ここでは10分刻みにしましたが、「step:30」とすると30分刻みになります。
日本語化・フォーマットの指定
jQueryのdatetimepickerを日本語化する方法を紹介します。また、フォーマットを指定する方法もあわせて紹介します。オプションはカンマ区切りで複数設定できます。
jQueryは以下のように記述します。
|
1 2 3 4 5 6 7 |
$(function() { $.datetimepicker.setLocale('ja'); // 日本語化 $('#target').datetimepicker({ timepicker:false, // 日付のみ表示 format:'Y年m月d日', // フォーマットの指定。オプションはカンマ区切りで複数指定可能 }); }); |
実行結果は以下のようになります。
See the Pen
jquery_datetimepicker6 by kskumd (@kskumd)
on CodePen.
日本語になり、フォーマットが変更されていることが分かります。
- システム
エンジニア - カレンダーUIで設定できる他に様々なオプションもあるんですね。
- プロジェクト
マネージャー - 「日付のみ」や「刻み時刻」など様々なオプションがありますので試してみてください。
まとめ
いかがでしたでしょうか。
jQueryのdatetimepickerを使えば、カレンダーUIで簡単に日時を指定できます。様々なオプションがあり、その使い方について紹介しました。ここで紹介した以外にもjQueryのdatetimepickerのオプションはあるので、興味のある方は調べてみてください。
ぜひご自身でソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
新着案件New Job
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅)遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅)病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅)開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅)債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅)PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万～55万円東京都豊島区(池袋駅)
関連記事Related Posts
-
JavaScriptでデータベースを操作する方法を紹介｜データベースの操作方法を整理しましょう
JavaScriptでデータベースを操作する方法 今回は、JavaScriptでデータベースを操作する方法について説明します。 データベースを操作するには、サーバサイドJavaScriptを使用します。JavaScrip […]
-
jquery.cookie.jsの操作方法を解説｜サンプルコードも紹介
jQueryのcookieとは jQueryは様々な機能を持つJavaScriptのライブラリですが、標準で存在しない機能もあります。その1つがcookie（クッキー）の操作です。ところがjquery.cookie.js […]
-
JavaScriptでtoStringメソッドとは？コードでわかりやすく紹介
JavaScriptでのtoStringメソッドの使い方とは？ 今回は、JavaScriptでのtoStringメソッドの使い方について説明します。 toStringメソッドは、数値や日付、配列、オブジェクトなどを文字列 […]
-
jQueryでの複数要素をselectorでor指定する方法とは？正しくselectorでor指定をしよう！
jQueryでの複数要素をselectorでor指定する方法とは？ 今回は、jQueryでの複数要素をselectorでor指定する方法について説明します。 ここでは、以下について紹介します。 ・html要素のor指定 […]
-
JavaScriptのalertとは？alertの基本的な使い方から応用まで紹介！
JavaScriptのalertとは？ JavaScirptでHTMLページを作っていると、ユーザに向けて目立つメッセージを表示したり、開発中の変数の状態などをデバッグ表示したい時があるのではないでしょうか。そんな時に手 […]
