プログラミング

プログラミング

【オープンソース】日付入力フォームの作成はこれで!無料date pickerプラグイン7選

4,007 views

読了時間 : 約2分45秒

ドロップダウンで年月を選ぶ形のカレンダー(デートピッカー)はよく見られますが、最近ではいろいろな形のものがあります。

フォームにカレンダーを導入するのは簡単で使い勝手もよく、ほとんどのものが無料です。皆さんがいいものを見つけられるように、本記事でおすすめのプラグインを紹介します。

Vanilla JSプラグインやjQueryプラグイン、Bootstrapのようなフレームワーク用のエクステンション等、ご自身に合ったものが見つかるはずです。

 

 

1.Flatpickr

Flatpickrのプラグインは使いやすく、セットアップも簡単です。シンプルにデザインされているため、デフォルトのUIはどんなレイアウトにも馴染むでしょう。

サンプルページを見るとカレンダーが複雑な作りでないことが分かりますが、こういったシンプルさがユーザーには求められています。

年月日のカスタマイズや選べる日付の制限ができ、12時間または24時間表記で時計も表示できるオプションがあります。

デザイン、UX、機能共に優れたプラグインです。

 

 

2.  Pickadate.js

Pickadate.jsプラグインは完全リスポンシブ対応なので、どのモバイルデバイスにも最適です。

jQueryのライブラリが必要になりますが、とても軽いファイルなので読み込みが遅くなるようなことはありません。

日付だけでなく時間の選択もできるようになっています。

 

 

3.  Date Range Picker

日付の範囲指定はスケジューリングプログラム等でよく使われますが、グーグルアナリティクスでも、特定サイトの訪問者データを集めるのに使われています。

この機能を使いたければDate Range Pickerがおすすめ。BootstrapのCSSに取り込めるよう作られていますが、単独でも使用可能です。

複数月の表示から一月単位での表示、そして「過去1週間」「先月」等の決められた範囲でのデータも表示できます。

 

 

4.  Datepair.js

もう少しシンプルな日付範囲指定ならDatepair.jsがおすすめ。

2つの入力フィールドで開始と終了の日付を選び、設定によっては時間も表示できます。

入力フィールドが1つのほうがいいかどうかは人それぞれですが、セットアップは簡単なプラグインです。

 

 

5.  DateTimePicker

こちらはちょっと変わったインターフェイスのユニークなプラグイン。

レスポンシブ対応のドロップダウンメニューでは、プラス・マイナスのアイコンで日付と時間が選択できます。

簡単に月や年を変えることが出来る反面、このインターフェイスに馴染みのないユーザーは、慣れるまでに時間がかかるかもしれません。

どのプラグインでもプラス面マイナス面があるので、まずは一度目を通してみるといいでしょう。日付と時間のフィールドを1つにまとめることも可能です。

 

 

6.  glDatePicker

glDatePicker pluginは、凝ったデザインと多くのオプションの割にはとても軽めなプラグインで、縮小時にはたったの7KBです。

jQueryで動いていますが、カレンダーの日付選択ではなかなか無いゴージャスなデザインです。

いくつかテンプレートがありますが、自分でスタイル可能なCSSプロパティもあります。

全てのJS機能にコールバックがあるので、コーディングに問題がない方は自分で機能を追加することもできます。

 

 

7.  Wickedpicker

こちらは日付ではなく時間のみのピッカーですが、おすすめです。

jQueryプラグインでどんな入力フィールドにも使えます。分単位、そしてAM・PM表示まで可能で、簡単に24時間表記にすることもできます。

普段はオプションとして付いてくる時間選択機能ですが、こちらはそれに特化したプラグインです。

 

 

関連記事

 

 

※本記事は、10 Free Open Source Date Picker Pluginsを翻訳・再構成したものです。

【コンビニでも使える!メルペイ初回利用1500円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:500円分
※さらにメルペイスマート払で1000円分ポイント!
 友達招待でさらに500円分ポイント!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

dポイント最大10%『4・5・6月の金・土曜限定!』
■キャンペーン期間:2020/4/1日(水)0:00 ~ 6/30(火)23:59

 

 

【MOV初回限定 合計2,000円相当無料クーポン3枚】

クーポンコード:seleqt2000

 
対応地域:神奈川県、東京都、大阪府、京都府、兵庫県(新登場)
 
2000円オフで登録» »MOVの初回利用2000円オフのクーポンを使って登録はこちら!
 
アプリDLはこちらから↓

MOV《モブ》- タクシー配車

MOV《モブ》- タクシー配車

DeNA Co., Ltd.無料

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
interjpq2206j2tw

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ