mdehoog / Semantic-UI-Calendar

Calendar module for Semantic UI
MIT License
805 stars 127 forks source link

Container (date) value not refreshed upon value change... #80

Open VipSaran opened 7 years ago

VipSaran commented 7 years ago

...but only when the widget is opened and then closed.

My initialzation:

$('#daypicker').calendar({
    type: 'date',
    firstDayOfWeek: 1,
    constantHeight: false,
    disableYear: true,
    disableMonth: true,
    disableMinute: true,
    minDate: new Date(getStartDate()),
    maxDate: new Date(getEndDate()),
    popupOptions: {
      position: 'bottom center',
    },
    formatter: {
      date: function(date, settings) {
        return settings.text.monthsShort[date.getMonth()] + ' ' + date.getDate() + ', ' + date.getFullYear();
      }
    },
    onChange: function(date, text, mode) {
      console.log('change to date:', text);
      var strDate = formatDateToString(date);
      currentDayTileSources = getTileSourcesForDate(strDate);
      viewer.close().open(currentDayTileSources);
      if (forcedInitial) {
        forcedInitial = false;
        viewer.goToPage(currentDayTileSources.length - 1);
      }

      toggleDayButtons(strDate);
    },
    isDisabled: function(date, mode) {
      return !_.includes(singleDays, formatDateToString(date));
    }
  });

  $('#daypicker').calendar('set date', new Date(getEndDate()));

I've seen that the closing of the widget actually calls this function that gets the job done:

inputBlur: function () {
  $container.removeClass(className.active);
  if (settings.formatInput) {
    var date = module.get.date();
    var text = formatter.datetime(date, settings);
    $input.val(text);
  }
}

so, to fix (my) issue, it's enough to also format and update the $input after the refresh (as the create module somehow doesn't do it):

refresh: function () {
  module.create.calendar();
  var date = module.get.date();
  var text = formatter.datetime(date, settings);
  $input.val(text);
},

Sounds sensible?