1
0

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 3 years have passed since last update.

【jQuery】datepickerを使って、カレンダーを実装!

Last updated at Posted at 2020-11-20

問い合わせフォームの作成時に、カレンダーにカスタムが必要で使用したdatepickerの概要を説明します。

##【目次】
1.datepickerでできること
2.datepickerでカレンダーを作ってみる
3.付けられるオプション

###1.datepickerでできること
前提として、カレンダーから日付をワンクリックで選択できる機能を使うことができる他に、ドロップダウンリストから選択できる機能など様々なカスタムができるものである。
それ以外にもオプションで、
・英語/日本語表記にする
・指定の日付フォーマットを使用できる
・曜日や時間も表示させられる
・カレンダーを表示させる時のアニメーションを設定できる
・過去の日付は表示させない ...etc

###2.datepickerでカレンダーを作ってみる

######①まず、必要なソースを打ち込む。※そのままコピペでOK!

1.https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
2.
3.https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css
1.<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
2. 
3.<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

これで、jQueryUIが使えるようになりまいした!

######②inputタブで簡単なカレンダー表記をさせてみましょう!

1.<input type="text" id="datepicker">
1.$('#datepicker').datepicker();

これでカレンダー設置完了です!
こんな感じ↓
記事用スクショ.png

#【!!これで完成!!】

あとは、好きなようにカスタムしてみてください★

1
0
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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?