0.1.4 • Published 7 months ago
@temporal-picker/react v0.1.4
@temporal-picker/react
The DatePicker (RangePicker) component base on temporal-picker.
How to Use
Step 1.
npm i @temporal-picker/react
Step 2.
import { DatePicker, RangePicker } from "@temporal-picker/react";
function Demo() {
return (
<>
<DatePicker
value="2022-01-01"
onValueChange={(date) => {
console.log(date);
}}
/>
<RangePicker
start="2022-01-01"
end="2022-01-16"
onRangeChange={(start, end) => {
console.log(start, end);
}}
placement="bottom-end"
autoApply
resetButton
extraSelect
presets={[
{ label: "Preset 1", start: "2023-01-01", end: "2023-02-15" },
{ label: "Preset 2", start: "2023-01-01" },
]}
/>
</>
);
}
export default Demo;
Props
export type PickerProps = {
className?: string;
plain?: "date" | "time" | "datetime" | "month";
disabled?: boolean;
readonly?: boolean;
max?: string;
min?: string;
native?: boolean;
placement?: "bottom-start" | "bottom-end" | "bottom";
autoApply?: boolean;
resetButton?: boolean;
extraSelect?: boolean;
customLayout?: boolean;
firstDay?: number;
locale?: string;
localeApply?: string;
localeCancel?: string;
localeClear?: string;
rowHeader?: boolean;
pickLabel?: boolean;
testId?: string;
onViewChange?: (event: CustomEvent<ViewDetail>) => void;
};
export type PlainPickerProps = PickerProps & {
value?: string;
onValueChange?: (value: string) => void;
};
export type RangePickerProps = PickerProps & {
start?: string;
end?: string;
onRangeChange?: (start: string, end: string) => void;
presets?: {
label: string;
start?: string;
end?: string;
}[];
presetPosition?: "bottom" | "left" | "right" | "top";
tooltip?: boolean;
strict?: boolean;
reselect?: boolean;
};
0.1.4
7 months ago
0.1.3
9 months ago
0.1.2
10 months ago
0.1.1
10 months ago
0.1.0
10 months ago
0.0.17
10 months ago
0.0.16
10 months ago
0.0.15
10 months ago
0.0.14
10 months ago
0.0.13
10 months ago
0.0.12
10 months ago
0.0.11
10 months ago
0.0.10
10 months ago
0.0.9
10 months ago
0.0.8
10 months ago
0.0.7
10 months ago
0.0.6
10 months ago
0.0.5
10 months ago
0.0.4
11 months ago
0.0.3
11 months ago
0.0.2
11 months ago
0.0.1
11 months ago