feat(components): date-service - add ability to specify date format

Author: nutritiousreject

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<Date> {
   }
 
   public format(date: Date, format: string): string {
-    return fecha.format(date, format);
+    return fecha.format(date, format || this.options.format);
   }
 
   /**

src/components/ui/datepicker/baseDatepicker.component.tsx

@@ -35,7 +35,6 @@ import {
 
 type IconProp = (style: StyleType) => IconElement;
 
-
 export interface BaseDatepickerProps<D = Date> extends StyledComponentProps,
   TouchableOpacityProps,
   BaseCalendarProps<D> {
@@ -57,8 +56,6 @@ interface State {
   visible: boolean;
 }
 
-const FULL_DATE_FORMAT_STRING: string = 'DD/MM/YYYY';
-
 export abstract class BaseDatepickerComponent<P, D = Date> extends React.Component<BaseDatepickerProps<D> & P, State> {
 
   static defaultProps: Partial<BaseDatepickerProps> = {
@@ -99,10 +96,6 @@ export abstract class BaseDatepickerComponent<P, D = Date> extends React.Compone
 
   protected abstract renderCalendar(): CalendarElement<D> | RangeCalendarElement<D>;
 
-  protected formatDateToString(date: D): string {
-    return this.props.dateService.format(date, FULL_DATE_FORMAT_STRING);
-  }
-
   private getComponentStyle = (style: StyleType): StyleType => {
     const {
       textMarginHorizontal,
@@ -356,4 +349,3 @@ const styles = StyleSheet.create({
     textAlign: 'left',
   },
 });
-

src/components/ui/datepicker/datepicker.component.tsx

@@ -112,6 +112,8 @@ export type DatepickerElement<D = Date> = React.ReactElement<DatepickerProps<D>>
  *
  * @example DatepickerCustomLocale
  *
+ * @example DatepickerDateFormat
+ *
  * @example DatepickerMoment
  */
 
@@ -151,7 +153,7 @@ export class DatepickerComponent<D = Date> extends BaseDatepickerComponent<Datep
 
   protected getComponentTitle(): string {
     if (this.props.date) {
-      return this.formatDateToString(this.props.date);
+      return this.props.dateService.format(this.props.date, null);
     } else {
       return this.props.placeholder;
     }

src/components/ui/datepicker/rangeDatepicker.component.tsx

@@ -136,8 +136,8 @@ export class RangeDatepickerComponent<D = Date> 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 {

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: {};
 }

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 (
+    <Layout style={styles.container}>
+      <Datepicker
+        placeholder='Pick Date'
+        date={selectedDate}
+        onSelect={setSelectedDate}
+        dateService={dateService}
+      />
+    </Layout>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 376,
+  },
+});