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

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

ただいまの
回答率

90.49%

  • jQuery

    6914questions

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

  • Bootstrap

    1001questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 6,261

hidepon

score 161

bootstrap-datepickerで取得した年月日を個別の[年][月][日]
テキストボックスに埋め込みたいのですが、どのようにしたらよいか分かりません。

<table id="pt1" border="1" class="table">
 <tbody>
  <tr>
   <th>実施日</th>
   <td>
   <input type="text" id="target_year" name="target_year" size="4" maxlength="4" class="inp" value="" />年
   <input type="text" id="target_month" name="target_month" size="2" maxlength="2" class="inp" value="" />月
   <input type="text" id="target_day" name="target_day" size="2" maxlength="2" class="inp" value="" />日
   <input type="button" id="dp_pos1" name="dp_pos1" value="日付選択" />
  </td>
 </tbody>
</table>

コード
$(function() {
    $('#dp_pos1').datepicker( {
        //カレンダーが閉じたあとの処理(各テキストボックスに値を分配)
        onClose : function(date) {
            if ( date.length > 0 ) {
                $('#target_year').val(date.split("/")[0]);
                $('#target_month').val(date.split("/")[1]);
                $('#target_day').val(date.split("/")[2]);
            }
        }
    });
});

どのようにすれば振り分けができるでしょうか?
教えて下さい。
宜しくお願いいたします

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

同名でいくつかライブラリがあるようなので、どのライブラリかによって答えが変わる可能性もあります。

$( '#dp_pos1' ).datepicker( format: 'YYYY/MM/DD' ).on( 'dp.change', function( e ) {
    console.log( e.date );
    $( '#target_year'  ).val( e.date.split( '/' )[ 0 ] );
    $( '#target_month' ).val( e.date.split( '/' )[ 1 ] );
    $( '#target_day'   ).val( e.date.split( '/' )[ 2 ] );
});

(参考にしたもの)
【Events - Bootstrap 3 Datepicker】
http://eonasdan.github.io/bootstrap-datetimepicker/Events/

【javascript - bootstrap 3 datetimepicker((eonasdan)) - e.date is undefined on "dp.show" - Stack Overflow】
http://stackoverflow.com/questions/31034675/bootstrap-3-datetimepickereonasdan-e-date-is-undefined-on-dp-show


ここから追記:


こっちだったようなので、修正。

【Events — bootstrap-datepicker documentation】
http://bootstrap-datepicker.readthedocs.org/en/stable/events.html#changedate

dp.change → changeDate に変えて、イベントの返り値がDateオブジェクトに変わる感じかな。

$( '#dp_pos1' ).datepicker().on( 'changeDate', function( e ) {
    console.log( e.date ); // ここでDateオブジェクトの取得がきちんとできているか確認
    $( '#target_year'  ).val( e.date.getFullYear() );
    $( '#target_month' ).val( e.date.getMonth() + 1 );
    $( '#target_day'   ).val( e.date.getDate() );
});

コンソールに出力されるのに、値の入手に失敗する場合は、$( '#dp_pos1' ).val() を採ってうまく使ってください。きちんと動くといいなぁ。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/07 00:58

    ご回答を頂き有難うございます。
    うまく動作しない状況です。
    利用しているのは Bootstrap 用の「Datepicker」です。
    https://eternicode.github.io/bootstrap-datepicker/?markup=input&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&maxViewMode=2&todayBtn=false&clearBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&keyboardNavigation=on&forceParse=on#sandbox
    宜しくお願いいたします。

    キャンセル

  • 2016/04/07 01:20

    追記しました。

    キャンセル

  • 2016/04/07 13:21

    うまく作動しました。とてもすばらしい内容でとても助かりました。有難うございました。

    キャンセル

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

  • ただいまの回答率 90.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • jQuery

    6914questions

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

  • Bootstrap

    1001questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。