Hard Fitness
Hard Fitness

Reputation: 452

Bootstrap Datepicker on change firing 3 times

Hi I have been trying to just get the date of a bootstrap date picker and have been able to but it seems to fires 3 times. NOTE: This is not jquery date picker but bootstrap date picker.

Using this date picker: https://github.com/eternicode/bootstrap-datepicker, not older eyecon.ro one.

 $(".date-picker").on("change", function(e) {
      contents = $(this).val();
      id = $(this).attr('id');
      console.log("onchange contents: " + contents);
      console.log("onchange id: " + id);

 });

HTML:

<input id="start_date" type="text" data-date-format="yyyy-mm-dd" class="date-picker form-control" />

I have used a few other options other than change, like

$('.date-picker').datepicker().change(function(){};

But this does not close date picker, hoping there is an easy solution to this. thx

Upvotes: 21

Views: 29163

Answers (13)

Prashant Odhavani
Prashant Odhavani

Reputation: 385

I have faced the same problem with bootstrap-datepicker when it used with the jQuery OnChange event they call function 3 times. Here is my code

@Html.TextBoxFor(x => x.CmpStartDate, "{0:dd-MMM-yyyy}", new { @size = "30", @class = "form-control search-date", @placeholder = "Start date" })

@Html.TextBoxFor(x => x.CmpEndDate, "{0:dd-MMM-yyyy}", new { @size = "30", @class = "form-control search-date", @placeholder = "End date" })  


<script>
$('#CmpStartDate,#CmpEndDate').datepicker({
      autoclose: true,
      todayHighlight: true,
      minViewMode: 3,
      format: "dd-M-yyyy"
});

$(".search-date").on("change", function () {
     cmpStartDate = $("#CmpStartDate").val();
     cmpEndDate = $("#CmpEndDate").val();
     SearchThisDateRecords(cmpStartDate,cmpEndDate);
});

function SearchThisDateRecords(cmpStartDate,cmpEndDate) {
console.log("Call search method");
}
</script>

We need to call this function only one time, Not multiple time so you can use the below logic to fix this problem

<script>
    $('#CmpStartDate,#CmpEndDate').datepicker({
          autoclose: true,
          todayHighlight: true,
          minViewMode: 3,
          format: "dd-M-yyyy"
    });

    var i = 0;

    $(".search-date").on("change", function () {
         cmpStartDate = $("#CmpStartDate").val();
         cmpEndDate = $("#CmpEndDate").val();
         SearchThisDateRecords(cmpStartDate,cmpEndDate);

         i++;
         console.log(i);
         if (i == 3) {
             SearchThisDateRecords(cmpStartDate,cmpEndDate);
         }
    });
    function SearchThisDateRecords(cmpStartDate,cmpEndDate) {
         i =0; //Reset i value
         console.log("Call search method");
    }
</script>

Upvotes: 1

user12078979
user12078979

Reputation: 1

var LastController =['id','value']; //global variable...
 function datepeakerchange(e){ 

 if ((LastController[0] != e.target.id && LastController[1] != e.target.value) || (LastController[0] == e.target.id && LastController[1] != e.target.value)) {

            LastController[0] = e.target.id;
            LastController[1] = e.target.value;


    write your code....


    }
}

Upvotes: 0

Neeraj Rawat
Neeraj Rawat

Reputation: 21

Please use changeDate function in place of change .

Upvotes: 0

Hictus
Hictus

Reputation: 220

I tried the answer from #pgee70 and it doesn't work for me. So this is my solution, hope its help

var send=true;

 $('.input-group.date').datepicker({
     todayBtn: "linked",
     keyboardNavigation: false,
     forceParse: false,
     language: 'es-ES',
     weekStart: 1,
     format: 'dd/mm/yyyy',
     enableOnReadonly:false,
     calendarWeeks: true,
     autoclose: true,
     todayHighlight:true
 }).on("changeDate", function(e) {
     if(send){
        modificarFechaAplicacionCliente($("#input_filtro_fecha_cliente").val());
        send=false;
     }

     setTimeout(function(){send=true;},200);
 });

It´s not a beaty solution, but it´s work.

Upvotes: 2

sudeetha nuwan
sudeetha nuwan

Reputation: 1

var pickerFireCount = 0;

function checkSelectedDateIsHollyday(rId) {
  pickerFireCount++;
  if (pickerFireCount == 3) {
    if (!selectedDateIsHolyday(rId)) {
      showInfoMessage('The date you selected is a holiday.');
      pickerFireCount = 0;
    }
  }
}

Upvotes: -1

Juan Mart&#237;nez
Juan Mart&#237;nez

Reputation: 51

As some has mentioned already, use this:

$('#calendar').on("changeDate", function() {

});

The trick is to use changeDate instead of change.

Upvotes: 4

It is fixed find your fixed js datepicker file HERE

Read fixing description HERE

Upvotes: 1

Noviana Alvi
Noviana Alvi

Reputation: 1

bit annoying.. my code was:

var c=0;var send=false;
    $(document).ready(function() {
        jQuery( ".ed" ).datepicker({ 
            format: "yyyy-mm-dd",
            autoclose:!0
        }).on('change',function() {
            if(c==2){
                c=0;
                send=true;
            }else{
                c++;
                send=false;
            }                
        });

    });

Upvotes: 0

Riveascore
Riveascore

Reputation: 1852

It seems as if when checking the change event, if the change was from actual user interaction, the change event contains a value for originalEvent.

The event does NOT contain this value if the input was changed via JS: $obj.val('1990-03-07').change() and the same with bootstrap-datepicker

Here's how I set it up:

Generic initial setup

// General selector for date inputs
var $obj = $('input[type="date"]');

$obj.datepicker({
    // options here, not important for this example
});

Handle bootstrap-datepicker specific changes

$obj.datepicker().on('changeDate', function (event) {
    handleInputDateAndTimeChange(event);
});

Now, deal with user interaction changes

$('input[type="date"], input[type="time"]').change(function (event) {
    // This checks if change was initiated by user input and NOT JS
    if(event.originalEvent !== undefined) {
        handleInputDateAndTimeChange(event);
    }
});

And finally, here's the handleInputDateAndTimeChange function

function handleInputDateAndTimeChange(event) {
    var $input = $(event.target);

    // Do what you want with $input object here...
}

Upvotes: 2

user1315637
user1315637

Reputation:

Similar to the above answer, but you should use datepicker unless you've renamed the function:

var datePicker = $('.date-picker').datepicker().on('changeDate', function(ev) {
    //Functionality to be called whenever the date is changed
});

This works for me, except in my case, I renamed the function to datepickerBootstrap to avoid the clash with JQuery's. So then it would become:

var datePicker = $('.date-picker').datepickerBootstrap().on('changeDate', function(ev) {
    // On change functionality
});

Upvotes: 1

ABIRAMAN
ABIRAMAN

Reputation: 969

Get global variable count and check if equal to 0 then execute Your function.

var count=0;
     $( "#Id" ).datepicker({ minDate: 0}).on('change',function (){
            if(count==0) 
           validity();//any function
           count=1;
         });
     validity(){ count=0;}

Upvotes: 0

pgee70
pgee70

Reputation: 4014

it does not fix the problem, but i was using the datepicker to send through an ajax post, so the 3 change events was causing me problems - the 3rd event always failed. even if the documentation says to use a changeDate event, it doesn't seem right to me to fire the input tag's change event 3 times. the value isn't changing 3 times!

I wrote a simple 'debounce' function to get around the problem. doesn't fix the issue - which is due to multiple change events being fired from the methods: setValue (line 508) _setDate:(line 1048) and setValue (line 508) (version 1.3.0) of the widget.

 var lastJQueryTS = 0 ;// this is a global variable.
 ....
 // in the change event handler...
    var send = true;
if (typeof(event) == 'object'){
    if (event.timeStamp - lastJQueryTS < 300){
        send = false;
    }
    lastJQueryTS = event.timeStamp;
}
if (send){
    post_values(this);
}

it is pretty simple, just finds the jquery 'event', and makes sure that values in a window of 300ms are ignored. in my testing this all happened in 30 msec or so.

Upvotes: 11

seeARMS
seeARMS

Reputation: 1690

You should be using the "changeDate" event. For example:

var datePicker = $('.date-picker').datePicker().on('changeDate', function(ev) {
    //Functionality to be called whenever the date is changed
});

Please view the documentation here for more info on this event.

Upvotes: 39

Related Questions