From 709dbe92795233359626ef94121270b33b41ee00 Mon Sep 17 00:00:00 2001 From: unknown Date: Sun, 12 Jan 2020 21:14:54 -0600 Subject: [PATCH 1/2] Added dateFormat + docs for manually specifying localization string --- src/components/ui/datepicker/baseDatepicker.component.tsx | 5 +++-- src/components/ui/datepicker/datepicker.component.tsx | 2 ++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/ui/datepicker/baseDatepicker.component.tsx b/src/components/ui/datepicker/baseDatepicker.component.tsx index 62c54036a..7464343e7 100644 --- a/src/components/ui/datepicker/baseDatepicker.component.tsx +++ b/src/components/ui/datepicker/baseDatepicker.component.tsx @@ -36,6 +36,7 @@ export interface BaseDatepickerProps extends StyledComponentProps, status?: string; size?: string; placeholder?: string; + dateFormat?: string; } interface State { @@ -44,13 +45,13 @@ interface State { type DatepickerChildren = [CalendarElement, React.ReactElement]; -const FULL_DATE_FORMAT_STRING: string = 'DD/MM/YYYY'; export abstract class BaseDatepickerComponent extends React.Component & P, State> { static defaultProps: Partial = { dateService: new NativeDateService(), placeholder: 'dd/mm/yyyy', + dateFormat: 'DD/MM/YYYY', }; public state: State = { @@ -62,7 +63,7 @@ export abstract class BaseDatepickerComponent extends React.Compone protected abstract renderCalendar(): CalendarElement | RangeCalendarElement; protected formatDateToString(date: D): string { - return this.props.dateService.format(date, FULL_DATE_FORMAT_STRING); + return this.props.dateService.format(date, this.props.dateFormat); } private getComponentStyle = (style: StyleType): StyleType => { diff --git a/src/components/ui/datepicker/datepicker.component.tsx b/src/components/ui/datepicker/datepicker.component.tsx index 58bdf7f9b..5272c83b5 100644 --- a/src/components/ui/datepicker/datepicker.component.tsx +++ b/src/components/ui/datepicker/datepicker.component.tsx @@ -27,6 +27,8 @@ export type DatepickerElement = React.ReactElement> * Can be `basic`, `primary`, `success`, `info`, `warning`, `danger` or `control`. * Default is `basic`. * + * @property {string} dateFormat - Sets the display string of the Date property. Default DD-MM-YY + * * @property {string} size - Determines the size of the component. * Can be `small`, `medium` or `large`. * Default is `medium`. From afad5f53600d122208b941d06ce62de520350a52 Mon Sep 17 00:00:00 2001 From: Artur Yorsh Date: Fri, 17 Jan 2020 18:35:58 +0300 Subject: [PATCH 2/2] feat(components): date-service - add ability to specify date format --- .../ui/calendar/service/nativeDate.service.ts | 4 ++- .../ui/datepicker/datepicker.component.tsx | 6 ++-- .../datepicker/rangeDatepicker.component.tsx | 4 +-- src/date-fns/dateFnsDate.service.ts | 1 - .../datepickerDateFormat.component.tsx | 31 +++++++++++++++++++ 5 files changed, 39 insertions(+), 7 deletions(-) create mode 100644 src/showcases/components/datepicker/datepickerDateFormat.component.tsx diff --git a/src/components/ui/calendar/service/nativeDate.service.ts b/src/components/ui/calendar/service/nativeDate.service.ts index 5244a714f..d7bedfbca 100644 --- a/src/components/ui/calendar/service/nativeDate.service.ts +++ b/src/components/ui/calendar/service/nativeDate.service.ts @@ -17,10 +17,12 @@ export const LOCALE_DEFAULT = 'en'; export interface NativeDateServiceOptions { // 0 for Sunday, 1 for Monday, etc startDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6; + format?: string; i18n?: I18nConfig; } const DEFAULT_OPTIONS: NativeDateServiceOptions = { + format: 'DD/MM/YYYY', startDayOfWeek: 0, }; @@ -93,7 +95,7 @@ export class NativeDateService extends DateService { } public format(date: Date, format: string): string { - return fecha.format(date, format); + return fecha.format(date, format || this.options.format); } /** diff --git a/src/components/ui/datepicker/datepicker.component.tsx b/src/components/ui/datepicker/datepicker.component.tsx index e827ccc31..879db34d8 100644 --- a/src/components/ui/datepicker/datepicker.component.tsx +++ b/src/components/ui/datepicker/datepicker.component.tsx @@ -39,8 +39,6 @@ export type DatepickerElement = React.ReactElement> * Can be `basic`, `primary`, `success`, `info`, `warning`, `danger` or `control`. * Default is `basic`. * - * @property {string} dateFormat - Sets the display string of the Date property. Default DD-MM-YY - * * @property {string} size - Determines the size of the component. * Can be `small`, `medium` or `large`. * Default is `medium`. @@ -114,6 +112,8 @@ export type DatepickerElement = React.ReactElement> * * @example DatepickerCustomLocale * + * @example DatepickerDateFormat + * * @example DatepickerMoment */ @@ -153,7 +153,7 @@ export class DatepickerComponent extends BaseDatepickerComponent extends BaseDatepickerComponent< const { startDate, endDate } = this.props.range; if (startDate || endDate) { - const start: string = startDate ? this.formatDateToString(startDate) : ''; - const end: string = endDate ? this.formatDateToString(endDate) : ''; + const start: string = startDate ? this.props.dateService.format(startDate, null) : ''; + const end: string = endDate ? this.props.dateService.format(endDate, null) : ''; return `${start} - ${end}`; } else { diff --git a/src/date-fns/dateFnsDate.service.ts b/src/date-fns/dateFnsDate.service.ts index 910b3c219..f824318f3 100644 --- a/src/date-fns/dateFnsDate.service.ts +++ b/src/date-fns/dateFnsDate.service.ts @@ -18,7 +18,6 @@ const parse = rollupParse || dateFnsParse; const formatDate = rollupFormat || dateFnsFormat; export interface DateFnsOptions extends NativeDateServiceOptions { - format: string; parseOptions: {}; formatOptions: {}; } diff --git a/src/showcases/components/datepicker/datepickerDateFormat.component.tsx b/src/showcases/components/datepicker/datepickerDateFormat.component.tsx new file mode 100644 index 000000000..6adb90fda --- /dev/null +++ b/src/showcases/components/datepicker/datepickerDateFormat.component.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { StyleSheet } from 'react-native'; +import { + Datepicker, + Layout, + NativeDateService, +} from '@ui-kitten/components'; + +const dateService = new NativeDateService('en', { format: 'DD.MM.YYYY' }); + +export const DatepickerDateFormatShowcase = () => { + + const [selectedDate, setSelectedDate] = React.useState(null); + + return ( + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + minHeight: 376, + }, +});