@westpac/ui 0.35.0 → 0.36.0

package/dist/components/date-picker/date-picker.component.d.ts

@@ -1,2 +1,2 @@
 import { type DatePickerProps } from './date-picker.types.js';
-export declare function DatePicker({ disableWeekends, disableDaysOfWeek, disableDates, placeholder, onChange, onFocus, onBlur, onOpen, onClose, min, max, value, id, size, name, block, invalid, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatePicker({ dateFormat, disableWeekends, disableDaysOfWeek, disableDates, placeholder, onChange, onFocus, onBlur, onOpen, onClose, min, max, value, id, size, name, block, invalid, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/date-picker/date-picker.component.js

@@ -16,7 +16,7 @@ function _extends() {
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { styles } from './date-picker.styles.js';
 import { formatDate, isDateDisabled, useListener } from './date-picker.utils.js';
-export function DatePicker({ disableWeekends , disableDaysOfWeek , disableDates , placeholder , onChange , onFocus , onBlur , onOpen , onClose , min , max , value , id , size ='md' , name , block =false , invalid =false , ...props }) {
+export function DatePicker({ dateFormat ='dd-MM-yyyy' , disableWeekends , disableDaysOfWeek , disableDates , placeholder , onChange , onFocus , onBlur , onOpen , onClose , min , max , value , id , size ='md' , name , block =false , invalid =false , ...props }) {
     const [initialized, setInitialized] = useState(false);
     useEffect(()=>{
         const initDatePicker = async ()=>{
@@ -34,15 +34,17 @@ export function DatePicker({ disableWeekends , disableDaysOfWeek , disableDates
     useListener(ref, 'duetClose', onClose);
     const dateAdapter = useMemo(()=>({
             parse (value = '', createDate) {
-                const matches = value.match(/^(\d{1,2})-(\d{1,2})-(\d{4})$/);
+                const matches = value.match(/^(\d{1,2})[-/](\d{1,2})[-/](\d{4})$/);
                 if (matches) {
                     return createDate(matches[3], matches[2], matches[1]);
                 }
             },
             format (date) {
-                return formatDate(date, 'dd-mm-yyyy');
+                return formatDate(date, dateFormat);
             }
-        }), []);
+        }), [
+        dateFormat
+    ]);
     const localization = useMemo(()=>{
         return {
             buttonLabel: 'Choose date',

package/dist/components/date-picker/date-picker.types.d.ts

@@ -17,6 +17,11 @@ export type DatePickerProps = {
      * Make Datepicker block
      */
     block?: Variants['block'];
+    /**
+     * Date format
+     * @default dd-MM-yyyy
+     */
+    dateFormat?: 'dd-MM-yyyy' | 'dd/MM/yyyy';
     disableDates?: string[];
     disableDaysOfWeek?: number[];
     disableWeekends?: boolean;

package/dist/components/date-picker/date-picker.utils.d.ts

@@ -4,7 +4,7 @@ import { DuetDatePickerElement } from './date-picker.types.js';
  * @param date the date to format as a Date
  * @param format the format string eg. "dd.mm.yyyy", "YYYY-MM-DD"
  */
-export declare function formatDate(date: Date, format: string): string;
+export declare function formatDate(date: Date, format: 'dd-MM-yyyy' | 'dd/MM/yyyy'): string;
 /**
  * @param ref Element ref
  * @param eventName Event name for the event listener

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",

package/src/components/date-picker/date-picker.component.tsx

@@ -7,6 +7,7 @@ import { type DatePickerProps, DuetDatePickerElement } from './date-picker.types
 import { formatDate, isDateDisabled, useListener } from './date-picker.utils.js';
 
 export function DatePicker({
+  dateFormat = 'dd-MM-yyyy',
   disableWeekends,
   disableDaysOfWeek,
   disableDates,
@@ -48,16 +49,16 @@ export function DatePicker({
   const dateAdapter = useMemo(
     () => ({
       parse(value = '', createDate: (year: string, month: string, day: string) => Date) {
-        const matches = value.match(/^(\d{1,2})-(\d{1,2})-(\d{4})$/);
+        const matches = value.match(/^(\d{1,2})[-/](\d{1,2})[-/](\d{4})$/);
         if (matches) {
           return createDate(matches[3], matches[2], matches[1]);
         }
       },
       format(date: Date) {
-        return formatDate(date, 'dd-mm-yyyy');
+        return formatDate(date, dateFormat as 'dd-MM-yyyy' | 'dd/MM/yyyy');
       },
     }),
-    [],
+    [dateFormat],
   );
 
   const localization = useMemo(() => {

package/src/components/date-picker/date-picker.types.ts

@@ -21,6 +21,11 @@ export type DatePickerProps = {
    * Make Datepicker block
    */
   block?: Variants['block'];
+  /**
+   * Date format
+   * @default dd-MM-yyyy
+   */
+  dateFormat?: 'dd-MM-yyyy' | 'dd/MM/yyyy';
   /*
    * Disable specific dates. Must be in IS0-8601 format: YYYY-MM-DD
    */

package/src/components/date-picker/date-picker.utils.ts

@@ -8,7 +8,7 @@ const ISO_DATE_FORMAT = /^(\d{4})-(\d{2})-(\d{2})$/;
  * @param date the date to format as a Date
  * @param format the format string eg. "dd.mm.yyyy", "YYYY-MM-DD"
  */
-export function formatDate(date: Date, format: string) {
+export function formatDate(date: Date, format: 'dd-MM-yyyy' | 'dd/MM/yyyy') {
   if (!date) {
     return '';
   }