onChange fires before setting the date

[na7r1x]

Title pretty much sums it up. The onChange function is called before the changes are applied. Example: whenever the date is changed I'd like to do stuff with the value of that date. So, naturally, I'd do this in the onChange function, retrieving the date with $('#mycalendar').calendar('get date'). However, when I do this, I get null initially and the previous value on consecutive changes.

• first change

onChange: function() { console.log('change triggered'); console.log('current value ' + $('#endDate').val()); }

-result:

• second change

• result:

• however, in reality:

Is this behaviour intentional and if it is, why?! Why would I want to trigger an onChange function before I've done the changes? Or am I missing something obvious?

[onlyargon]

Can you provide a sample code?

[lubber-de]

As the calendar has been merged into Fomantic-UI, this issue is further discussed in https://github.com/fomantic/Fomantic-UI/issues/417

[lubber-de]

Fixed and prepared for Fomantic-UI 2.8.0 by https://github.com/fomantic/Fomantic-UI/pull/982

[jafidiesel]

A workaround for those who still use semantic could be this:

onChange: function(date, text, mode) where date it's the datetime selected. I know it's not the actual value from the input but it's the one that will be set there.

$("#rangestart_machinery").calendar({
    ampm: false,
    type: "date",
    maxDate: new Date(),
    formatter: {
      date: function(date, settings) {
        if (!date) return "";
          var momentDate = moment(date).format("YYYY/MM/DD").split("/");
          return momentDate[0] + "/" + momentDate[1] + "/" + momentDate[2];
        },
      cell: function(cell, date, cellOptions) {
        var dateCurrent = moment(date).format("YYYY-MM-DD");
        for (var i = datesCellsEnd.length - 1; i >= 0; i--) {
          if (datesCellsEnd[i] == dateCurrent) {
            $(cell).css("background-color","#f93b69");
            $(cell).css("color","white");
          }
        }  
      }
    },
    today: true,
    onChange: function(date, text, mode) {
      const dateFrom = moment(date).format('YYYY-MM-DD')
      const dateTo = moment($('#rangeend_machinery').calendar('get date')).format('YYYY-MM-DD')
      renderChartsPromMachinery(machine_id, dateFrom, dateTo);
    }