capacitor-community / date-picker

Native DateTime Picker Plugin for Capacitor Apps
MIT License
88 stars 29 forks source link

Min and max not working #19

Closed gentlemanjohn closed 3 years ago

gentlemanjohn commented 3 years ago

Describe the bug Min and max are not recognized. Using static min and max dates, the picker allows the selection of dates before the min and does not allow the selection of dates before the max. When the min and max are set dynamically, the picker breaks and only allows the selection of a single, arbitrary date in the past. Oddly when that date is selected, a year is added to it.

To Reproduce Steps to reproduce the behavior:

In my example I have two ion-item buttons with a click handler that launches the picker. One sets the arrival date, the other sets the departure date. In the dynamic dates example (what I'm really aiming for), after the arrival date is set, the departure min is set to one day after the arrival date and the departure max is set to 30 days after the arrival date.

Template: <ion-item button (click)="datePicker('arrival')">Arrival</ion-item> <ion-item button (click)="datePicker('departure')">Departure</ion-item>

Angular Component:

with static dates:

datePicker(point) {
  DatePicker
      .present({
        mode: "date",
        date: this.stopForm.get(point).value,
        format: 'YYYY-MM-dd',
        min: '2020-01-01',
        max: '2021-05-21'
      })
      .then((date) => {
        alert(date.value);
        this.stopForm.get(point).setValue(date.value);
        this.stopForm.get(point).markAsDirty();
      });
}

with dynamic dates:

datePicker(point) {
  DatePicker
      .present({
        mode: "date",
        date: this.stopForm.get(point).value,
        format: 'YYYY-MM-dd',
        min: min,
        max: max
      })
      .then((date) => {
        alert(date.value);
        this.stopForm.get(point).setValue(date.value);
        this.stopForm.get(point).markAsDirty();
      });
}

I use the date picker to select an arrival date of October 4, 2020. My code seems to be setting the appropriate mins and maxes. However, when I go to select the departure date, the date picker defaults to December 29, 2019 (see screenshot) and I am not able to select any other date. When I confirm, the date value is actually December 29, 2020 (see screenshot).

Expected behavior I expect the date picker to:

  1. Allow all dates within the allowed range to be selectable
  2. Make it impossible to select a date outside of the allowed range
  3. Default to the min value if today's date is not within the allowed range

Screenshots 1 2 3

Smartphone (please complete the following information):

danielprrazevedo commented 3 years ago

@gentlemanjohn First of all, sorry about that, we need to improve the documentation a little bit in this regard. Your date format is not correct, try to follow this pattern to set your calendar format format: 'yyyy-MM-dd',

As for the app crash when sending dates dynamically, try to use the latest version of the plugin, improvements have been made recently and remember to format the dates, the plugin works with strings, so if the date format is set to 'yyyy-MM-dd', the dynamic date must be delivered in a string format exported in this way

gentlemanjohn commented 3 years ago

Ah OK, format: yyyy-MM-dd fixed it for me. FYI I was using the latest version of date-picker, 0.2.1. Typo on my part.

Just a heads up for anyone else that is using moment.js (2.29.0), the formatting is a little different: YYYY-MM-DD matches date-picker's yyyy-MM-dd