1
2

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.

DateTimePickerのお話

Last updated at Posted at 2017-11-22

jQueryのカレンダーのやつでしょ?
と、思って蓋開けたら、外部ライブラリでした。
それも、圧縮されてるやーつ。。。

minじゃないのが良い!(わがまま)

とりあえず、どんな機能があるのか知りたいので検索するも、なかなか日本語の情報に当たらない。

仕方ないので、公式?Githubの資源より見てみる
https://github.com/xdan/datetimepicker

ローカルに落とし、index.html を動かしてみる。。。

動かないのかい!!!!

2017-11-22_11h28_05.png

落としたファイルにyarn.lock ってのがあった。

yarn 「やーん」でいいのか?お初です。

パッケージ管理ソフトか。

とりあえず、インスコしパッケージを展開

C:\Users\hoge\datetimepicker-master>yarn install
yarn install v1.3.2
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
Done in 1.76s.

動かないのかーい!!!!

2017-11-22_11h46_57.png

やーんっっ!!!

とりあえず、app直下のjquery.jsを読みたいみたいなので、別ディレクトリにあったjquery.jsをコピーして動作確認。

consoleエラーも吐いていないので、やっと動いてくれたみたい。

ん、、、

2017-11-22_11h58_00.png

DateTimePicker Document
https://xdsoft.net/jqplugins/datetimepicker/

Full options listを参考にしたら、解決しそーだ!

課題

・レイアウトの修正 日時大きく
→ cssで修正
・input要素が日と時間で分かれているが、カレンダーは一つで
onSelectDateonSelectTime で、なんとかなりそう。
・インライン要素へ
inline:true

、、、、defaultDatedefaultTime ゆーこと聞いてくれない。

REDME読もう!

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?