質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

4230閲覧

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

asuen2

総合スコア11

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/09/13 06:53

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

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/

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2017/09/13 07:30

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

回答1

0

ベストアンサー

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

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

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

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

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

投稿2017/09/13 07:33

編集2017/09/13 07:56
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/09/13 07:44

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

2017/09/13 07:48

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

2017/09/13 07:51

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

2017/09/13 07:57 編集

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

2017/09/14 08:22

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

2017/09/14 08:25

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問