chore(datetime): remove displayFormat and displayTimezone properties

BREAKING.md

@@ -37,13 +37,39 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 
 The `ion-datetime` component has undergone a complete rewrite and uses a new calendar style. As a result, some of the properties no longer apply and have been removed.
 
+- The `displayFormat` and `displayTimezone` properties have been removed since `ion-datetime` now displays inline with a calendar picker. To parse the UTC string provided in the payload of the `ionChange` event, we recommend using a 3rd-party date library like [date-fns](https://date-fns.org/). Here is an example of how you can take the UTC string from `ion-datetime` and format it to whatever style you prefer:
+
+```typescript
+import { format, parseISO } from 'date-fns';
+
+/**
+ * This is provided in the event
+ * payload from the `ionChange` event.
+ */
+const dateFromIonDatetime = '2021-06-04T14:23:00-04:00';
+const formattedString = format(parseISO(dateFromIonDatetime), 'MMM d, yyyy');
+
+console.log(formattedString); // Jun 4, 2021
+```
+
 - The `pickerOptions` and `pickerFormat` properties have been removed since `ion-datetime` now uses a calendar style rather than a wheel picker style.
 
-- The `monthNames`, `monthShortNames`, `dayNames`, and `dayShortNames` properties have been removed. `ion-datetime` can now automatically format these values according to your devices locale thanks to the [Intl.DateTimeFormat API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). To set a specific locale, use the new `locale` property.
+- The `monthNames`, `monthShortNames`, `dayNames`, and `dayShortNames` properties have been removed. `ion-datetime` can now automatically format these values according to your devices locale thanks to the [Intl.DateTimeFormat API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). If you wish to force a specific locale, you can use the new `locale` property:
+
+```html
+<ion-datetime locale="fr-FR"></ion-datetime>
+```
 
 - `ion-datetime` now displays the calendar inline by default, allowing for more flexibility in presentation. As a result, the `placeholder` property has been removed. Additionally, the `text` and `placeholder` Shadow Parts have been removed.
 
-- The `open` method has been removed. To present the datetime in an overlay, you can pass it into an `ion-modal` or `ion-popover` component and call the `present` method on the overlay instance. Alternatively, you can use the `trigger` property on `ion-modal` or `ion-popover` to present the overlay on a button click.
+- The `open` method has been removed. To present the datetime in an overlay, you can pass it into an `ion-modal` or `ion-popover` component and call the `present` method on the overlay instance. Alternatively, you can use the `trigger` property on `ion-modal` or `ion-popover` to present the overlay on a button click:
+
+```html
+<ion-button id="open-modal">Open Datetime Modal</ion-button>
+<ion-modal trigger="open-modal">
+  <ion-datetime></ion-datetime>
+</ion-modal>
+```
 
 #### Header
 

angular/src/directives/proxies.ts

@@ -217,8 +217,8 @@ export class IonContent {
 }
 export declare interface IonDatetime extends Components.IonDatetime {
 }
-@ProxyCmp({ inputs: ["cancelText", "color", "dayValues", "disabled", "displayFormat", "displayTimezone", "doneText", "hourValues", "locale", "max", "min", "minuteValues", "mode", "monthValues", "name", "presentation", "readonly", "showDefaultButtons", "showDefaultTitle", "value", "yearValues"], "methods": ["open", "dismiss"] })
-@Component({ selector: "ion-datetime", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["cancelText", "color", "dayValues", "disabled", "displayFormat", "displayTimezone", "doneText", "hourValues", "locale", "max", "min", "minuteValues", "mode", "monthValues", "name", "presentation", "readonly", "showDefaultButtons", "showDefaultTitle", "value", "yearValues"] })
+@ProxyCmp({ inputs: ["cancelText", "color", "dayValues", "disabled", "doneText", "hourValues", "locale", "max", "min", "minuteValues", "mode", "monthValues", "name", "presentation", "readonly", "showDefaultButtons", "showDefaultTitle", "value", "yearValues"], "methods": ["confirm", "reset", "cancel"] })
+@Component({ selector: "ion-datetime", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["cancelText", "color", "dayValues", "disabled", "doneText", "hourValues", "locale", "max", "min", "minuteValues", "mode", "monthValues", "name", "presentation", "readonly", "showDefaultButtons", "showDefaultTitle", "value", "yearValues"] })
 export class IonDatetime {
   ionCancel!: EventEmitter<CustomEvent>;
   ionChange!: EventEmitter<CustomEvent>;

core/api.txt

@@ -339,8 +339,6 @@ ion-datetime,prop,cancelText,string,'Cancel',false,false
 ion-datetime,prop,color,string | undefined,'primary',false,false
 ion-datetime,prop,dayValues,number | number[] | string | undefined,undefined,false,false
 ion-datetime,prop,disabled,boolean,false,false,false
-ion-datetime,prop,displayFormat,string,'MMM D, YYYY',false,false
-ion-datetime,prop,displayTimezone,string | undefined,undefined,false,false
 ion-datetime,prop,doneText,string,'Done',false,false
 ion-datetime,prop,hourValues,number | number[] | string | undefined,undefined,false,false
 ion-datetime,prop,locale,string,'default',false,false
@@ -356,8 +354,9 @@ ion-datetime,prop,showDefaultButtons,boolean,false,false,false
 ion-datetime,prop,showDefaultTitle,boolean,false,false,false
 ion-datetime,prop,value,null | string | undefined,undefined,false,false
 ion-datetime,prop,yearValues,number | number[] | string | undefined,undefined,false,false
-ion-datetime,method,dismiss,dismiss() => Promise<void>
-ion-datetime,method,open,open() => Promise<void>
+ion-datetime,method,cancel,cancel(closeOverlay?: boolean) => Promise<void>
+ion-datetime,method,confirm,confirm(closeOverlay?: boolean) => Promise<void>
+ion-datetime,method,reset,reset(value?: string | undefined) => Promise<void>
 ion-datetime,event,ionBlur,void,true
 ion-datetime,event,ionCancel,void,true
 ion-datetime,event,ionChange,DatetimeChangeEventDetail,true

core/src/components.d.ts

@@ -647,14 +647,6 @@ export namespace Components {
           * If `true`, the user cannot interact with the datetime.
          */
         "disabled": boolean;
-        /**
-          * The format of the date and time that is returned in the event payload of `ionChange`. You can configure the timezone used with the `displayTimezone` property. Defaults to `MMM D, YYYY`.
-         */
-        "displayFormat": string;
-        /**
-          * The timezone to use for display purposes only. See [Date.prototype.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) for a list of supported timezones. If no value is provided, the component will default to displaying times in the user's local timezone.
-         */
-        "displayTimezone"?: string;
         /**
           * The text to display on the picker's "Done" button.
          */
@@ -4080,14 +4072,6 @@ declare namespace LocalJSX {
           * If `true`, the user cannot interact with the datetime.
          */
         "disabled"?: boolean;
-        /**
-          * The format of the date and time that is returned in the event payload of `ionChange`. You can configure the timezone used with the `displayTimezone` property. Defaults to `MMM D, YYYY`.
-         */
-        "displayFormat"?: string;
-        /**
-          * The timezone to use for display purposes only. See [Date.prototype.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) for a list of supported timezones. If no value is provided, the component will default to displaying times in the user's local timezone.
-         */
-        "displayTimezone"?: string;
         /**
           * The text to display on the picker's "Done" button.
          */

core/src/components/datetime/datetime.tsx

@@ -11,8 +11,7 @@ import {
   getCalendarYears,
   getDaysOfMonth,
   getDaysOfWeek,
-  getPickerMonths,
-  getTimezoneOffset
+  getPickerMonths
 } from './utils/data';
 import {
   addTimePadding,
@@ -164,22 +163,6 @@ export class Datetime implements ComponentInterface {
    */
   @Prop() presentation: 'date-time' | 'time-date' | 'date' | 'time' = 'date-time';
 
-  /**
-   * The format of the date and time that is returned in the
-   * event payload of `ionChange`. You can configure
-   * the timezone used with the `displayTimezone` property.
-   * Defaults to `MMM D, YYYY`.
-   */
-  @Prop() displayFormat = 'MMM D, YYYY';
-
-  /**
-   * The timezone to use for display purposes only. See
-   * [Date.prototype.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString)
-   * for a list of supported timezones. If no value is provided, the
-   * component will default to displaying times in the user's local timezone.
-   */
-  @Prop() displayTimezone?: string;
-
   /**
    * The text to display on the picker's cancel button.
    */
@@ -321,11 +304,7 @@ export class Datetime implements ComponentInterface {
      * there can be 1 hr difference when dealing w/ DST
      */
     const date = new Date(convertDataToISO(this.workingParts));
-
-    // If a custom display timezone is provided, use that tzOffset value instead
-    this.workingParts.tzOffset = (this.displayTimezone !== undefined && this.displayTimezone.length > 0)
-      ? ((getTimezoneOffset(date, this.displayTimezone)) / 1000 / 60) * -1
-      : date.getTimezoneOffset() * -1;
+    this.workingParts.tzOffset = date.getTimezoneOffset() * -1;
 
     this.value = convertDataToISO(this.workingParts);