javascript - JQuery Daterangepicker onchange event - Stack Overflow

admin管理员组

文章数量:1353618

All the answers I could find are for Datepicker and it doesn't work the same!

It only fires an onChange() event if I modify the value with the keyboard and not the bootstrap interface.

I've tested everything showed here

My code:

JAVASCRIPT

            $(function () {
                //Date range picker
                $('#reservation').daterangepicker({
                    onSelect: function() {
                        $(this).change();
                    }                    
                });
            });

            $(document).ready(function () {
                $("#reservation").change(function () {
                    var date = $("#reservation").val();
                    var replaced = date.split(' ').join('')
                    $("#partialtable").load('@(Url.Action("GetDateResults", "Temps", null, Request.Url.Scheme))?date=' + replaced);
                });
            });

HTML

<!-- Date range -->
            <div class="form-group">
                <label>Période:</label>
                <div class="input-group">
                    <div class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </div>
                    <input type="text" class="form-control pull-right" id="reservation" onchange=""/>
                </div><!-- /.input group -->
            </div><!-- /.form group --> 

Anyone can find a solution please? I don't mind to trigger the event even if the change is the same value as before!

All the answers I could find are for Datepicker and it doesn't work the same!

It only fires an onChange() event if I modify the value with the keyboard and not the bootstrap interface.

I've tested everything showed here

My code:

JAVASCRIPT

            $(function () {
                //Date range picker
                $('#reservation').daterangepicker({
                    onSelect: function() {
                        $(this).change();
                    }                    
                });
            });

            $(document).ready(function () {
                $("#reservation").change(function () {
                    var date = $("#reservation").val();
                    var replaced = date.split(' ').join('')
                    $("#partialtable").load('@(Url.Action("GetDateResults", "Temps", null, Request.Url.Scheme))?date=' + replaced);
                });
            });

HTML

<!-- Date range -->
            <div class="form-group">
                <label>Période:</label>
                <div class="input-group">
                    <div class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </div>
                    <input type="text" class="form-control pull-right" id="reservation" onchange=""/>
                </div><!-- /.input group -->
            </div><!-- /.form group --> 

Anyone can find a solution please? I don't mind to trigger the event even if the change is the same value as before!

• javascript
• jquery
• html
• date
• date-range

Share Improve this question Follow asked Jun 14, 2017 at 19:33 J. LavoieJ. Lavoie 33433 gold badges55 silver badges2424 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You can try with this:

<script type="text/javascript">
   $(function() {
      $('#reservation').daterangepicker({
         //singleDatePicker: true,
         //showDropdowns: true
      }, 
     function() {
        var date = $("#reservation").val();
        var replaced = date.split(' ').join('')
        $("#partialtable").load('@(Url.Action("GetDateResults", "Temps", null, Request.Url.Scheme))?date=' + replaced);
    });
  });
</script>

I hope it will work for you!!

<script type="text/javascript">
   $(function() {
      $('#reservation').daterangepicker({
         //singleDatePicker: true,
         //showDropdowns: true
      }, 
     function() {
        let date = $(".drp-selected").text()
        console.log(date)
    });
  });
</script>

本文标签： javascriptJQuery Daterangepicker onchange eventStack Overflow