CODEWITHSUNDEEP
javascriptjqueryhtmldatedate-range
J. Lavoie
J. Lavoie

Reputation: 334

JQuery Daterangepicker onchange event

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!

Upvotes: 0

Views: 22010

Answers (2)

Alauddin Afif Cassandra
Alauddin Afif Cassandra

Reputation: 578

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

Upvotes: 0

Jay Kareliya
Jay Kareliya

Reputation: 770

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

Upvotes: 5

Related Questions