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

Question

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')
    });
});

Answer 1

質問者ソース）

$('#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 );

Comments

[hidepon]

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

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

[hidepon]

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

[tkturbo]

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

[hidepon]

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

[tkturbo]

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

[hidepon]

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

Answer 2

ちょっち力技ですが。

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'));

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

$(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'));
});

■追記３

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'); });

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

Comments

[hidepon]

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

[tkturbo]

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

[hidepon]

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

[tkturbo]

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

[hidepon]

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

[tkturbo]

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

[hidepon]

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

[tkturbo]

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

Answer 3

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>

Comments

[hidepon]

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

[kei344]

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

[hidepon]

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

[kei344]

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