+
+
+ {translations?.start ?? "Start"}:
+
+ onTimeChange(v, "start")}
+ aria-label="Start date time"
+ isDisabled={!range?.from}
+ isRequired={props.required}
+ />
+
+
+
+
+ {translations?.end ?? "End"}:
+
+ onTimeChange(v, "end")}
+ aria-label="End date time"
+ isDisabled={!range?.to}
+ isRequired={props.required}
+ />
+
+
-
+
{translations?.range ?? "Range"}:
{" "}
diff --git a/src/components/DatePicker/changelog.md b/src/components/DatePicker/changelog.md
index 90851cc..d6d68f1 100644
--- a/src/components/DatePicker/changelog.md
+++ b/src/components/DatePicker/changelog.md
@@ -1,5 +1,11 @@
# Tremor Raw Date Picker Changelog
+## 1.0.0
+
+### Changes
+
+* New: Add time functionality (showTimePicker)
+
## 0.0.1
### Changes
diff --git a/src/components/DatePicker/datepicker.spec.ts b/src/components/DatePicker/datepicker.spec.ts
index 086af77..5a67d8f 100644
--- a/src/components/DatePicker/datepicker.spec.ts
+++ b/src/components/DatePicker/datepicker.spec.ts
@@ -115,6 +115,25 @@ test.describe("Expect date picker single", () => {
.getByLabel("Select A year from now"),
).toBeVisible()
})
+ test("with time to be rendered", async ({ page }) => {
+ await page.goto(
+ "http://localhost:6006/?path=/story/ui-datepicker--controlled-time",
+ )
+ await page
+ .frameLocator('iframe[title="storybook-preview-iframe"]')
+ .getByRole("button", { name: "Select date" })
+ .click()
+ await expect(
+ page
+ .frameLocator('iframe[title="storybook-preview-iframe"]')
+ .getByLabel("hour, Time"),
+ ).toBeVisible()
+ await expect(
+ page
+ .frameLocator('iframe[title="storybook-preview-iframe"]')
+ .getByLabel("minute, Time"),
+ ).toBeVisible()
+ })
})
test.describe("Expect date picker range", () => {
@@ -248,4 +267,33 @@ test.describe("Expect date picker range", () => {
.getByLabel("Year to date"),
).toBeVisible()
})
+ test("with time to be rendered", async ({ page }) => {
+ await page.goto(
+ "http://localhost:6006/?path=/story/ui-daterangepicker--controlled-time-range",
+ )
+ await page
+ .frameLocator('iframe[title="storybook-preview-iframe"]')
+ .getByRole("button", { name: "Select date" })
+ .click()
+ await expect(
+ page
+ .frameLocator('iframe[title="storybook-preview-iframe"]')
+ .getByLabel("hour, Start date time"),
+ ).toBeVisible()
+ await expect(
+ page
+ .frameLocator('iframe[title="storybook-preview-iframe"]')
+ .getByLabel("minute, Start date time"),
+ ).toBeVisible()
+ await expect(
+ page
+ .frameLocator('iframe[title="storybook-preview-iframe"]')
+ .getByLabel("hour, End date time"),
+ ).toBeVisible()
+ await expect(
+ page
+ .frameLocator('iframe[title="storybook-preview-iframe"]')
+ .getByLabel("minute, End date time"),
+ ).toBeVisible()
+ })
})
diff --git a/src/components/DatePicker/datepicker.stories.tsx b/src/components/DatePicker/datepicker.stories.tsx
index 4ff9065..07e71b1 100644
--- a/src/components/DatePicker/datepicker.stories.tsx
+++ b/src/components/DatePicker/datepicker.stories.tsx
@@ -70,6 +70,10 @@ export const SingleWithPresets: Story = {
},
}
+export const ShowTimePicker: Story = {
+ args: { showTimePicker: true },
+}
+
export const Localized: Story = {
args: {
placeholder: "Choisissez une date",
@@ -122,7 +126,7 @@ const ControlledDemo = () => {
return (
<>
- {value ? value.toDateString() : "Select a date"}
+ {value ? value.toString() : "Select a date"}
,
}
+const ControlledTimeDemo = () => {
+ const [value, setValue] = React.useState(undefined)
+
+ return (
+ <>
+
+ {value ? value.toString() : "Select a date"}
+
+
+ {
+ setValue(value)
+ }}
+ />
+
+
+
+
+ )
+}
+
+export const ControlledTime: Story = {
+ render: () => ,
+}
+
type PopoverNestedProps = {
value?: Date
onChange?: (value: Date | undefined) => void
@@ -173,10 +209,10 @@ const PopoverNested = ({ value, onChange }: PopoverNestedProps) => {
}
export const AlignEnd: Story = {
- args: {align: "end"},
+ args: { align: "end" },
parameters: {
- layout: "centered"
- }
+ layout: "centered",
+ },
}
const PopoverNestedDemo = () => {
diff --git a/src/components/DatePicker/daterangepicker.stories.tsx b/src/components/DatePicker/daterangepicker.stories.tsx
index 7191e65..d825ec5 100644
--- a/src/components/DatePicker/daterangepicker.stories.tsx
+++ b/src/components/DatePicker/daterangepicker.stories.tsx
@@ -82,6 +82,10 @@ export const WithYearNavigation: Story = {
},
}
+export const ShowTimePicker: Story = {
+ args: { showTimePicker: true },
+}
+
export const RangeWithPresets: Story = {
args: {
presets: rangePresets,
@@ -154,10 +158,10 @@ export const Localized: Story = {
}
export const AlignEnd: Story = {
- args: {align: "end"},
+ args: { align: "end" },
parameters: {
- layout: "centered"
- }
+ layout: "centered",
+ },
}
const ControlledRangeDemo = () => {
@@ -168,18 +172,83 @@ const ControlledRangeDemo = () => {
}, [value])
return (
-
- {
- setValue(value)
- }}
- />
-
-
+ <>
+
+ {value
+ ? `${value.from?.toDateString()} – ${value.to?.toDateString()}`
+ : "Select a date"}
+
+
+ {
+ setValue(value)
+ }}
+ />
+
+
+
+
)
}
export const ControlledRange: Story = {
render: () => ,
}
+
+const ControlledTimeRangeDemo = () => {
+ const [value, setValue] = React.useState(undefined)
+
+ React.useEffect(() => {
+ console.log("Value changed: ", value)
+ }, [value])
+
+ return (
+ <>
+
+ {value
+ ? `${value.from?.toString()} – ${value.to?.toString()}`
+ : "Select a date"}
+
+
+ {
+ setValue(value)
+ }}
+ />
+
+
+
+
+ )
+}
+
+export const ControlledTimeRange: Story = {
+ render: () => ,
+}