3

以下を使っています。
http://www.daterangepicker.com/

同ページ内に日付入力欄が複数あるため(動的にいくつでも作成されます)、セレクタは $('.daterange') といった形でクラス指定しています。

日付入力欄それぞれにつき値の表示を変更する処理をcallback関数で行いたいのですが、callback関数内では this が使えず、以下のコードでは値が変更されません。
どのように改善すれば、値を変更した欄のみ値の表示を変更できるようになりますでしょうか。
ご教授いただければ幸いです。

  function cb(start, end) {
      console.log(start.unix());
      if(start.unix()==moment.utc(0).unix()){
          $(this).val("ALL"); //<-thisが使えないため動かない
          //$(".daterange span").html("ALL"); <-全ての値が変わってしまう
      }else{
          $(this).val(start.format('YYYY-MM-DD hh:mm Z') + ' - ' + end.format('YYYY-MM-DD hh:mm Z'));
      }
  }

  $('.daterange').daterangepicker({
      timePicker: true,
      autoUpdateInput: false
  }, cb);
2
  • autoUpdateInput: false下の波カッコ閉じはtypoですよね??
    – yuichi555
    2016年8月8日 8:44
  • typoでした、失礼致しました。ご指摘ありがとうございます。
    – grape
    2016年8月8日 8:57

1 件の回答 1

1

daterangepickerを使うのは初めてですが、ちょとスニペット作ってみました。
試してみたところ、callback内でthis.elementが使えそうです。

function callback(start, end) {
  // this.element === 変更対象のDOM
  console.log($(this.element).attr('name'));
  console.log($(this.element).val());
}

$('.daterange').daterangepicker({
  timePicker: true,
  autoUpdateInput: false
}, callback);
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />
 
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />


<input type="text" name="range1" class="daterange" value="01/01/2015 - 01/31/2015" />

<input type="text" name="range2" class="daterange" value="01/01/2015 - 01/31/2015" />

3
  • $(this.element) で取得できました!本当にありがとうございます。
    – grape
    2016年8月8日 9:06
  • よく見たら題名でもtypoしておりました、拙い質問にも関わらず素早くご回答くださり、ありがとうございました。
    – grape
    2016年8月8日 9:12
  • 解決の兆しが見えたようで何よりです!!
    – yuichi555
    2016年8月8日 9:15

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。