mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 23:58:13 +08:00
feat(datetime): formatOptions property for Datetime (#29065)
Issue number: Internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The Datetime header, Datetime time button, and Datetime Button have default date formatting that cannot be set by the developer. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The developer can customize the date and time formatting for the Datetime header and time button - The developer can customize the date and time formatting for the Datetime Button - A warning will appear in the console if they try to provide a time zone (the time zone will not get used) - A warning will be logged if they do not include the date or time object for formatOptions as needed for the presentation of the Datetime ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> These changes have been reviewed in #29009 and #29059. This PR just adds them to the feature branch now that the separate tickets are complete. --------- Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
This commit is contained in:
Shawn Taylor
@ -8,7 +8,7 @@ import { getIonMode } from '../../global/ionic-global';
|
||||
import type { Color } from '../../interface';
|
||||
import type { DatetimePresentation } from '../datetime/datetime-interface';
|
||||
import { getToday } from '../datetime/utils/data';
|
||||
import { getMonthAndYear, getMonthDayAndYear, getLocalizedDateTime, getLocalizedTime } from '../datetime/utils/format';
|
||||
import { getLocalizedDateTime, getLocalizedTime } from '../datetime/utils/format';
|
||||
import { getHourCycle } from '../datetime/utils/helpers';
|
||||
import { parseDate } from '../datetime/utils/parse';
|
||||
/**
|
||||
@ -196,7 +196,7 @@ export class DatetimeButton implements ComponentInterface {
|
||||
return;
|
||||
}
|
||||
|
||||
const { value, locale, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
|
||||
const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
|
||||
|
||||
const parsedValues = this.getParsedDateValues(value);
|
||||
|
||||
@ -225,8 +225,12 @@ export class DatetimeButton implements ComponentInterface {
|
||||
switch (datetimePresentation) {
|
||||
case 'date-time':
|
||||
case 'time-date':
|
||||
const dateText = getMonthDayAndYear(locale, firstParsedDatetime);
|
||||
const timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle);
|
||||
const dateText = getLocalizedDateTime(
|
||||
locale,
|
||||
firstParsedDatetime,
|
||||
formatOptions?.date ?? { month: 'short', day: 'numeric', year: 'numeric' }
|
||||
);
|
||||
const timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions?.time);
|
||||
if (preferWheel) {
|
||||
this.dateText = `${dateText} ${timeText}`;
|
||||
} else {
|
||||
@ -246,20 +250,28 @@ export class DatetimeButton implements ComponentInterface {
|
||||
}
|
||||
this.dateText = headerText;
|
||||
} else {
|
||||
this.dateText = getMonthDayAndYear(locale, firstParsedDatetime);
|
||||
this.dateText = getLocalizedDateTime(
|
||||
locale,
|
||||
firstParsedDatetime,
|
||||
formatOptions?.date ?? { month: 'short', day: 'numeric', year: 'numeric' }
|
||||
);
|
||||
}
|
||||
break;
|
||||
case 'time':
|
||||
this.timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle);
|
||||
this.timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions?.time);
|
||||
break;
|
||||
case 'month-year':
|
||||
this.dateText = getMonthAndYear(locale, firstParsedDatetime);
|
||||
this.dateText = getLocalizedDateTime(
|
||||
locale,
|
||||
firstParsedDatetime,
|
||||
formatOptions?.date ?? { month: 'long', year: 'numeric' }
|
||||
);
|
||||
break;
|
||||
case 'month':
|
||||
this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, { month: 'long' });
|
||||
this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.time ?? { month: 'long' });
|
||||
break;
|
||||
case 'year':
|
||||
this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, { year: 'numeric' });
|
||||
this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.time ?? { year: 'numeric' });
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
@ -244,4 +244,87 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
await expect(page.locator('#time-button')).not.toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe(title('datetime-button: formatOptions'), () => {
|
||||
test('should include date and time for presentation date-time', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime-button datetime="datetime"></ion-datetime-button>
|
||||
<ion-datetime id="datetime" presentation="date-time" value="2023-11-02T01:22:00" locale="en-US"></ion-datetime>
|
||||
<script>
|
||||
const datetime = document.querySelector('ion-datetime');
|
||||
datetime.formatOptions = {
|
||||
date: {
|
||||
weekday: "short",
|
||||
month: "long",
|
||||
day: "2-digit"
|
||||
},
|
||||
time: {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toContainText('Thu, November 02');
|
||||
await expect(page.locator('#time-button')).toContainText('01:22 AM');
|
||||
});
|
||||
|
||||
test('should include date for presentation date', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime-button datetime="datetime"></ion-datetime-button>
|
||||
<ion-datetime id="datetime" presentation="date" value="2023-11-02" locale="en-US"></ion-datetime>
|
||||
<script>
|
||||
const datetime = document.querySelector('ion-datetime');
|
||||
datetime.formatOptions = {
|
||||
date: {
|
||||
weekday: "short",
|
||||
month: "long",
|
||||
day: "2-digit"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toContainText('Thu, November 02');
|
||||
});
|
||||
|
||||
test('should include date and time in same button for preferWheel', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime-button datetime="datetime"></ion-datetime-button>
|
||||
<ion-datetime id="datetime" presentation="date-time" value="2023-11-02T01:22:00" locale="en-US" prefer-wheel="true"></ion-datetime>
|
||||
<script>
|
||||
const datetime = document.querySelector('ion-datetime');
|
||||
datetime.formatOptions = {
|
||||
date: {
|
||||
weekday: "short",
|
||||
month: "long",
|
||||
day: "2-digit"
|
||||
},
|
||||
time: {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('ion-datetime-button')).toContainText('Thu, November 02 01:22 AM');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -215,8 +215,41 @@
|
||||
></ion-datetime>
|
||||
</ion-popover>
|
||||
</div>
|
||||
|
||||
<div class="grid-item">
|
||||
<h2>formatOptions</h2>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Start Date</ion-label>
|
||||
<ion-datetime-button datetime="format-options" slot="end"></ion-datetime-button>
|
||||
</ion-item>
|
||||
|
||||
<ion-popover arrow="false">
|
||||
<ion-datetime
|
||||
id="format-options"
|
||||
presentation="date-time"
|
||||
value="2023-11-02T01:22:00"
|
||||
locale="en-US"
|
||||
></ion-datetime>
|
||||
</ion-popover>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
const formatOptionsDatetime = document.querySelector('#format-options');
|
||||
formatOptionsDatetime.formatOptions = {
|
||||
date: {
|
||||
weekday: 'short',
|
||||
month: 'long',
|
||||
day: '2-digit',
|
||||
},
|
||||
time: {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
},
|
||||
};
|
||||
</script>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user