KDP(電子出版)のメモ 急急如律令

Amazon Kindleダイレクト・パブリッシングでの電子出版や電子書籍の作成販売について、文章やイラストの作成や編集方法について書いています。

広告

今までに出版した電子書籍

Amazon.co.jp: 急急如律令: Kindleストア

プライバシーポリシー

 

サイトにカレンダーを表示する方法

 日付をカレンダー表示して選択するのがあるが、どうやってできるのかを試してみた。DatetimePickerと言うものが良いらしいので使ってみた。

 

qiita.com

やり方が書いてあったのだけど、そのままやったら動かなかったので修正しました。

日本語だけじゃなくて、英語の本家で見てみないとイマイチ使い方がつかめなかった。

www.jqueryscript.net

本体はここからダウンロードした。

 

設定はqiitaの記事から行った。

ただ、カレンダーの選択範囲を指定したかったのでそれについては調べてから追加した。

minDate:'2020/04/23',
maxDate:'2020/05/12',
disabledDates:['2020/05/04'],
format: 'YYYYMMDD'

 たとえば、minDateでカレンダーの開始する日付、maxDateで終了する日付。disabledDatesで除外する日付を決めることができるformat: 'YYYYMMDD'でスラッシュ無しで日付を表示している。

 

 その他に、カレンダーの日付を変更したことを起点として何かをさせたいと思ったときは、イベントリスナーにdp.changeを指定すると良いようだ。表示している日付を利用する場合は、$(this).val()で渡すことができる。

$('#datetimepicker1').on("dp.change", function(e){

console.log($(this).val())

});

 

 

http://eonasdan.github.io/bootstrap-datetimepicker/

 

 

eventlistenerのchangeで日付が変わったときになにかの処理をさせることができるかと思ったがそうでもなかった。どうも専用のものが用意されているのでそれを使うようだ。

stackoverflow.com

http://eonasdan.github.io/bootstrap-datetimepicker/Events/