javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(datetime): add size property (#23649)

Browse Source 
resolves #23518
This commit is contained in:
William Martin
2021-07-20 12:31:38 -04:00
committed by GitHub
parent 2c07a1566b
commit 321341d97d
13 changed files with 184 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
core/src/components/datetime/datetime.scss
View File

@@ -14,7 +14,6 @@
flex-flow: column;
width: 350px;
height: 100%;
background: var(--background);
@@ -22,6 +21,15 @@
overflow: hidden;
}
:host(.datetime-size-fixed) {
width: 350px;
}
:host(.datetime-size-cover) {
width: 100%;
min-width: 350px;
}
:host .calendar-body,
:host .time-column,
:host .datetime-year {

11
core/src/components/datetime/datetime.tsx
View File

@@ -318,6 +318,12 @@ export class Datetime implements ComponentInterface {
*/
@Prop() showDefaultTimeLabel = true;
/**
* If `cover`, the `ion-datetime` will expand to cover the full width of its container.
* If `fixed`, the `ion-datetime` will have a fixed width.
*/
@Prop() size: 'cover' | 'fixed' = 'fixed';
/**
* Emitted when the datetime selection was cancelled.
*/
@@ -1525,7 +1531,7 @@ export class Datetime implements ComponentInterface {
}
render() {
const { name, value, disabled, el, color, isPresented, readonly, showMonthAndYear, presentation } = this;
const { name, value, disabled, el, color, isPresented, readonly, showMonthAndYear, presentation, size } = this;
const mode = getIonMode(this);
renderHiddenInput(true, el, name, value, disabled);
@@ -1540,7 +1546,8 @@ export class Datetime implements ComponentInterface {
['datetime-readonly']: readonly,
['datetime-disabled']: disabled,
'show-month-and-year': showMonthAndYear,
[`datetime-presentation-${presentation}`]: true
[`datetime-presentation-${presentation}`]: true,
[`datetime-size-${size}`]: true
})
}}
>

16
core/src/components/datetime/readme.md
View File

@@ -173,6 +173,9 @@ dates in JavaScript.
<!-- Selecting time first, date second -->
<ion-datetime presentation="time-date"></ion-datetime>
<!-- Full width size -->
<ion-datetime size="cover"></ion-datetime>
<!-- Custom title -->
<ion-datetime>
<div slot="title">My Custom Title</div>
@@ -252,6 +255,9 @@ export class MyComponent {
<!-- Selecting time first, date second -->
<ion-datetime presentation="time-date"></ion-datetime>
<!-- Full width size -->
<ion-datetime size="cover"></ion-datetime>
<!-- Custom title -->
<ion-datetime>
<div slot="title">My Custom Title</div>
@@ -342,6 +348,9 @@ export const DateTimeExamples: React.FC = () => {
{/* Selecting time first, date second */}
<IonDatetime presentation="time-date"></IonDatetime>
{/* Full width size */}
<IonDatetime size="cover"></IonDatetime>
{/* Custom title */}
<IonDatetime>
@@ -423,6 +432,9 @@ export class DatetimeExample {
{/* Selecting time first, date second */}
<ion-datetime presentation="time-date"></ion-datetime>,
{/* Full width size */}
<ion-datetime size="cover"></ion-datetime>,
{/* Custom title */}
<ion-datetime>
@@ -480,6 +492,9 @@ export class DatetimeExample {
<!-- Selecting time first, date second -->
<ion-datetime presentation="time-date"></ion-datetime>
<!-- Full width size -->
<ion-datetime size="cover"></ion-datetime>
<!-- Custom title -->
<ion-datetime>
@@ -567,6 +582,7 @@ export class DatetimeExample {
| `showDefaultButtons` | `show-default-buttons` | 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. | `boolean` | `false` |
| `showDefaultTimeLabel` | `show-default-time-label` | If `true`, the default "Time" label will be rendered for the time selector of the `ion-datetime` component. Developers can also use the `time-label` slot if they want to customize this label. If a custom label is set in the `time-label` slot then the default label will not be rendered. | `boolean` | `true` |
| `showDefaultTitle` | `show-default-title` | If `true`, a header will be shown above the calendar picker. On `ios` mode this will include the slotted title, and on `md` mode this will include the slotted title and the selected date. | `boolean` | `false` |
| `size` | `size` | If `cover`, the `ion-datetime` will expand to cover the full width of its container. If `fixed`, the `ion-datetime` will have a fixed width. | `"cover" \| "fixed"` | `'fixed'` |
| `value` | `value` | The value of the datetime as a valid ISO 8601 datetime string. | `null \| string \| undefined` | `undefined` |
| `yearValues` | `year-values` | Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`. | `number \| number[] \| string \| undefined` | `undefined` |

123
core/src/components/datetime/test/size/index.html Normal file
View File

@@ -0,0 +1,123 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Datetime - Basic</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<style>
ion-popover {
--width: 500px;
}
</style>
</head>
<body>
<ion-app>
<ion-header translucent="true">
<ion-toolbar>
<ion-title>Datetime - Basic</ion-title>
<ion-buttons slot="end">
<ion-button id="popover-trigger">Options</ion-button>
</ion-buttons>
<ion-popover class="options-popover" trigger="popover-trigger">
<ion-list lines="none">
<ion-item detail="true" href="?ionic:mode=ios">
<ion-label>iOS Mode</ion-label>
</ion-item>
<ion-item detail="true" href="?ionic:mode=md">
<ion-label>MD Mode</ion-label>
</ion-item>
</ion-list>
</ion-popover>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<div class="grid">
<div class="grid-item">
<h2>Inline - Fixed (350px)</h2>
<ion-datetime value="2020-03-14T14:23:00.000Z" id="inline-datetime"></ion-datetime>
</div>
<div class="grid-item">
<h2>Popover - Fixed (350px)</h2>
<ion-button onclick="presentPopover(defaultPopover, event)">Present Popover</ion-button>
<ion-popover class="datetime-popover" id="default-popover">
<ion-datetime></ion-datetime>
</ion-popover>
</div>
<div class="grid-item">
<h2>Modal - Fixed (350px)</h2>
<ion-button onclick="presentModal()">Present Modal</ion-button>
</div>
<div class="grid-item">
<h2>Inline - Cover (100%)</h2>
<ion-datetime value="2020-03-14T14:23:00.000Z" id="custom-datetime" size="cover"></ion-datetime>
</div>
<div class="grid-item">
<h2>Popover - Cover (100%)</h2>
<ion-button onclick="presentPopover(customPopover, event)">Present Popover</ion-button>
<ion-popover class="datetime-popover" id="custom-popover">
<ion-datetime size="cover"></ion-datetime>
</ion-popover>
</div>
<div class="grid-item">
<h2>Modal - Cover (100%)</h2>
<ion-button onclick="presentModal('cover')">Present Modal</ion-button>
</div>
</div>
</ion-content>
<script>
const datetimes = document.querySelectorAll('ion-datetime');
const datetime = document.querySelector('ion-datetime');
const defaultPopover = document.querySelector('ion-popover#default-popover');
const customPopover = document.querySelector('ion-popover#custom-popover');
const presentPopover = (popover, ev) => {
popover.event = ev;
popover.showBackdrop = false;
popover.isOpen = true;
const dismiss = () => {
popover.isOpen = false;
popover.event = undefined;
popover.removeEventListener('didDismiss', dismiss);
}
popover.addEventListener('didDismiss', dismiss);
}
const presentModal = async (size = 'fixed') => {
const modal = await createModal(size);
await modal.present();
}
const createModal = (size) => {
// create component to open
const element = document.createElement('div');
element.innerHTML = `
<ion-datetime show-default-buttons="true" color="danger" size="${size}">
<span slot="title">Select Date</span>
</ion-datetime>
`;
// present the modal
const modalElement = Object.assign(document.createElement('ion-modal'), {
component: element
});
document.body.appendChild(modalElement);
return modalElement;
}
</script>
</ion-app>
</body>
</html>

3
core/src/components/datetime/usage/angular.md
View File

@@ -26,6 +26,9 @@
<!-- Selecting time first, date second -->
<ion-datetime presentation="time-date"></ion-datetime>
<!-- Full width size -->
<ion-datetime size="cover"></ion-datetime>
<!-- Custom title -->
<ion-datetime>
<div slot="title">My Custom Title</div>

3
core/src/components/datetime/usage/javascript.md
View File

@@ -26,6 +26,9 @@
<!-- Selecting time first, date second -->
<ion-datetime presentation="time-date"></ion-datetime>
<!-- Full width size -->
<ion-datetime size="cover"></ion-datetime>
<!-- Custom title -->
<ion-datetime>
<div slot="title">My Custom Title</div>

3
core/src/components/datetime/usage/react.md
View File

@@ -52,6 +52,9 @@ export const DateTimeExamples: React.FC = () => {
{/* Selecting time first, date second */}
<IonDatetime presentation="time-date"></IonDatetime>
{/* Full width size */}
<IonDatetime size="cover"></IonDatetime>
{/* Custom title */}
<IonDatetime>

3
core/src/components/datetime/usage/stencil.md
View File

@@ -50,6 +50,9 @@ export class DatetimeExample {
{/* Selecting time first, date second */}
<ion-datetime presentation="time-date"></ion-datetime>,
{/* Full width size */}
<ion-datetime size="cover"></ion-datetime>,
{/* Custom title */}
<ion-datetime>

3
core/src/components/datetime/usage/vue.md
View File

@@ -26,6 +26,9 @@
<!-- Selecting time first, date second -->
<ion-datetime presentation="time-date"></ion-datetime>
<!-- Full width size -->
<ion-datetime size="cover"></ion-datetime>
<!-- Custom title -->
<ion-datetime>