mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-08-17 07:20:23 +00:00
Add types for bulma-calendar (#42478)
* Add types for bulma-calendar * Process feedback
This commit is contained in:
Remco Haszing
@@ -0,0 +1,92 @@
|
||||
import BulmaCalendar from 'bulma-calendar';
|
||||
|
||||
new BulmaCalendar('.selector');
|
||||
BulmaCalendar.attach('.selector');
|
||||
|
||||
new BulmaCalendar(document.body);
|
||||
BulmaCalendar.attach(document.body);
|
||||
|
||||
const calendar = new BulmaCalendar('.selector', {
|
||||
type: 'date',
|
||||
color: '#ffffff',
|
||||
isRange: false,
|
||||
allowSameDayRange: false,
|
||||
lang: 'nl',
|
||||
dateFormat: 'DD',
|
||||
timeFormat: 'HH',
|
||||
displayMode: 'dialog',
|
||||
position: 'bottom',
|
||||
showHeader: false,
|
||||
headerPosition: 'bottom',
|
||||
showFooter: false,
|
||||
showButtons: false,
|
||||
showTodayButton: false,
|
||||
showClearButton: false,
|
||||
cancelLabel: '',
|
||||
clearLabel: '',
|
||||
todayLabel: '',
|
||||
nowLabel: '',
|
||||
validateLabel: '',
|
||||
enableMonthSwitch: false,
|
||||
enableYearSwitch: false,
|
||||
startDate: new Date(),
|
||||
endDate: new Date(),
|
||||
minDate: new Date(),
|
||||
maxDate: new Date(),
|
||||
disabledDates: [],
|
||||
disabledWeekDays: [],
|
||||
weekStart: 1,
|
||||
startTime: new Date(),
|
||||
endTime: new Date(),
|
||||
minuteSteps: 10,
|
||||
labelFrom: '',
|
||||
labelTo: '',
|
||||
closeOnOverlayClick: false,
|
||||
closeOnSelect: false,
|
||||
toggleOnInputClick: false,
|
||||
onReady: () => {},
|
||||
icons: {
|
||||
previous: '',
|
||||
next: '',
|
||||
time: '',
|
||||
date: '',
|
||||
},
|
||||
});
|
||||
|
||||
calendar.show();
|
||||
calendar.hide();
|
||||
calendar.isOpen() ? 'yep' : 'nope';
|
||||
calendar.isRange() ? 'yep' : 'nope';
|
||||
calendar.value('1970-01-01T00:00:00Z').startDate;
|
||||
calendar.value('1970-01-01T00:00:00Z').endDate;
|
||||
calendar.value().startDate;
|
||||
calendar.value().endDate;
|
||||
calendar.refresh();
|
||||
calendar.save();
|
||||
|
||||
console.log(calendar.id);
|
||||
|
||||
calendar.lang = calendar.lang;
|
||||
calendar.date = calendar.date;
|
||||
calendar.startDate = calendar.startDate;
|
||||
calendar.endDate = calendar.endDate;
|
||||
calendar.minDate = calendar.minDate;
|
||||
calendar.maxDate = calendar.maxDate;
|
||||
calendar.dateFormat = calendar.dateFormat;
|
||||
calendar.time = calendar.time;
|
||||
calendar.startTime = calendar.startTime;
|
||||
calendar.endTime = calendar.endTime;
|
||||
calendar.timeFormat = calendar.timeFormat;
|
||||
|
||||
calendar.on('show', event => {
|
||||
event.type === 'show';
|
||||
});
|
||||
calendar.on('hide', event => {
|
||||
event.type === 'hide';
|
||||
});
|
||||
calendar.on('select', event => {
|
||||
event.type === 'select';
|
||||
});
|
||||
calendar.on('select:start', event => {
|
||||
event.type === 'select:start';
|
||||
});
|
||||
Vendored
+472
@@ -0,0 +1,472 @@
|
||||
// Type definitions for bulma-calendar 6.0
|
||||
// Project: https://creativebulma.net/product/calendar/demo
|
||||
// Definitions by: Remco Haszing <https://github.com/remcohaszing>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// Minimum TypeScript Version: 3.6
|
||||
|
||||
export interface BulmaCalendarOptions {
|
||||
/**
|
||||
* Component type
|
||||
*
|
||||
* @default 'datetime'
|
||||
*/
|
||||
type?: 'date' | 'time' | 'datetime';
|
||||
|
||||
/**
|
||||
* Picker dominant color
|
||||
*
|
||||
* @default 'primary'
|
||||
*/
|
||||
color?: string;
|
||||
|
||||
/**
|
||||
* Range capability (start and end date/time selection
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
isRange?: boolean;
|
||||
|
||||
/**
|
||||
* Possibility to select same date as start and end date in range mode
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
allowSameDayRange?: boolean;
|
||||
|
||||
/**
|
||||
* Display lang (from language supported by date-fns)
|
||||
*
|
||||
* @default navigator.language.substring(0, 2) || "en"
|
||||
*/
|
||||
lang?: string;
|
||||
|
||||
/**
|
||||
* Date format pattern
|
||||
*
|
||||
* @default 'MM/DD/YYYY'
|
||||
*/
|
||||
dateFormat?: string;
|
||||
|
||||
/**
|
||||
* Time format pattern
|
||||
*
|
||||
* @default 'HH:mm'
|
||||
*/
|
||||
timeFormat?: string;
|
||||
|
||||
/**
|
||||
* Display mode
|
||||
*
|
||||
* @default 'default'
|
||||
*/
|
||||
displayMode?: 'default' | 'dialog' | 'inline';
|
||||
|
||||
/**
|
||||
* @default 'auto'
|
||||
*/
|
||||
position?: string;
|
||||
|
||||
/**
|
||||
* Show/Hide header block (with current selection)
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
showHeader?: boolean;
|
||||
|
||||
/**
|
||||
* Header block position
|
||||
*
|
||||
* @default 'top'
|
||||
*/
|
||||
headerPosition?: 'top' | 'bottom';
|
||||
|
||||
/**
|
||||
* Show/Hide footer block
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
showFooter?: boolean;
|
||||
|
||||
/**
|
||||
* Show/Hide buttons
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
showButtons?: boolean;
|
||||
|
||||
/**
|
||||
* Show/Hide Today Button
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
showTodayButton?: boolean;
|
||||
|
||||
/**
|
||||
* Show/Hide Clear Button
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
showClearButton?: boolean;
|
||||
|
||||
/**
|
||||
* Cancel button label
|
||||
*
|
||||
* @default 'Cancel'
|
||||
*/
|
||||
cancelLabel?: string;
|
||||
|
||||
/**
|
||||
* Clear button label
|
||||
*
|
||||
* @default 'Clear'
|
||||
*/
|
||||
clearLabel?: string;
|
||||
|
||||
/**
|
||||
* Today button label
|
||||
*
|
||||
* @default 'Today'
|
||||
*/
|
||||
todayLabel?: string;
|
||||
|
||||
/**
|
||||
* Now button label
|
||||
*
|
||||
* @default 'Now'
|
||||
*/
|
||||
nowLabel?: string;
|
||||
|
||||
/**
|
||||
* Validate button label
|
||||
*
|
||||
* @default 'Validate'
|
||||
*/
|
||||
validateLabel?: string;
|
||||
|
||||
/**
|
||||
* Enable/disable month switch
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
enableMonthSwitch?: boolean;
|
||||
|
||||
/**
|
||||
* Enable/disable year switch
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
enableYearSwitch?: boolean;
|
||||
|
||||
/**
|
||||
* Pre-selected start date
|
||||
*/
|
||||
startDate?: Date;
|
||||
|
||||
/**
|
||||
* Pre-selected end date
|
||||
*/
|
||||
endDate?: Date;
|
||||
|
||||
/**
|
||||
* Minimum date allowed
|
||||
*/
|
||||
minDate?: Date;
|
||||
|
||||
/**
|
||||
* Maximum date allowed
|
||||
*/
|
||||
maxDate?: Date;
|
||||
|
||||
/**
|
||||
* List of disabled dates
|
||||
*/
|
||||
disabledDates?: any[];
|
||||
|
||||
/**
|
||||
* List of disabled week days
|
||||
*/
|
||||
disabledWeekDays?: string | any[];
|
||||
|
||||
/**
|
||||
* Default weekstart day number
|
||||
*
|
||||
* @default 0 // sunday
|
||||
*/
|
||||
weekStart?: number;
|
||||
|
||||
/**
|
||||
* Pre-selected start time
|
||||
*/
|
||||
startTime?: Date;
|
||||
|
||||
/**
|
||||
* Pre-selected end time
|
||||
*/
|
||||
endTime?: Date;
|
||||
|
||||
/**
|
||||
* Steps for minutes selector
|
||||
*
|
||||
* @default 5
|
||||
*/
|
||||
minuteSteps?: number;
|
||||
|
||||
/**
|
||||
* From label
|
||||
*/
|
||||
labelFrom?: string;
|
||||
|
||||
/**
|
||||
* To label
|
||||
*/
|
||||
labelTo?: string;
|
||||
|
||||
/**
|
||||
* Close picker on overlay click (only for dialog display style)
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
closeOnOverlayClick?: boolean;
|
||||
|
||||
/**
|
||||
* Automatically close the datePicker when date selected (or range date selected) - not available
|
||||
* for inline display style. If set to False then a validate button will be displayed into the
|
||||
* footer section.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
closeOnSelect?: boolean;
|
||||
|
||||
/**
|
||||
* Automatically open datepicker when click into input element
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
toggleOnInputClick?: boolean;
|
||||
|
||||
/**
|
||||
* Callback to trigger once picker initiated
|
||||
*/
|
||||
onReady?: () => void;
|
||||
icons?: {
|
||||
/**
|
||||
* Previous button icon
|
||||
*/
|
||||
previous?: string;
|
||||
|
||||
/**
|
||||
* Next button icon
|
||||
*/
|
||||
next?: string;
|
||||
|
||||
/**
|
||||
* Time icon
|
||||
*/
|
||||
time?: string;
|
||||
|
||||
/**
|
||||
* Date icon
|
||||
*/
|
||||
date?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export type EventType = 'show' | 'hide' | 'select' | 'select:start';
|
||||
|
||||
export interface Event<T extends EventType = EventType> {
|
||||
type: T;
|
||||
timeStamp: number;
|
||||
data: bulmaCalendar;
|
||||
}
|
||||
|
||||
export default class bulmaCalendar {
|
||||
// Custom EventEmitter implementation
|
||||
listenerCount(eventName: EventType): void;
|
||||
|
||||
removeListeners(eventName: EventType, middleware?: boolean): void;
|
||||
|
||||
middleware<T extends EventType>(eventName: T, fn: (event: Event<T>) => void): void;
|
||||
|
||||
removeMiddleware(eventName: EventType): void;
|
||||
|
||||
on<T extends EventType>(name: T, callback: (event: Event<T>) => void, once?: boolean): void;
|
||||
|
||||
once<T extends EventType>(name: T, callback: (event: Event<T>) => void): void;
|
||||
|
||||
emit(name: EventType, data: bulmaCalendar, silent?: boolean): void;
|
||||
|
||||
// Constructors
|
||||
constructor(selector: string | HTMLElement, options?: BulmaCalendarOptions);
|
||||
|
||||
static attach(selector?: string | HTMLElement, options?: BulmaCalendarOptions): bulmaCalendar[];
|
||||
|
||||
// Methods
|
||||
/**
|
||||
* Open date picker (not available with "inline" display style)
|
||||
*/
|
||||
show(): void;
|
||||
|
||||
/**
|
||||
* Close date picker (not available with "inline" display style)
|
||||
*/
|
||||
hide(): void;
|
||||
|
||||
/**
|
||||
* Check if date picker is open or not
|
||||
*
|
||||
* @returns True if date picker is open else False
|
||||
*/
|
||||
isOpen(): boolean;
|
||||
|
||||
/**
|
||||
* Check if current instance is a range date picker
|
||||
*
|
||||
* @returns True if the instance is a range date picker
|
||||
*/
|
||||
isRange(): boolean;
|
||||
|
||||
/**
|
||||
* Get the date picker value as formatted string if no parameter else set the passed value
|
||||
*
|
||||
* @param value Formatted date value if no parameter passed else null
|
||||
*
|
||||
* @returns Date picker selected date (if not range calendar then endDate is undefined)
|
||||
*/
|
||||
value(
|
||||
value?: string,
|
||||
): {
|
||||
startDate: Date;
|
||||
endDate?: Date;
|
||||
};
|
||||
|
||||
/**
|
||||
* Force calendar refresh
|
||||
*/
|
||||
refresh(): void;
|
||||
|
||||
/**
|
||||
* Force to set calendar data into UI inputs
|
||||
*/
|
||||
save(): void;
|
||||
|
||||
/**
|
||||
* Clear date selection (startDate and endDate are set to undefined)
|
||||
*/
|
||||
clear(): void;
|
||||
|
||||
// Getters
|
||||
/**
|
||||
* Get component instance ID
|
||||
*/
|
||||
get id(): any;
|
||||
|
||||
/**
|
||||
* Get active lang
|
||||
*/
|
||||
get lang(): string;
|
||||
|
||||
/**
|
||||
* Set component lang
|
||||
*/
|
||||
set lang(lang: string);
|
||||
|
||||
/**
|
||||
* Get selected date
|
||||
*/
|
||||
get date(): { start?: Date; end?: Date };
|
||||
|
||||
/**
|
||||
* Set date
|
||||
*/
|
||||
set date(date: { start?: Date; end?: Date });
|
||||
|
||||
/**
|
||||
* Get selected start date
|
||||
*/
|
||||
get startDate(): Date;
|
||||
|
||||
/**
|
||||
* Se start date
|
||||
*/
|
||||
set startDate(startDate: Date);
|
||||
|
||||
/**
|
||||
* Get selected end date
|
||||
*/
|
||||
get endDate(): Date;
|
||||
|
||||
/**
|
||||
* Set end date
|
||||
*/
|
||||
set endDate(endDate: Date);
|
||||
|
||||
/**
|
||||
* Get min possible date
|
||||
*/
|
||||
get minDate(): Date;
|
||||
|
||||
/**
|
||||
* Set min possible date
|
||||
*/
|
||||
set minDate(minDate: Date);
|
||||
|
||||
/**
|
||||
* Get max possible date
|
||||
*/
|
||||
get maxDate(): Date;
|
||||
|
||||
/**
|
||||
* Set max possible date
|
||||
*/
|
||||
set maxDate(maxDate: Date);
|
||||
|
||||
/**
|
||||
* Get date format pattern
|
||||
*/
|
||||
get dateFormat(): string;
|
||||
|
||||
/**
|
||||
* Set date format pattern
|
||||
*/
|
||||
set dateFormat(dateFormat: string);
|
||||
|
||||
/**
|
||||
* Get selected time
|
||||
*/
|
||||
get time(): Date;
|
||||
|
||||
/**
|
||||
* Set time
|
||||
*/
|
||||
set time(time: Date);
|
||||
|
||||
/**
|
||||
* Get selected start time
|
||||
*/
|
||||
get startTime(): Date;
|
||||
|
||||
/**
|
||||
* Set start time
|
||||
*/
|
||||
set startTime(startTime: Date);
|
||||
|
||||
/**
|
||||
* Get selected end time
|
||||
*/
|
||||
get endTime(): Date;
|
||||
|
||||
/**
|
||||
* Set end time
|
||||
*/
|
||||
set endTime(endTime: Date);
|
||||
|
||||
/**
|
||||
* Get time format pattern
|
||||
*/
|
||||
get timeFormat(): string;
|
||||
|
||||
/**
|
||||
* Set time format pattern
|
||||
*/
|
||||
set timeFormat(timeFormat: string);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"dom",
|
||||
"es6"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictFunctionTypes": true,
|
||||
"strictNullChecks": true,
|
||||
"baseUrl": "../",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"bulma-calendar-tests.ts"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
Reference in New Issue
Block a user