80 lines
2.3 KiB
TypeScript
80 lines
2.3 KiB
TypeScript
import * as React from "react";
|
|
import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
|
|
import { DateInput, DateRangeInput } from "@blueprintjs/datetime";
|
|
import moment from "moment-timezone";
|
|
import "../../../../node_modules/@blueprintjs/datetime/lib/css/blueprint-datetime.css";
|
|
import { DatePickerType } from "widgets/DatePickerWidget";
|
|
|
|
class DatePickerComponent extends React.Component<DatePickerComponentProps> {
|
|
render() {
|
|
return this.props.datePickerType === "DATE_PICKER" ? (
|
|
<DateInput
|
|
formatDate={this.formatDate}
|
|
parseDate={this.parseDate}
|
|
placeholder={this.props.dateFormat}
|
|
disabled={this.props.isDisabled}
|
|
showActionsBar={true}
|
|
timePickerProps={
|
|
this.props.enableTimePicker
|
|
? {
|
|
useAmPm: true,
|
|
value: this.props.selectedDate || this.props.defaultDate,
|
|
showArrowButtons: true,
|
|
}
|
|
: undefined
|
|
}
|
|
closeOnSelection={true}
|
|
onChange={this.onDateSelected}
|
|
value={this.props.selectedDate || this.props.defaultDate}
|
|
/>
|
|
) : (
|
|
<DateRangeInput
|
|
allowSingleDayRange={true}
|
|
disabled={this.props.isDisabled}
|
|
contiguousCalendarMonths={false}
|
|
formatDate={this.formatDate}
|
|
minDate={this.props.minDate}
|
|
maxDate={this.props.maxDate}
|
|
closeOnSelection={true}
|
|
/>
|
|
);
|
|
}
|
|
|
|
formatDate = (date: Date): string => {
|
|
if (this.props.timezone) {
|
|
return moment(date)
|
|
.tz(this.props.timezone)
|
|
.format(this.props.dateFormat);
|
|
}
|
|
return moment(date).format(this.props.dateFormat);
|
|
};
|
|
|
|
parseDate = (dateStr: string): Date => {
|
|
if (this.props.timezone) {
|
|
return moment(dateStr)
|
|
.tz(this.props.timezone)
|
|
.toDate();
|
|
}
|
|
return moment(dateStr).toDate();
|
|
};
|
|
|
|
onDateSelected = (selectedDate: Date) => {
|
|
this.props.onDateSelected(selectedDate);
|
|
};
|
|
}
|
|
|
|
export interface DatePickerComponentProps extends ComponentProps {
|
|
label: string;
|
|
defaultDate?: Date;
|
|
dateFormat: string;
|
|
enableTimePicker?: boolean;
|
|
selectedDate?: Date;
|
|
minDate?: Date;
|
|
maxDate?: Date;
|
|
timezone?: string;
|
|
datePickerType: DatePickerType;
|
|
onDateSelected: (date: Date) => void;
|
|
}
|
|
|
|
export default DatePickerComponent;
|