Ability to select an initial date/month in the Datepicker default view

[evilstiefel]

Is your feature request related to a problem? Please describe. I'd like the ability to select an initial view for the Datepicker (in my case, a different month than today's) when opening/toggling it and no date is selected

Describe the solution you'd like I'd like a new property for the bsConfig, e.g. 'initialViewDate' for which I can supply a date, so that when the user toggles the calendar picker, that month is visible (so e.g. instead of opening the current month by default, I can open next month's view)

Describe alternatives you've considered I know there already is a config to set an initial value, but that's undesirable, because I want the user to be presented with a blank and invalid form field. Preselecting a date may make the user miss the required form field.

[e93rtP]

+1

[simon-knu]

+1, would be great

[jrivals]

+1

[akupiec]

+1 Also termopary workaround:

@ViewChild(BsDatepickerInlineDirective)
bsDatepickerInlineDirective!: BsDatepickerInlineDirective;

ngAfterContentInit(): void {
    setTimeout(() => {
      // @ts-ignore
      const datepicker = this.bsDatepickerInlineDirective._datepickerRef.instance;
      datepicker.navigateTo({ direction: 'UP' as any, step: { month: 1 } });
    }, 1); //timeout is needed due to _datepickerRef not being defined yet :[
  }

[maxhaice2]

@valorkin Hi, I have a case where users have 2 calendars to pick 2 dates. They can pick them from the past. For ex. 2 date picker from&to, then from was chosen from the past and i need to show this month as active for 'to' date picker, and not show date in calendar because it doesn't have it, but i am unable to do it in straight way because of this condition isAfter(minDate, _date, 'day'). I found viewDate calculation.

/**
 * if view date is provided (bsValue|ngModel) it should be shown
 * if view date is not provider:
 * if minDate>currentDate (default view value), show minDate
 * if maxDate<currentDate(default view value) show maxDate
 */
function getViewDate(viewDate: Date | Date[], minDate: Date, maxDate: Date) {
  const _date = Array.isArray(viewDate) ? viewDate[0] : viewDate;

  if (minDate && isAfter(minDate, _date, 'day')) {
    return minDate;
  }

  if (maxDate && isBefore(maxDate, _date, 'day')) {
    return maxDate;
  }

  return _date;
}

We need to have a way of overriding that.

Solution that I have is for bsDatepickerInlineDirective:

            setTimeout(() => {
                const currentDate = new Date();
                const monthsApart = (currentDate.getFullYear() - this.getMinDate().getFullYear()) * 12 + (currentDate.getMonth() - this.getMinDate().getMonth());
                // @ts-ignore
                this.bsDatepickerInlineDirective._picker._datepickerRef.instance.navigateTo({step: {month: -monthsApart}});
                this._isActiveDateChanged = true;
            });

[maxhaice2]

The only way is to create the pull request and ask guys to vote for it :)