javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 04:53:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(datetime-button): add button for displaying datetime in overlays (#25655)

Browse Source 
resolves #24316
This commit is contained in:
Liam DeBeasi
2022-07-27 09:47:02 -04:00
committed by GitHub
parent 52f0b22778
commit 499733105e
59 changed files with 1514 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
core/src/components.d.ts vendored
View File

@ -5,7 +5,7 @@
* It contains typing information for all components that exist in this project.
*/
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
import { AccordionGroupChangeEventDetail, ActionSheetAttributes, ActionSheetButton, AlertButton, AlertInput, AnimationBuilder, AutocompleteTypes, BreadcrumbCollapsedClickEventDetail, CheckboxChangeEventDetail, Color, ComponentProps, ComponentRef, DatetimeChangeEventDetail, DomRenderFn, FooterHeightFn, FrameworkDelegate, HeaderFn, HeaderHeightFn, InputChangeEventDetail, ItemHeightFn, ItemRenderFn, ItemReorderEventDetail, LoadingAttributes, MenuChangeEventDetail, ModalAttributes, ModalBreakpointChangeEventDetail, ModalHandleBehavior, NavComponent, NavComponentWithProps, NavOptions, OverlayEventDetail, PickerAttributes, PickerButton, PickerColumn, PopoverAttributes, PopoverSize, PositionAlign, PositionReference, PositionSide, RadioGroupChangeEventDetail, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue, RefresherEventDetail, RouteID, RouterDirection, RouterEventDetail, RouterOutletOptions, RouteWrite, ScrollBaseDetail, ScrollDetail, SearchbarChangeEventDetail, SegmentButtonLayout, SegmentChangeEventDetail, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, Side, SpinnerTypes, StyleEventDetail, SwipeGestureHandler, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout, TextareaChangeEventDetail, TextFieldTypes, ToastButton, ToggleChangeEventDetail, TransitionDoneFn, TransitionInstruction, TriggerAction, ViewController } from "./interface";
import { AccordionGroupChangeEventDetail, ActionSheetAttributes, ActionSheetButton, AlertButton, AlertInput, AnimationBuilder, AutocompleteTypes, BreadcrumbCollapsedClickEventDetail, CheckboxChangeEventDetail, Color, ComponentProps, ComponentRef, DatetimeChangeEventDetail, DatetimePresentation, DomRenderFn, FooterHeightFn, FrameworkDelegate, HeaderFn, HeaderHeightFn, InputChangeEventDetail, ItemHeightFn, ItemRenderFn, ItemReorderEventDetail, LoadingAttributes, MenuChangeEventDetail, ModalAttributes, ModalBreakpointChangeEventDetail, ModalHandleBehavior, NavComponent, NavComponentWithProps, NavOptions, OverlayEventDetail, PickerAttributes, PickerButton, PickerColumn, PopoverAttributes, PopoverSize, PositionAlign, PositionReference, PositionSide, RadioGroupChangeEventDetail, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue, RefresherEventDetail, RouteID, RouterDirection, RouterEventDetail, RouterOutletOptions, RouteWrite, ScrollBaseDetail, ScrollDetail, SearchbarChangeEventDetail, SegmentButtonLayout, SegmentChangeEventDetail, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, Side, SpinnerTypes, StyleEventDetail, SwipeGestureHandler, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout, TextareaChangeEventDetail, TextFieldTypes, ToastButton, ToggleChangeEventDetail, TransitionDoneFn, TransitionInstruction, TriggerAction, ViewController } from "./interface";
import { IonicSafeString } from "./utils/sanitization";
import { AlertAttributes } from "./components/alert/alert-interface";
import { CounterFormatter } from "./components/item/item-interface";
@ -800,7 +800,7 @@ export namespace Components {
/**
* 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.
*/
"presentation": 'date-time' | 'time-date' | 'date' | 'time' | 'month' | 'year' | 'month-year';
"presentation": DatetimePresentation;
/**
* If `true`, the datetime appears normal but is not interactive.
*/
@ -838,6 +838,24 @@ export namespace Components {
*/
"yearValues"?: number[] | number | string;
}
interface IonDatetimeButton {
/**
* 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;
/**
* The ID of the `ion-datetime` instance associated with the datetime button.
*/
"datetime"?: string;
/**
* If `true`, the user cannot interact with the button.
*/
"disabled": boolean;
/**
* The mode determines which platform styles to use.
*/
"mode"?: "ios" | "md";
}
interface IonFab {
/**
* If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.
@ -3413,6 +3431,12 @@ declare global {
prototype: HTMLIonDatetimeElement;
new (): HTMLIonDatetimeElement;
};
interface HTMLIonDatetimeButtonElement extends Components.IonDatetimeButton, HTMLStencilElement {
}
var HTMLIonDatetimeButtonElement: {
prototype: HTMLIonDatetimeButtonElement;
new (): HTMLIonDatetimeButtonElement;
};
interface HTMLIonFabElement extends Components.IonFab, HTMLStencilElement {
}
var HTMLIonFabElement: {
@ -3857,6 +3881,7 @@ declare global {
"ion-col": HTMLIonColElement;
"ion-content": HTMLIonContentElement;
"ion-datetime": HTMLIonDatetimeElement;
"ion-datetime-button": HTMLIonDatetimeButtonElement;
"ion-fab": HTMLIonFabElement;
"ion-fab-button": HTMLIonFabButtonElement;
"ion-fab-list": HTMLIonFabListElement;
@ -4740,6 +4765,10 @@ declare namespace LocalJSX {
* Emitted when the datetime has focus.
*/
"onIonFocus"?: (event: IonDatetimeCustomEvent<void>) => void;
/**
* Emitted when componentDidRender is fired.
*/
"onIonRender"?: (event: IonDatetimeCustomEvent<void>) => void;
/**
* Emitted when the styles change.
*/
@ -4751,7 +4780,7 @@ declare namespace LocalJSX {
/**
* 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.
*/
"presentation"?: 'date-time' | 'time-date' | 'date' | 'time' | 'month' | 'year' | 'month-year';
"presentation"?: DatetimePresentation;
/**
* If `true`, the datetime appears normal but is not interactive.
*/
@ -4785,6 +4814,24 @@ declare namespace LocalJSX {
*/
"yearValues"?: number[] | number | string;
}
interface IonDatetimeButton {
/**
* 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;
/**
* The ID of the `ion-datetime` instance associated with the datetime button.
*/
"datetime"?: string;
/**
* If `true`, the user cannot interact with the button.
*/
"disabled"?: boolean;
/**
* The mode determines which platform styles to use.
*/
"mode"?: "ios" | "md";
}
interface IonFab {
/**
* If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.
@ -7077,6 +7124,7 @@ declare namespace LocalJSX {
"ion-col": IonCol;
"ion-content": IonContent;
"ion-datetime": IonDatetime;
"ion-datetime-button": IonDatetimeButton;
"ion-fab": IonFab;
"ion-fab-button": IonFabButton;
"ion-fab-list": IonFabList;
@ -7176,6 +7224,7 @@ declare module "@stencil/core" {
"ion-col": LocalJSX.IonCol & JSXBase.HTMLAttributes<HTMLIonColElement>;
"ion-content": LocalJSX.IonContent & JSXBase.HTMLAttributes<HTMLIonContentElement>;
"ion-datetime": LocalJSX.IonDatetime & JSXBase.HTMLAttributes<HTMLIonDatetimeElement>;
"ion-datetime-button": LocalJSX.IonDatetimeButton & JSXBase.HTMLAttributes<HTMLIonDatetimeButtonElement>;
"ion-fab": LocalJSX.IonFab & JSXBase.HTMLAttributes<HTMLIonFabElement>;
"ion-fab-button": LocalJSX.IonFabButton & JSXBase.HTMLAttributes<HTMLIonFabButtonElement>;
"ion-fab-list": LocalJSX.IonFabList & JSXBase.HTMLAttributes<HTMLIonFabListElement>;