28126


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

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

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

[code]

      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);
    
[/code]


CC BY-SA 3.0
2016-08-08T08:11:37.997
28125
2016-08-08T18:22:31.450
2016-08-08T18:22:31.450
18411
18411
question
javascript jquery
daterangepicker が複数ある場合の個別処理の方法


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

[code]

    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);
[/code]

[code]

    <!-- 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" />
[/code]


CC BY-SA 3.0
2016-08-08T08:41:13.747
28126
2016-08-08T08:41:13.747
12256
28125
answer