62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import * as React from "react";
|
|
import { DatePicker as AntDatePicker } from "antd";
|
|
import * as dayjs from 'dayjs';
|
|
import { SizeType } from "antd/es/config-provider/SizeContext";
|
|
|
|
export interface IMonthPickerProps {
|
|
/** Allow deselecting */
|
|
allowClear?: boolean;
|
|
|
|
/** Disable item */
|
|
disabled?: boolean;
|
|
|
|
/** Specify dates that cannot be selected */
|
|
disabledDate?: (current: dayjs.Dayjs | null) => boolean;
|
|
|
|
/** Displayed in the input box and the selected date when the picker is opened */
|
|
defaultValue?: dayjs.Dayjs;
|
|
|
|
/** The selected date when the picker is opened. Overridden by defaultValue */
|
|
defaultPickerValue?: dayjs.Dayjs;
|
|
|
|
/** Input placeholder */
|
|
placeholder?: string;
|
|
|
|
/** Selected month */
|
|
value?: dayjs.Dayjs;
|
|
|
|
/** Called on month change */
|
|
onChange?: (date: dayjs.Dayjs | null, dateString: string | string[]) => void;
|
|
|
|
/** Input width. Default is "100%" */
|
|
width?: number | string;
|
|
|
|
/** Used to remove the border. Defaults to true */
|
|
bordered?: boolean;
|
|
|
|
/** Format of the selected month. Defaults to MMM YYYY */
|
|
format?: string;
|
|
|
|
/** Default is normal */
|
|
size?: "dense" | "normal";
|
|
}
|
|
|
|
/**
|
|
* @beta
|
|
*/
|
|
const MonthPicker: React.FC<IMonthPickerProps> = (props: IMonthPickerProps) => {
|
|
const { width = "100%", placeholder = "", format = "MMM YYYY", size, ...validProps } = props;
|
|
const style = { width };
|
|
|
|
let sizeType: SizeType = 'middle';
|
|
if (size && size == "dense") {
|
|
sizeType = 'small';
|
|
}
|
|
|
|
return (
|
|
<AntDatePicker.MonthPicker {...validProps} changeOnBlur format={format} placeholder={placeholder} style={style} size={sizeType}>
|
|
</AntDatePicker.MonthPicker>
|
|
);
|
|
};
|
|
|
|
export default MonthPicker; |