117 lines
3.9 KiB
TypeScript
117 lines
3.9 KiB
TypeScript
import * as React from "react";
|
|
import { DatePicker as AntDatePicker } from "antd";
|
|
import * as dayjs from 'dayjs';
|
|
import intlService, { DateTimeFormat } from '@strata/intl/lib';
|
|
import enUSLocale from 'antd/lib/date-picker/locale/en_US';
|
|
import enGBIELocale from 'antd/lib/date-picker/locale/en_GB';
|
|
import ArrowRightOutlined from "@ant-design/icons/ArrowRightOutlined";
|
|
import { SizeType } from "antd/es/config-provider/SizeContext";
|
|
import { RangeValueType } from 'rc-picker/lib/PickerInput/RangePicker';
|
|
|
|
export type RangeValue = RangeValueType<dayjs.Dayjs>;
|
|
|
|
export interface IRangePickerProps {
|
|
/** Allow deselecting */
|
|
allowClear?: boolean;
|
|
|
|
/** Allow start or end input leave empty */
|
|
allowEmpty?: [boolean, boolean];
|
|
|
|
/** Get focus and open the date picker on load */
|
|
autoFocus?: boolean;
|
|
|
|
/** Disable item */
|
|
disabled?: [boolean, 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?: RangeValue;
|
|
|
|
/** The selected date when the picker is opened. Overridden by defaultValue */
|
|
defaultPickerValue?: [dayjs.Dayjs, dayjs.Dayjs];
|
|
|
|
/** Format string for date. L for short date, ll for long date string. Defaults to ll for date picker. */
|
|
format?: "L" | "ll" | string;
|
|
|
|
/** Input placeholder */
|
|
placeholder?: [string, string];
|
|
|
|
/** Selected date */
|
|
value?: RangeValue;
|
|
|
|
/** Preset ranges for quick selection */
|
|
ranges?: Record<string, [dayjs.Dayjs, dayjs.Dayjs] | (() => [dayjs.Dayjs, dayjs.Dayjs])>;
|
|
|
|
/** Called on date change */
|
|
onChange?: (values: RangeValue, formatString: [string, string]) => void;
|
|
|
|
/** Called when input gains focus */
|
|
onFocus?: React.FocusEventHandler<HTMLInputElement>;
|
|
|
|
/** Input width. Default is "100%"" */
|
|
width?: number | string;
|
|
|
|
/** Used to remove the border. Defaults to true */
|
|
bordered?: boolean;
|
|
|
|
/** To determine the size of the input box. Defaults to normal */
|
|
size?: "dense" | "normal" | "large";
|
|
|
|
/** Picker type. Defaults to date */
|
|
picker?: "date" | "week" | "month" | "quarter" | "year";
|
|
}
|
|
|
|
|
|
/**
|
|
* @beta
|
|
*/
|
|
const RangePicker: React.FC<IRangePickerProps> = (props: IRangePickerProps) => {
|
|
let { width = "100%", placeholder = ["", ""], autoFocus = false, format, picker = 'date', allowClear = false, size = "normal", onFocus, onChange, ...validProps } = props;
|
|
const style = { width };
|
|
|
|
//get the locale from strata/intl service and use that to configure datepicker formatting
|
|
const language = (intlService.getCulture() || 'en-US');
|
|
const locale = language === 'en-GB' ? enGBIELocale : language === 'en-IE' ? enGBIELocale : enUSLocale;
|
|
|
|
if (picker === 'date') {
|
|
// need to get actual format string because ant doesn't understand ll and L
|
|
if (format === 'll' || format === 'L' || format == null) {
|
|
const dateFormat: DateTimeFormat = (format === 'L') ? 'date' : 'dateLong';
|
|
format = intlService.getDateFormatString(dateFormat);
|
|
}
|
|
}
|
|
if (picker === 'month' && format == null) {
|
|
format = 'MM/YYYY';
|
|
}
|
|
|
|
// default open when auto focus is set
|
|
Object.assign(validProps, {
|
|
autoFocus: autoFocus,
|
|
allowClear: allowClear,
|
|
defaultOpen: autoFocus // internal rc-datepicker prop
|
|
});
|
|
|
|
let sizeType: SizeType = 'middle';
|
|
if (size != "normal") {
|
|
sizeType = size === 'dense' ? "small" : "large";
|
|
}
|
|
|
|
return (
|
|
<AntDatePicker.RangePicker
|
|
{...validProps}
|
|
onFocus={(e) => onFocus && onFocus(e as React.FocusEvent<HTMLInputElement>)}
|
|
onChange={(dates, dateString) => onChange && onChange(dates as RangeValue, dateString)}
|
|
picker={picker}
|
|
format={format}
|
|
placeholder={placeholder}
|
|
style={style}
|
|
separator={<ArrowRightOutlined></ArrowRightOutlined>}
|
|
size={sizeType}
|
|
locale={locale} >
|
|
</AntDatePicker.RangePicker>
|
|
);
|
|
};
|
|
|
|
export default RangePicker; |