diff --git a/types/materialize-css/index.d.ts b/types/materialize-css/index.d.ts index 413822f020..f1540ff597 100644 --- a/types/materialize-css/index.d.ts +++ b/types/materialize-css/index.d.ts @@ -77,7 +77,157 @@ declare global { sortFunction: (a: string, b: string, inputText: string) => number; } - class FloatingActionButton extends Component { + class DatePicker extends Component 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 implements Openable { /** * Get Instance */ @@ -119,7 +269,7 @@ declare global { toolbarEnabled: boolean; } - class Sidenav extends Component { + class Sidenav extends Component implements Openable { /** * Get Instance */ @@ -246,7 +396,7 @@ declare global { responsiveThreshold: number; } - class Modal extends Component { + class Modal extends Component implements Openable { /** * Get Instance */ @@ -397,7 +547,7 @@ declare global { */ function toast(options: Partial): Toast; - class Tooltip extends Component { + class Tooltip extends Component 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, data: M.AutocompleteData): JQuery; autocomplete(options?: Partial): JQuery; + datePicker(method: keyof Pick): JQuery; + datePicker(method: keyof Pick, date?: Date): JQuery; + datePicker(method: keyof Pick, date: Date): JQuery; + datePicker(options?: Partial): JQuery; + floatingActionButton(method: keyof Pick): JQuery; floatingActionButton(options?: Partial): JQuery; diff --git a/types/materialize-css/test/materialize-css-global.test.ts b/types/materialize-css/test/materialize-css-global.test.ts index f7a65f6c5b..7301d98f58 100644 --- a/types/materialize-css/test/materialize-css-global.test.ts +++ b/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); diff --git a/types/materialize-css/test/materialize-css-jquery.test.ts b/types/materialize-css/test/materialize-css-jquery.test.ts index fe5a72fffa..0a70184881 100644 --- a/types/materialize-css/test/materialize-css-jquery.test.ts +++ b/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()); diff --git a/types/materialize-css/test/materialize-css-module.test.ts b/types/materialize-css/test/materialize-css-module.test.ts index c6f487ca2d..bfe2952e3f 100644 --- a/types/materialize-css/test/materialize-css-module.test.ts +++ b/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;