How use ajax post when datepicker change date?

Question

Good afternoon

Value in input change with datepicker ui.

I want use ajax post when value in input will be change.

For this i use script:

<input type="text" name="date" class="datepicker" id="datepicker">

$(".datepicker").datepicker({changeYear: true});

$(".datepicker").on("change",function(){
var date=$(this).val();
$.post("test.php", {
date:date
},
function(data){$('#testdiv').html('');$('#testdiv').html(data);
});
});

But ajax post query is executed with the old date.

Datepicker does not have time change value in input.

Tell me how to do query after datepicker change the date in the field?

Me need:

1) datepicker change the date;

2) query should be send with new date.

Solution 1

You can trigger ajax post on datepicker events:

$("#datepicker").datepicker({

    onSelect: function(date, instance) {

        $.ajax
        ({
              type: "Post",
              url: "www.example.com",
              data: "date="+date,
              success: function(result)
              {
                  //do something
              }
         });  
     }
});

Hope this helps- @Codebrain

Solution 2

Maybe you should consider using onSelect event of the datepicker (see here).

Using that event, the newly selected date (as string) is passed as the first parameter.

Solution 3

You can use changeDate

$('.datepicker').datepicker()
 .on('changeDate', function(e) {
    // `e` here contains the extra attributes
});

you can check here : http://bootstrap-datepicker.readthedocs.io/en/latest/events.html

Solution 4

Instead of using on(change you have onSelect for datepicker, which will fire when the date is changed.

$(function(){
    $('.datepicker').datepicker({
        onSelect:function(dateText,instance){
            alert(dateText); //Latest selected date will give the alert.
            $.post("test.php", {
            date:dateText // now you will get the selected date to `date` in your post
            },
            function(data){$('#testdiv').html('');$('#testdiv').html(data);
            });
        }
    });
});

Hope it helps.

View more solutions