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

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

ただいまの
回答率

90.47%

  • jQuery

    6926questions

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

  • Bootstrap

    1008questions

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

bootstrap-datepickerで「日付選択」のボタンに選択した日付が表示されてしまう

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 4,696

hidepon

score 161

bootstrap-datepickerで「日付選択」のボタンに選択した日付が表示されてしまいます。
$( '#dp_pos1').val(”日付選択”);
としても表示は変わりません。
どのようにすればよいでしょうか?

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

コード
$( '#dp_pos1' ).datepicker().on( 'changeDate', function( e ) {
    $( '#target_year'  ).val( e.date.getFullYear() );
    $( '#target_month' ).val( e.date.getMonth() + 1 );
    $( '#target_day'   ).val( e.date.getDate() );
});


追記

            <table id="pt2" border="1" class="table ap_table">
              <tbody>
                <tr>
                  <th>実施日2</th>
                  <td>
                    <input type="text" id="target_year2" name="target_year2" size="4" maxlength="4" class="inp" value="<?php echo $target_year;?>" /><input type="text" id="target_month2" name="target_month2" size="2" maxlength="2" class="inp" value="<?php echo $target_month;?>" /><input type="text" id="target_day2" name="target_day2" size="2" maxlength="2" class="inp" value="<?php echo $target_day;?>" /><input type="button" id="dp_pos2" name="dp_pos2" value="日付選択" />
                    <input type='hidden' id='container' />
                  </td>
                </tr>
              </tbody>
            </table>
            <div id='dpbody' style='position:absolute;left:200px'></div>
//JS
$('#container').datepicker({
    language : ja,
    clearBtn : true,
    container : '#dpbody'
    }).on('changeDate', function(){
    if(e.date){
        var d = e.date;
        $('#target_year2').val( d.getFullYear() );
        $('#target_month2')val( d.getMonth() + 1 );
        $('#target_day2').val( d.getDate());
    }
    $(this).datepicker('hide')
});
$('#dp_pos2').on('click', function(){
    $('#container').datepicker('show').on( 'changeDate', function( e ) {
        $('#target_year2').val( e.date.getFullYear() );
        $('#target_month2').val( e.date.getMonth() + 1 );
        $('#target_day2').val( e.date.getDate());
        $(this).datepicker('hide')
    });
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

0

質問者ソース)

$('#container').datepicker({
    language : ja,

オプションの値はstringでした。元ネタの私の方のソースもミスってましたねorz

正)

$('#container').datepicker({
    language : "ja",

質問者ソース)

if(e.date){
    var d = e.date;
    $('#target_year2').val( d.getFullYear() );
    $('#target_month2')val( d.getMonth() + 1 );

最後の行、ドットが落ちてます。(これもコピペ元の誤記かorz)

正)

if(e.date){
    var d = e.date;
    $('#target_year2').val( d.getFullYear() );
    $('#target_month2').val( d.getMonth() + 1 );

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/04/08 12:00

    私の不注意とかも重なって申し訳ございません。

    function(){
    のところに引数eを入れたら動くようになりました。
    あとはポジションの位置調整のみです。
    左上はしに表示されてしまうのをボタン付近に表示されるように頑張ってみます。
    CSSの問題なんですよね!?
    試行錯誤で頑張ってみます。
    本当に有難うございます。

    キャンセル

  • 2016/04/08 14:20

    本当に申し訳ございません。
    style='position:absolute;left:200px'
    を外して
    $('#dpbody').css("text-align,center");
    のようにして位置調整を試みていますが、位置変更が反映されません。
    もともとレスポンシブ対応のbootstrapの機能なので位置が変わるのは想定外でした。
    CSSファイルを設定しているのですが。位置がうんともすんとも動きません。
    できれば、ボタンの下ぐらいに表示できればと思っていました。
    難しそうなので、画面中央でも良いかなと思っています。(レスポンシブの意味合いで)
    本当に申し訳ないのですが、ご教授頂ければ有難いです。

    キャンセル

  • 2016/04/08 14:31

    「CSS」に関する質問ということで「レスポンシブ対応の画面で任意の位置にタグを配置するにはどうすればいいか」を新規でかけた方がいいと思います。(正直私はCSS関連はあまり詳しくないので、ここで1:1のやり取りをしてるよりも他の詳しい人を頼りにしましょう)

    キャンセル

  • 2016/04/08 14:38

    そうですね。本当に有難うございました。簡単に日付選択できるという説明だったのですが、小生が目指していることに対応するだけでこんなに苦しむとは思っていませんでした。
    有難うございました。

    キャンセル

  • 2016/04/08 14:42

    せっかくベストアンサーいただいてありがたいのですが、つけるなら私のもう一つの回答のほうにしていただけると。。。

    キャンセル

  • 2017/02/04 11:54

    すみません。使い方が良く分かっていなかったです・・・・orz

    キャンセル

0

datepicker の呼び出し方が他にもあるかも知れませんね。
下記のようにしても変わりませんでしたか?

$( '#dp_pos1' ).datepicker().on( 'changeDate', function( e ) {
    $( '#target_year'  ).val( e.date.getFullYear() );
    $( '#target_month' ).val( e.date.getMonth() + 1 );
    $( '#target_day'   ).val( e.date.getDate() );
    $( '#dp_pos1').val( '日付選択' ); 
});


【Markup — bootstrap-datepicker documentation】
http://bootstrap-datepicker.readthedocs.org/en/stable/markup.html#inline-or-embedded

inline or embedded

<div id="datepicker" data-date="12/03/2012"></div>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/04/07 14:07

    ご返答有難うございます。上記の方法では選択した日付がボタン上に表示されてしまいます。
    単純に解決できると思いきや悪戦苦闘しています。
    引き続きよろしくお願いいたします。

    キャンセル

  • 2016/04/07 14:26

    <button type="button id="dp_pos1" name="dp_pos1" data-date="">日付選択</button>
    ボタンタグでは?

    キャンセル

  • 2016/04/07 14:57

    データがPOSTされちゃいますね・・・なんでだろう??ん・・・困りましたね・・・引き続きよろしくお願いいたします

    キャンセル

  • 2016/04/07 15:09

    <label for="dp_pos1"><input type="button" id="dp_pos1" name="dp_pos1" value="" />日付選択</label>
    として、#dp_pos1をCSSでうまく隠してしまえれば。

    キャンセル

0

ちょっち力技ですが。

html側:

<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="日付選択" />
<input type='hidden' id='container' />


hiddenを一つ追加してます。

で、javascript側

$('#dp_pos1').on('click', function(){
    $('#container').datepicker('show').on( 'changeDate', function( e ) {
        $( '#target_year'  ).val( e.date.getFullYear() );
        $( '#target_month' ).val( e.date.getMonth() + 1 );
        $( '#target_day'   ).val( e.date.getDate());
        $(this).datepicker('hide')
    });
});

要するにボタンはボタンの役割だけ(押されたらdatepicker呼び出し[show])
DatePicker側はchangeイベントの最後に自分を消す(hide)という。

もともと入力欄とセットで使うのが目的のものなので今回の質問者さんの使用法はおそらく想定外のものだったのではないかと。

■追記:
datepicker→各inputタグの値渡しはできてるけどその逆がないので追加。

var r = function(dp){
    $('#target_year').on('change', function(){
        var d =dp.datepicker('getDate');
        d.setFullYear($(this).val());
        dp.datepicker('setDate', d);
    });
    $('#target_month').on('change', function(){
        var d = dp.datepicker('getDate');
        d.setMonth($(this).val() - 1);
        dp.datepicker('setDate', d);
    });
    $('#target_day').on('change', function(){
        var d = dp.datepicker('getDate');
        d.setDate($(this).val());
        dp.datepicker('setDate', d);
    });
};
r($('#container'));

■追記2:
最終的にこれくらいにしとけば変更に耐えやすいかな。

$(function(){

  var dpinit = function(dp, year, mon, day, d){

    var _get = function(elm){ return elm.datepicker('getDate'); }
    var _set = function(elm, val){ elm.datepicker('setDate', val); return elm; }

    dp.datepicker().on('changeDate', function(e) {
      year.val( (d =e.date).getFullYear() );
      mon.val( d.getMonth() + 1 );
      day.val( d.getDate());
      $(this).datepicker('hide')
    });

    $('#dp_pos1').on('click', function(){ dp.datepicker('show'); });

    year.on('change', function(){
      (d =_get(dp)).setFullYear($(this).val());
      _set(dp, d);
    });
    mon.on('change', function(){
      (d =_get(dp)).setMonth($(this).val() - 1);
      _set(dp, d);
    });
    day.on('change', function(){
      (d =_get(dp)).setDate($(this).val());
      _set(dp, d);
    });
  };
  dpinit($('#container'), $('#target_year'), $('#target_month'), $('#target_day'));
});

■追記3

datepickerのオプションについて

■日本語化
「language : "ja"」→有効にするために「bootstrap-datepicker.ja.js」または「bootstrap-datepicker.ja.min.js」を読み込んどく必要があります。

■クリアボタン
「clearBtn:true」→クリアボタンを押すと「changeDate」イベントも発生するため、選択された日付データを取得するところでnull対策をしないといけないです。

■選択したらすぐ消滅
「autoclose:true」→私のやり方だと設定の必要がありません。勝手に「hide」メソッド呼んでるので。

■表示が左上になる
「container:表示位置の基準要素」→どちらかというとstylesheetの設定の問題。

で、html部を再掲

<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="日付選択" />
    <input type='hidden' id='container' />
  </tbody>
</table>
<div id='dpbody' style='position:absolute;left:200px'></div>

次にjavascript(一部)

$('#container').datepicker({
  language : 'ja',
  clearBtn : true,
  container : '#dpbody'
}).on('changeDate', function(){
    if(e.date){
        var d = e.date;
        $('#target_year').val( d.getFullYear() );
        $('#target_year').val( d.getMonth() + 1 );
        $('#target_year').val( d.getDate());
    }
    $(this).datepicker('hide')
});
$('#dp_pos1').on('click', function(){ $('#container').datepicker('show'); });

。。。さあ、これでどや。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/04/07 17:13

    すごいご回答を頂き有難うございます。
    ちょっと理解するのに時間がかかりそうですが・・・。(笑)
    あと今回の変更での問題点として、
    1ブラウザでポップアップ表示が左上になってしまう。
    2.オプションの追加(日本語化、設定後に自動クローズなど)
    var options = {
    language : "ja",
    clearBtn : true,
    autoclose:true
    }
    合わせて教えて頂ければと思います。
    宜しくお願いいたします。

    キャンセル

  • 2016/04/07 18:10

    追記3に書いときました。

    キャンセル

  • 2016/04/07 22:00

    有難うございます。日本語化のライブラリは読み込んでいます。
    クリアボタンは不要です。
    コピーしたのですが、動かなくなりました。
    そのままのコピーで良いんでしょうか?
    追記2に比べると軽量化されたような気がします。
    レベルが高すぎて・・・。
    宜しくお願いいたします。

    キャンセル

  • 2016/04/07 22:41

    html部分は追記3で。
    javascript部分は追記3、追記1の順で書けば大丈夫なはずです。
    が、「そのままのコピーで」←プログラマがヒントをやり取りするためのサイトであって、無料で開発してもらうところじゃないんで。

    キャンセル

  • 2016/04/07 22:59

    返答有難うございます。ご指摘の点は理解しています。申し訳ございません。ちょっとやってみます。

    キャンセル

  • 2016/04/07 23:10 編集

    どうしてもあかんようだったら修正後のhtml、javascript部分を質問に追記して下さい。

    キャンセル

  • 2016/04/08 11:03

    昨日は失礼いたしました。
    いろいろ考えながらやってみましたが、うまくいかない状況です。
    質問欄に追記しました。
    本当に申し訳ございませんが、ご教授頂きたくお願いいたします。

    キャンセル

  • 2016/04/08 11:16 編集

    質問者追記より、コピペ元の私の書いたスクリプトに誤記があったので修正しました。(追記3:「language:ja,」→「lanuage:'ja',」、jQueryのvalに対するドット落ち)

    キャンセル

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

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

関連した質問

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

  • jQuery

    6926questions

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

  • Bootstrap

    1008questions

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