4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

カレンダー作成関連メモ

Last updated at Posted at 2016-06-07

直感的に日時を指定したい場合によく使われるカレンダー機能についていろいろ試行錯誤した結果をメモに残しておく。
各々の方法の試した結果は別記事:試行錯誤編に記載する。

日付だけでなく、時間も指定してしまいたい場合に幾つか方法がある

1 datepickertimepicerのあわせ技

JQueryUIのdatepickerとJQueryUIの公式サイトからは入手できないがgithubから入手できるtimepickerを使う。
参考:datepickerとtimepickerを使って入力しやすいフォームを作る

2 datetimepickerを使う 
=>別記事作成 カレンダー試行錯誤編:datetimepicker

DateTimePickerから入手。
入手ZIPを解凍した中にある、index.htmlを起動すると、ほとんどのサンプルをみることができるので便利。
参考:日付や時間を直感的に選択できるDateTimePicker

また、デザインをどうにかしたい場合はbootstrapを使用する方法もある模様。

AdminLTEのdaterangepickerをDatePickerまたはDatetimePickerとして使いたい
Bootstrap 3でDatetimePickerを使いたい

複数ヶ月のカレンダーを表示したい
=>別記事作成 カレンダー試行錯誤編:datepicker複数月表示

複数ヶ月のカレンダーを表示したい場合にはこちらが参考になりそう。
jQueryのカレンダー・期間選択のプラグインなど、あれこれ。
issue in rendering jquery datetimepicker into a modal

人気ランキング - jQueryカレンダーというものがあるらしい。
最近のはやりを取り入れるのに参考になるかもしれない。

4
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?