fix(datetime): events are now emitted, value property now respected

BREAKING.md

@@ -43,6 +43,8 @@ The `ion-datetime` component has undergone a complete rewrite and uses a new cal
 
 - `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.
+
 #### Header
 
 When using a collapsible large title, the last toolbar in the header with `collapse="condense"` no longer has a border. This does not affect the toolbar when the large title is collapsed.

core/src/components.d.ts

@@ -623,6 +623,10 @@ export namespace Components {
         "scrollY": boolean;
     }
     interface IonDatetime {
+        /**
+          * Emits the ionCancel event and optionally closes the popover or modal that the datetime was presented in.
+         */
+        "cancel": (closeOverlay?: boolean) => Promise<void>;
         /**
           * The text to display on the picker's cancel button.
          */
@@ -631,6 +635,10 @@ export namespace Components {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        /**
+          * Confirms the selected datetime value, updates the `value` property, and optionally closes the popover or modal that the datetime was presented in.
+         */
+        "confirm": (closeOverlay?: boolean) => Promise<void>;
         /**
           * Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month.
          */
@@ -639,10 +647,6 @@ export namespace Components {
           * If `true`, the user cannot interact with the datetime.
          */
         "disabled": boolean;
-        /**
-          * Dismisses the datetime overlay. Only applies when `presentationStyle="overlay"`.
-         */
-        "dismiss": () => Promise<void>;
         /**
           * 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`.
          */
@@ -687,10 +691,6 @@ export namespace Components {
           * The name of the control, which is submitted with the form data.
          */
         "name": string;
-        /**
-          * Opens the datetime overlay. Only applies when `presentationStyle="overlay"`.
-         */
-        "open": () => Promise<void>;
         /**
           * Which values you want to select. `'date'` will show a calendar picker to select the month, day, and year. `'time'` will show a time picker to select the hour, minute, and (optionally) AM/PM. `'date-time'` will show the date picker first and time picker second. `'time-date'` will show the time picker first and date picker second.
          */
@@ -699,6 +699,10 @@ export namespace Components {
           * If `true`, the datetime appears normal but is not interactive.
          */
         "readonly": boolean;
+        /**
+          * Resets the internal state of the datetime but does not update the value.
+         */
+        "reset": (value?: string | undefined) => Promise<void>;
         /**
           * If `true`, the default "Cancel" and "OK" buttons will be rendered at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
          */

core/src/components/datetime/datetime-interface.ts

@@ -14,4 +14,5 @@ export interface DatetimeParts {
   hour?: number;
   minute?: number;
   ampm?: 'am' | 'pm';
+  tzOffset?: number;
 }