222 lines
4.8 KiB
TypeScript
222 lines
4.8 KiB
TypeScript
import * as React from "react";
|
|
import ReactToolbox from "../index";
|
|
|
|
export interface DatePickerTheme {
|
|
/**
|
|
* Used for the active day and year.
|
|
*/
|
|
active?: string;
|
|
/**
|
|
* Used for the buttons in the dialog.
|
|
*/
|
|
button?: string;
|
|
/**
|
|
* Used for the calendar root element.
|
|
*/
|
|
calendar?: string;
|
|
/**
|
|
* Used as wrapper for the calendar component inside dialog.
|
|
*/
|
|
calendarWrapper?: string;
|
|
/**
|
|
* Used for the date element inside header.
|
|
*/
|
|
date?: string;
|
|
/**
|
|
* Used for the day element inside the calendar.
|
|
*/
|
|
day?: string;
|
|
/**
|
|
* Used for the list of days inside a month.
|
|
*/
|
|
days?: string;
|
|
/**
|
|
* Used for the dialog component.
|
|
*/
|
|
dialog?: string;
|
|
/**
|
|
* Added to day element when day is disabled.
|
|
*/
|
|
disabled?: string;
|
|
/**
|
|
* Used for the dialog header,.
|
|
*/
|
|
header?: string;
|
|
/**
|
|
* Used for Input element that opens the picker.
|
|
*/
|
|
input?: string;
|
|
/**
|
|
* Used for the month root element.
|
|
*/
|
|
month?: string;
|
|
/**
|
|
* Added to the root dialog when months are displayed.
|
|
*/
|
|
monthsDisplay?: string;
|
|
/**
|
|
* Used for the next month icon.
|
|
*/
|
|
next?: string;
|
|
/**
|
|
* Used for the prev month icon.
|
|
*/
|
|
prev?: string;
|
|
/**
|
|
* Used for the month title element.
|
|
*/
|
|
title?: string;
|
|
/**
|
|
* Used for the weekdays wrapper.
|
|
*/
|
|
week?: string;
|
|
/**
|
|
* Used for the year element inside header.
|
|
*/
|
|
year?: string;
|
|
/**
|
|
* Used for the years list in years view.
|
|
*/
|
|
years?: string;
|
|
/**
|
|
* Added to the root dialog when years are displayed.
|
|
*/
|
|
yearsDisplay?: string;
|
|
}
|
|
|
|
export interface DatePickerProps extends ReactToolbox.Props {
|
|
/**
|
|
* Allows to control if the picker should be shown from outside. Beware you should update the prop when the Dialog is closed.
|
|
* @default false
|
|
*/
|
|
active?: boolean;
|
|
/**
|
|
* Automatically selects a date upon clicking on a day
|
|
* @default false
|
|
*/
|
|
autoOk?: boolean;
|
|
/**
|
|
* Label used for cancel button on Dialog.
|
|
* @default "Cancel"
|
|
*/
|
|
cancelLabel?: string;
|
|
/**
|
|
* An array of date objects which will be disabled in the calendar. All other dates will be enabled.
|
|
*/
|
|
disabledDates?: Date[];
|
|
/**
|
|
* An array of date objects which will be enabled in the calendar. All other dates will be disabled.
|
|
*/
|
|
enabledDates?: Date[];
|
|
/**
|
|
* Give an error node to display under the field.
|
|
*/
|
|
error?: string;
|
|
/**
|
|
* A key to identify an Icon from Material Design Icons or a custom Icon Element.
|
|
*/
|
|
icon?: React.ReactNode | string;
|
|
/**
|
|
* This class will be applied to Input component of DatePicker.
|
|
*/
|
|
inputClassName?: string;
|
|
/**
|
|
* Function to format the date displayed on the input.
|
|
*/
|
|
inputFormat?: Function;
|
|
/**
|
|
* The text string to use for the floating label element in the input component.
|
|
*/
|
|
label?: string;
|
|
/**
|
|
* Sets locale for the Dialog.
|
|
* @default "en"
|
|
*/
|
|
locale?: "de" | "no" | "en" | "es" | "af" | "ar" | "be" | "bg" | "bn" | "bo" | "br" | "bs" | "ca" | "gl" | "eu" | "pt" | "it" | "fr" | "ru" | "ua" | DatePickerLocale;
|
|
/**
|
|
* Date object with the maximum selectable date.
|
|
*/
|
|
maxDate?: Date;
|
|
/**
|
|
* Date object with the minimum selectable date.
|
|
*/
|
|
minDate?: Date;
|
|
/**
|
|
* Name for the input field.
|
|
*/
|
|
name?: string;
|
|
/**
|
|
* Label used for 'OK' button on Dialog.
|
|
* @default "Ok"
|
|
*/
|
|
okLabel?: string;
|
|
/**
|
|
* Callback called when the picker value is changed.
|
|
*/
|
|
onChange?: Function;
|
|
/**
|
|
* Callback fired on Input click.
|
|
*/
|
|
onClick?: Function;
|
|
/**
|
|
* Callback fired after dismissing the Dialog.
|
|
*/
|
|
onDismiss?: Function;
|
|
/**
|
|
* Callback called when the ESC key is pressed with the overlay active.
|
|
*/
|
|
onEscKeyDown?: Function;
|
|
/**
|
|
* Callback invoked on Input key press.
|
|
*/
|
|
onKeyPress?: Function;
|
|
/**
|
|
* Callback to be invoked when the dialog overlay is clicked.
|
|
*/
|
|
onOverlayClick?: Function;
|
|
/**
|
|
* The input element will be readonly and look like disabled.
|
|
*/
|
|
readonly?: boolean;
|
|
/**
|
|
* Set week's first day to Sunday. Default week's first day is Monday.
|
|
* @default false
|
|
*/
|
|
sundayFirstDayOfWeek?: boolean;
|
|
/**
|
|
* Classnames object defining the component style.
|
|
*/
|
|
theme?: DatePickerTheme;
|
|
/**
|
|
* Date object with the currently selected date.
|
|
*/
|
|
value?: Date | string;
|
|
}
|
|
|
|
export interface DatePickerLocale {
|
|
/**
|
|
* Month names.
|
|
*/
|
|
months?: string[];
|
|
/**
|
|
* Month short names.
|
|
*/
|
|
monthsShort?: string[];
|
|
/**
|
|
* Day names starting from Sunday.
|
|
*/
|
|
weekdays?: string[];
|
|
/**
|
|
* Day short names starting from Sunday.
|
|
*/
|
|
weekdaysShort?: string[];
|
|
/**
|
|
* Day letters starting from Sunday.
|
|
*/
|
|
weekdaysLetter?: string[];
|
|
}
|
|
|
|
export class DatePicker extends React.Component<DatePickerProps, {}> { }
|
|
|
|
export default DatePicker;
|