add DatePicker

types/materialize-css/index.d.ts

@@ -77,7 +77,157 @@ declare global {
             sortFunction: (a: string, b: string, inputText: string) => number;
         }
 
-        class FloatingActionButton extends Component<FloatingActionButtonOptions> {
+        class DatePicker extends Component<DatePickerOptions> implements Openable {
+            /**
+             * Get Instance
+             */
+            static getInstance(elem: Element): DatePicker;
+
+            /**
+             * If the picker is open.
+             */
+            isOpen: boolean;
+
+            /**
+             * The selected Date.
+             */
+            date: Date;
+
+            /**
+             * Open datepicker
+             */
+            open(): void;
+
+            /**
+             * Close datepicker
+             */
+            close(): void;
+
+            /**
+             * Gets a string representation of the selected date
+             */
+            toString(): string;
+
+            /**
+             * Set a date on the datepicker
+             * @param date Date to set on the datepicker.
+             */
+            setDate(date?: Date): void;
+
+            /**
+             * Change date view to a specific date on the datepicker
+             * @param date Date to show on the datepicker.
+             */
+            gotoDate(date: Date): void;
+        }
+
+        interface DatePickerOptions {
+            /**
+             * The date output format for the input field value.
+             * @default 'mmm dd, yyyy'
+             */
+            format: string;
+
+            /**
+             * Used to create date object from current input string.
+             */
+            parse: (value: string, format: string) => Date;
+
+            /**
+             * The initial date to view when first opened.
+             */
+            defaultDate: Date;
+
+            /**
+             * Make the `defaultDate` the initial selected value
+             * @default false
+             */
+            setDefaultDate: boolean;
+
+            /**
+             * Prevent selection of any date on the weekend.
+             * @default false
+             */
+            disableWeekends: boolean;
+
+            /**
+             * Custom function to disable certain days.
+             */
+            disableDayFn: (day: Date) => boolean;
+
+            /**
+             * First day of week (0: Sunday, 1: Monday etc).
+             * @default 0
+             */
+            firstDay: number;
+
+            /**
+             * The earliest date that can be selected.
+             */
+            minDate: Date;
+
+            /**
+             * The latest date that can be selected.
+             */
+            maxDate: Date;
+
+            /**
+             * Number of years either side, or array of upper/lower range.
+             * @default 10
+             */
+            yearRange: number | number[];
+
+            /**
+             * Changes Datepicker to RTL.
+             * @default false
+             */
+            isRTL: boolean;
+
+            /**
+             * Show month after year in Datepicker title.
+             * @default false
+             */
+            showMonthAfterYear: boolean;
+
+            /**
+             * Render days of the calendar grid that fall in the next or previous month.
+             * @default false
+             */
+            showDaysInNextAndPreviousMonths: false;
+
+            /**
+             * Specify a selector for a DOM element to render the calendar in, by default it will be placed before the input.
+             */
+            container: string;
+
+            /**
+             * An array of string returned by `Date.toDateString()`, indicating there are events in the specified days.
+             * @default []
+             */
+            events: string[];
+
+            /**
+             * Callback function when date is selected, first parameter is the newly selected date.
+             */
+            onSelect: (this: DatePicker, selectedDate: Date) => void;
+
+            /**
+             * Callback function when Datepicker is opened
+             */
+            onOpen: (this: DatePicker) => void;
+
+            /**
+             * Callback function when Datepicker is closed
+             */
+            onClose: (this: DatePicker) => void;
+
+            /**
+             * Callback function when Datepicker HTML is refreshed
+             */
+            onDraw: (this: DatePicker) => void;
+        }
+
+        class FloatingActionButton extends Component<FloatingActionButtonOptions> implements Openable {
             /**
              * Get Instance
              */
@@ -119,7 +269,7 @@ declare global {
             toolbarEnabled: boolean;
         }
 
-        class Sidenav extends Component<SidenavOptions> {
+        class Sidenav extends Component<SidenavOptions> implements Openable {
             /**
              * Get Instance
              */
@@ -246,7 +396,7 @@ declare global {
             responsiveThreshold: number;
         }
 
-        class Modal extends Component<ModalOptions> {
+        class Modal extends Component<ModalOptions> implements Openable {
             /**
              * Get Instance
              */
@@ -397,7 +547,7 @@ declare global {
          */
         function toast(options: Partial<ToastOptions>): Toast;
 
-        class Tooltip extends Component<TooltipOptions> {
+        class Tooltip extends Component<TooltipOptions> implements Openable {
             /**
              * Get Instance
              */
@@ -508,6 +658,12 @@ declare global {
              */
             options: TOptions;
         }
+
+        interface Openable {
+            isOpen: boolean;
+            open(): void;
+            close(): void;
+        }
     }
 
     interface JQuery {
@@ -517,6 +673,11 @@ declare global {
         autocomplete(method: keyof Pick<M.Autocomplete, "updateData">, data: M.AutocompleteData): JQuery;
         autocomplete(options?: Partial<M.AutocompleteOptions>): JQuery;
 
+        datePicker(method: keyof Pick<M.DatePicker, "open" | "close" | "destroy">): JQuery;
+        datePicker(method: keyof Pick<M.DatePicker, "setDate">, date?: Date): JQuery;
+        datePicker(method: keyof Pick<M.DatePicker, "gotoDate">, date: Date): JQuery;
+        datePicker(options?: Partial<M.DatePickerOptions>): JQuery;
+
         floatingActionButton(method: keyof Pick<M.FloatingActionButton, "open" | "close" | "destroy">): JQuery;
         floatingActionButton(options?: Partial<M.FloatingActionButtonOptions>): JQuery;
 

types/materialize-css/test/materialize-css-global.test.ts

@@ -22,3 +22,5 @@ const fab = new M.FloatingActionButton(elem);
 
 // $ExpectType Toast
 const toast = M.toast({ html: 'I am a toast!' });
+
+const datePicker = new M.DatePicker(elem);

types/materialize-css/test/materialize-css-jquery.test.ts

@@ -35,3 +35,10 @@ $(".whatever").floatingActionButton("open");
 $(".whatever").floatingActionButton("destroy");
 
 // Toast can not be invoked using jQuery.
+
+$(".whatever").datePicker();
+$(".whatever").datePicker({ defaultDate: new Date() });
+$(".whatever").datePicker("open");
+$(".whatever").datePicker("destroy");
+$(".whatever").datePicker("setDate", new Date());
+$(".whatever").datePicker("gotoDate", new Date());

types/materialize-css/test/materialize-css-module.test.ts

@@ -170,3 +170,29 @@ fab.el;
 toast.dismiss();
 // $ExpectType void
 materialize.Toast.dismissAll();
+
+// DatePicker
+// $ExpectType DatePicker
+new materialize.DatePicker(elem);
+// $ExpectType DatePicker
+const datePicker = new materialize.DatePicker(elem, {
+    defaultDate: new Date(),
+    onSelect(date) {
+        // $ExpectType DatePicker
+        this;
+        // $ExpectType Date
+        date;
+    }
+});
+// $ExpectType void
+datePicker.open();
+// $ExpectType void
+datePicker.setDate(new Date());
+// $ExpectType void
+datePicker.destroy();
+// $ExpectType DatePickerOptions
+datePicker.options;
+// $ExpectType Element
+datePicker.el;
+// $ExpectType boolean
+datePicker.isOpen;