From 705dc970e8d25b5c0e92cda6ed3aeb8ef2b9dc0d Mon Sep 17 00:00:00 2001
From: nutritiousreject <factoctopus@protonmail.com>
Date: Tue, 21 Jan 2020 02:00:16 -0600
Subject: [PATCH] feat(components): date-service - add ability to specify date
 format

---
 .../ui/calendar/service/nativeDate.service.ts |  4 ++-
 .../datepicker/baseDatepicker.component.tsx   |  8 -----
 .../ui/datepicker/datepicker.component.tsx    |  4 ++-
 .../datepicker/rangeDatepicker.component.tsx  |  4 +--
 src/date-fns/dateFnsDate.service.ts           |  1 -
 .../datepickerDateFormat.component.tsx        | 31 +++++++++++++++++++
 6 files changed, 39 insertions(+), 13 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<Date> {
   }
 
   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/baseDatepicker.component.tsx b/src/components/ui/datepicker/baseDatepicker.component.tsx
index e038d3b93..a7a8fd154 100644
--- a/src/components/ui/datepicker/baseDatepicker.component.tsx
+++ b/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',
   },
 });
-
diff --git a/src/components/ui/datepicker/datepicker.component.tsx b/src/components/ui/datepicker/datepicker.component.tsx
index 03fdb81bf..879db34d8 100644
--- a/src/components/ui/datepicker/datepicker.component.tsx
+++ b/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;
     }
diff --git a/src/components/ui/datepicker/rangeDatepicker.component.tsx b/src/components/ui/datepicker/rangeDatepicker.component.tsx
index 9184fbd7b..8b6b6b17f 100644
--- a/src/components/ui/datepicker/rangeDatepicker.component.tsx
+++ b/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 {
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 (
+    <Layout style={styles.container}>
+      <Datepicker
+        placeholder='Pick Date'
+        date={selectedDate}
+        onSelect={setSelectedDate}
+        dateService={dateService}
+      />
+    </Layout>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 376,
+  },
+});