Open calendar on minDate if minDate is in future

[freyjameetsmel]

Hey there,

In our project we have the following use case: We have a form where the user can enter some information that can have a time-limited validity. We accomplish this with a datepicker in each row (of information) that sets the valid from date. If the user decides to add a new row of information the datepicker in the this row has a minDate set. The minDate depends on the previous selected valid from date. This works quite well but when the calendar opens and the minDate is in the future the calendar stays in the current month. This is somehow confusing for the user.

I tried to fix this behavior with setting the defaultDate/setDefaultDate combination. But we don't want a pre-selected date.

Do you know if it is possible to update the calendar view to the minDate set in the future without setting the defaultDate?

We are currently working with the following configuration in ember:

• ember-cli: 2.18.0
• ember-pikaday: 2.2.4

Thx, Mel

[alexlafroscia]

I see... so what you're saying is, in a case where a selected date is not provided but a minimum date is, that minimum date's month should be the one that's visible when opening the picker?

I'd agree with that assessment, but it sounds to me like Pikaday behavior, not something specific to the wrapper addon.

[freyjameetsmel]

@alexlafroscia exactly, but this should only happen if the minimum date is in the future. 😊
Ah, okay, I thought it might be some adjustment in this wrapper addon I didn't think of. But in that case I'll check it on the Pikaday project. 😅

[freyjameetsmel]

I think I found a solution for our usecase. :dancer:

I tested something with the onOpen closure action, but this did not work well. So I ended up with extending the pikaday-input component:

import Ember from 'ember';
import moment from 'moment';
import Pikaday from 'ember-pikaday/components/pikaday-input';

export default Pikaday.extend({
  onPikadayOpen() {
    // checks if a minDate is set and if this minDate is in the future
    // if so the calendar will open on the minDate month/year
    let minDate = this.get('minDate');
    if (!Ember.isEmpty(minDate) && moment(minDate).isAfter(moment())) {
      let minYear = moment(minDate).get('year');
      let minMonth = moment(minDate).get('month');
      this.get('pikaday').gotoDate(new Date(minYear, minMonth));
    }
    // after that call the default behavior
    this._super(...arguments);
  }
});

Maybe we could think about adding this to the project.