Skip to content

Instantly share code, notes, and snippets.

@vineet-sinha
Last active May 13, 2024 02:31
Show Gist options
  • Save vineet-sinha/92e962fba8a08db5b548e9135d56fb9f to your computer and use it in GitHub Desktop.
Save vineet-sinha/92e962fba8a08db5b548e9135d56fb9f to your computer and use it in GitHub Desktop.
Flowbite Datepicker Typings
// from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/vanillajs-datepicker/Datepicker.d.ts
// updated with: https://github.com/themesberg/flowbite-datepicker/blob/master/docs/options.md
declare module 'flowbite-datepicker' {
export interface DatepickerOptionsFormat {
toValue: (date: Date, format: object, locale: object) => Date | number;
toDisplay: (date: Date, format: object, locale: object) => string;
}
// export interface DatepickerOptionsShortcutKeysDefinition {
// key?: string;
// ctrlOrMetaKey?: boolean;
// ctrlKey?: boolean;
// metaKey?: boolean;
// altKey?: boolean;
// shiftKey?: boolean;
// }
// export interface DatepickerOptionsShortcutKeys {
// show?: DatepickerOptionsShortcutKeysDefinition;
// hide?: null;
// toggle?: DatepickerOptionsShortcutKeysDefinition;
// prevButton?: DatepickerOptionsShortcutKeysDefinition;
// nextButton?: DatepickerOptionsShortcutKeysDefinition;
// viewSwitch?: DatepickerOptionsShortcutKeysDefinition;
// clearButton?: DatepickerOptionsShortcutKeysDefinition;
// todayButton?: DatepickerOptionsShortcutKeysDefinition;
// exitEditMode?: DatepickerOptionsShortcutKeysDefinition;
// }
export type DatepickerOptionsOrientationVertical = "top" | "middle" | "bottom" | "auto";
export type DatepickerOptionsOrientationHorizontal = "left" | "center" | "right" | "auto";
export type DatepickerOptionsOrientation =
| `${DatepickerOptionsOrientationVertical} ${DatepickerOptionsOrientationHorizontal}`
| "auto";
interface SetDateOptions {
clear?: boolean;
render?: boolean;
autohide?: boolean;
}
export interface DatepickerOptions {
autohide?: boolean;
beforeShowDay?: (date: Date) => object | string | boolean;
beforeShowDecade?: (date: Date) => object | string | boolean;
beforeShowMonth?: (date: Date) => object | string | boolean;
beforeShowYear?: (date: Date) => object | string | boolean;
buttonClass?: string;
calendarWeeks?: boolean;
clearBtn?: boolean;
container?: string | HTMLElement;
dateDelimiter?: string;
datesDisabled?: (string|Date|number)[];
daysOfWeekDisabled?: number[];
daysOfWeekHighlighted?: number[];
defaultViewDate?: string | Date | number;
disableTouchKeyboard?: boolean;
format?: string | DatepickerOptionsFormat;
language?: string;
maxDate?: string | Date | number;
maxNumberOfDates?: number;
maxView?: number;
minDate?: string | Date | number;
nextArrow?: string;
orientation?: DatepickerOptionsOrientation;
pickLevel?: number;
prevArrow?: string;
// shortcutKeys?: DatepickerOptionsShortcutKeys;
showDaysOfWeek?: boolean;
showOnClick?: boolean;
showOnFocus?: boolean;
startView?: number;
title?: string;
todayBtn?: boolean;
todayBtnMode?: number;
todayHighlight?: boolean;
updateOnBlur?: boolean;
// weekNumbers?: number | ((date: Date, weekStart: number) => number);
weekStart?: number;
}
export class Datepicker {
// constructor(el: HTMLElement, options?: any);
constructor(el: HTMLElement, options?: DatepickerOptions);
// constructor(element: HTMLElement, options?: DatepickerOptions, rangepicker?: DateRangePicker);
active: boolean;
// element: HTMLElement;
// dates: any;
// config: DatepickerOptions;
// inputField: any;
// editMode: boolean;
// picker: any;
pickerElement: HTMLElement | undefined;
static formatDate(date: Date | number, format: string, lang?: string): string;
static parseDate(dateStr: string | Date | number, format: any, lang?: string): number;
// static get locales(): object;
get active(): boolean;
get pickerElement(): HTMLElement | undefined;
// setOptions(options: object): void;
setOptions(options: DatepickerOptions): void;
show(): void;
hide(): void;
destroy(): Datepicker;
getDate(format?: string): Date | string | Date[] | string[];
// setDate(...args: any[]): void;
setDate(...args: (Date|number|string)[], opts?: SetDateOptions): void;
// update(options?: { clear: boolean; render: boolean }): void;
update(options?: { autohide: boolean }): void;
// getFocusedDate(format?: string): Date | string;
// setFocusedDate(viewDate?: Date | number | string, resetView?: boolean): void;
refresh(target?: "picker" | "input", forceRender?: boolean): void;
// enterEditMode(): void;
// exitEditMode(options?: object): void;
}
}
@vineet-sinha
Copy link
Author

This gist assumes that you are declaring Flowbite via:
import { Datepicker } from 'flowbite-datepicker';
and not:
import Datepicker from 'flowbite-datepicker/Datepicker';

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment