feat(datepicker): date format utils (#1060)

* feat(datepicker): date format utils

* feat(datepicker): test styles fix issue

* feat(datepicker): exported format utils

* feat(datepicker): rollback to scoped styles

* feat(datepicker): date format doc and package update

---------

Co-authored-by: iropolo <ignacio.ropolo@dialpad.com>

components/datepicker/datepicker.mdx

@@ -65,6 +65,16 @@ In `calendar`:
 
 - Select day 20 July 2023
 
+### Date formats
+
+We are providing the following functions to format dates:
+
+formatLong(date): returns Thursday, September 2, 2022
+formatMedium(date): returns September 2, 2022
+formatShort(date, showWeekday=true): returns Thu, Sep 2, 2022, Sep 2, 2022 (showWeekday=false)
+formatNoYear(date, abbreviated=false): returns September 2, Sep 2 (abbreviated=true)
+formatNumerical(date): returns *MM/DD/YY*
+
 ### Import
 
 ```jsx

components/datepicker/datepicker_default.story.vue

@@ -3,6 +3,44 @@
     <p>
       Selected date: {{ date }}
     </p>
+    <br>
+    <br>
+    <table>
+      <tr>
+        <th>Format</th>
+        <th>Result</th>
+      </tr>
+      <tr>
+        <td>formatLong</td>
+        <td>{{ formatLong(date) }}</td>
+      </tr>
+      <tr>
+        <td>formatMedium</td>
+        <td>{{ formatMedium(date) }}</td>
+      </tr>
+      <tr>
+        <td>formatShort</td>
+        <td>{{ formatShort(date) }}</td>
+      </tr>
+      <tr>
+        <td>formatShort (no weekday)</td>
+        <td>{{ formatShort(date, false) }}</td>
+      </tr>
+      <tr>
+        <td>formatNoYear</td>
+        <td>{{ formatNoYear(date) }}</td>
+      </tr>
+      <tr>
+        <td>formatNoYear (abbreviated)</td>
+        <td>{{ formatNoYear(date, true) }}</td>
+      </tr>
+      <tr>
+        <td>formatNumerical</td>
+        <td>{{ formatNumerical(date) }}</td>
+      </tr>
+    </table>
+    <br>
+    <br>
 
     <dt-datepicker
       :locale="locale"
@@ -21,6 +59,7 @@
 
 <script>
 import DtDatepicker from './DtDatepicker.vue';
+import { formatLong, formatMedium, formatShort, formatNoYear, formatNumerical } from './formatUtils.js';
 
 export default {
   name: 'DtDatepickerDefault',
@@ -31,5 +70,34 @@ export default {
       date: new Date(),
     };
   },
+
+  methods: {
+    formatLong,
+    formatMedium,
+    formatShort,
+    formatNoYear,
+    formatNumerical,
+  },
 };
 </script>
+
+<style scoped>
+table {
+    border-collapse: collapse;
+    width: 100%;
+  }
+
+  th, td {
+    padding: 8px;
+    text-align: left;
+    border-bottom: 1px solid #ddd;
+  }
+
+  th {
+    background-color: #f2f2f2;
+  }
+
+  tr:nth-child(even) {
+    background-color: #f9f9f9;
+  }
+</style>

components/datepicker/formatUtils.js

@@ -0,0 +1,23 @@
+import { format } from 'date-fns';
+
+export function formatLong (date) {
+  return format(date, 'EEEE, MMMM d, yyyy');
+}
+
+export function formatMedium (date) {
+  return format(date, 'MMMM d, yyyy');
+}
+
+export function formatShort (date, showWeekday = true) {
+  const formatString = showWeekday ? 'EEE, MMM d, yyyy' : 'MMM d, yyyy';
+  return format(date, formatString);
+}
+
+export function formatNoYear (date, abbreviated = false) {
+  const formatString = abbreviated ? 'MMM d' : 'MMMM d';
+  return format(date, formatString);
+}
+
+export function formatNumerical (date) {
+  return format(date, 'MM/dd/yy');
+}

components/datepicker/index.js

@@ -1,2 +1,2 @@
 export { default as DtDatepicker } from './DtDatepicker.vue';
-export {} from './datepicker_constants';
+export * from './formatUtils.js';