【js】Bootstrap3 datetimepickerの年月日時間の分割について

Question

###前提・実現したいこと
はじめまして。
こちらのサイトでは、初めて質問致します。よろしくお願いします。

datetimepickerについて質問があります。
datetimepickerを使い年月日時間の入力される項目を分割したいです。

###発生している問題・エラーメッセージ
基本的な使用方法は分かりましたが、今の状態では、一つの項目に全てが入力されてしまいます。それを各項目ごとに分けて、選んだと同時に入力されるようにしたいです。
jsについては、まだ素人な為申し訳ないのですが、ご教授をお願い致します。

###該当のソースコード

<div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='datetimepicker1'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker1').datetimepicker(); }); </script> </div> </div>

###補足情報(言語/FW/ツール等のバージョンなど)
jsは以下からダウンロードしました。
https://github.com/Eonasdan/bootstrap-datetimepicker

ソースコードは下記を参考にしています。
https://eonasdan.github.io/bootstrap-datetimepicker/

Comments

[m.ts10806]

プログラムコード(およびエラーメッセージ)は```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）

Answer 1

古い記事かもしれませんが、下記のようなやり方があるようです。

• 【jQuery UI】datepickerで年/月/日で別々のフォームにしたい時

応用すれば時間もいけるのではと思います。

追記：
私が提示したのはお使いのbootsrap-datepickerにおける対応方法ではないので、
「datepickerのイベントを拾って自身でそれぞれの値を設定する」という考え方の部分のみを参考にしてください。

でbootstrapで再度探してみたら、こんな質問があがっていました。
こっちの方が参考になるかもしれません。

• bootstrap-datepickerで取得した年月日を個別のテキストボックスに埋め込みたい

changeDateのイベントを拾って自身でそれぞれ設定しているので考え方はほぼ同じようですね。

Comments

[kei344]

「datetimepicker」とか似た名前のライブラリは結構たくさんあり、それぞれ挙動が違う可能性がありますよ。（「イベントで拾って、自分で書き換える」という意図でしたらすみません）

[m.ts10806]

あ、確かに。
bootstrapだから全く同じやり方が使えるかどうかわかりませんね。
組み方の参考程度でしょうね。
ちょっと追記します。

[asuen2]

分かりづらい質問の仕方で申し訳ないです。提示していただきましたサイトを見本にしてやってみます。ありがとうございます。

[m.ts10806]

追記しました。
リンクも追加しています。
考え方は同じです。
そういえば回答者がkei344さんでしたね＾＾

[mirainonakamura]

http://qiita.com/mirainonakamura/items/9ba460191bb9737d93c9
こちらで調べてみましたらので、宜しければ見てください。

[m.ts10806]

mirainonakamuraさん　素晴らしい検証ありがとうございます。
個人的には別回答にしてもらってベストアンサーとしていただきたかった・・・。

[asuen2]

皆様、ご協力いただきありがとうございます。試行錯誤の末何とか動かす事が出来ました。
勉強する事がたくさんあるなと痛感しました。