diff --git a/README.md b/README.md
index 231d609..22d1993 100644
--- a/README.md
+++ b/README.md
@@ -66,7 +66,7 @@ Add `import "antd/dist/antd.css"` to your `index.js` file or check the [Advanced
| :white_check_mark: | Cascader | { name, validate?, fast? } & [CascaderProps](https://ant.design/components/cascader/) |
| :white_check_mark: | Checkbox | { name, validate?, fast? } & [CheckboxProps](https://ant.design/components/checkbox/) |
| :white_check_mark: | Checkbox.Group | { name, validate?, fast? } & [CheckboxGroupProps](https://ant.design/components/checkbox/#Checkbox-Group) |
-| :white_check_mark: | DatePicker | { name, validate?, fast? } & [DatePickerProps](https://ant.design/components/date-picker/) |
+| :white_check_mark: | DatePicker | { name, validate?, fast?, keepOffset?, useStringValue? } & [DatePickerProps](https://ant.design/components/date-picker/) |
| :white_check_mark: | DatePicker.WeekPicker | { name, validate?, fast? } & [WeekPickerProps](https://ant.design/components/date-picker/#WeekPicker) |
| :white_check_mark: | DatePicker.RangePicker | { name, validate?, fast? } & [RangePickerProps](https://ant.design/components/date-picker/#RangePicker) |
| :white_check_mark: | DatePicker.MonthPicker | { name, validate?, fast? } & [MonthPickerProps](https://ant.design/components/date-picker/#MonthPicker) |
@@ -81,7 +81,7 @@ Add `import "antd/dist/antd.css"` to your `index.js` file or check the [Advanced
| :white_check_mark: | Slider | { name, validate?, fast? } & [SliderProps](https://ant.design/components/slider/) |
| :white_check_mark: | Switch | { name, validate?, fast? } & [SwitchProps](https://ant.design/components/switch/) |
| :white_check_mark: | Table | { name, fast? } & [TableProps](https://ant.design/components/table/) |
-| :white_check_mark: | TimePicker | { name, validate?, fast? } & [TimePickerProps](https://ant.design/components/input/#components-input-demo-textarea) |
+| :white_check_mark: | TimePicker | { name, validate?, fast?, keepOffset? } & [TimePickerProps](https://ant.design/components/input/#components-input-demo-textarea) |
| :white_check_mark: | Transfer | { name, validate?, fast? } & [TransferProps](https://ant.design/components/transfer/) |
| :white_check_mark: | TreeSelect | { name, validate?, fast? } & [TreeSelectProps](https://ant.design/components/tree-select/) |
diff --git a/package-lock.json b/package-lock.json
index 9d3b3eb..d86976f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -894,6 +894,26 @@
}
}
},
+ "@testing-library/user-event": {
+ "version": "12.6.0",
+ "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.6.0.tgz",
+ "integrity": "sha512-FNEH/HLmOk5GO70I52tKjs7WvGYckeE/SrnLX/ip7z2IGbffyd5zOUM1tZ10vsTphqm+VbDFI0oaXu0wcfQsAQ==",
+ "dev": true,
+ "requires": {
+ "@babel/runtime": "^7.12.5"
+ },
+ "dependencies": {
+ "@babel/runtime": {
+ "version": "7.12.5",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
+ "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
+ "dev": true,
+ "requires": {
+ "regenerator-runtime": "^0.13.4"
+ }
+ }
+ }
+ },
"@types/aria-query": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.0.tgz",
diff --git a/package.json b/package.json
index cf7bec9..d82bdfe 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
"devDependencies": {
"@testing-library/jest-dom": "5.11.6",
"@testing-library/react": "11.2.2",
+ "@testing-library/user-event": "^12.6.0",
"@types/jest": "26.0.19",
"@types/node": "14.14.13",
"@types/react": "17.0.0",
@@ -53,12 +54,12 @@
"formik": "2.2.6",
"jest": "26.6.3",
"moment": "2.29.1",
+ "prettier": "2.2.1",
"react": "17.0.1",
"react-dom": "17.0.1",
"ts-jest": "26.4.4",
"tslib": "2.0.3",
- "typescript": "4.1.3",
- "prettier": "2.2.1"
+ "typescript": "4.1.3"
},
"repository": {
"type": "git",
diff --git a/src/date-picker/datepicker.test.tsx b/src/date-picker/datepicker.test.tsx
new file mode 100644
index 0000000..0702b53
--- /dev/null
+++ b/src/date-picker/datepicker.test.tsx
@@ -0,0 +1,109 @@
+import '@testing-library/jest-dom/extend-expect'
+import React from 'react'
+import { Formik } from 'formik'
+import userEvent from '@testing-library/user-event'
+import { render, fireEvent, waitFor, waitForDomChange } from '@testing-library/react'
+import Form from '../form/form'
+import { DatePicker } from '.'
+import { SubmitButton } from '../submit-button'
+import { act } from 'react-dom/test-utils'
+import moment from 'moment'
+
+interface FormInputModelWithStringDate {
+ dateField: string
+}
+
+interface FormInputModelWithDateObject {
+ dateField: Date
+}
+
+const initialDate = new Date();
+initialDate.setUTCFullYear(2035);
+initialDate.setUTCMonth(5);
+initialDate.setUTCDate(15);
+initialDate.setUTCHours(0);
+initialDate.setUTCMinutes(0);
+initialDate.setUTCSeconds(0);
+initialDate.setUTCMilliseconds(0);
+
+const Container = ({
+ validate,
+ useStringValue,
+ onSubmit
+}: {
+ validate?: any
+ useStringValue?: boolean,
+ onSubmit: (values: any) => void
+}) => {
+ return (
+
+
+
+ )
+}
+
+test('should set date as string', async () => {
+
+ let formData: FormInputModelWithStringDate;
+
+ const onSubmit = async (values: FormInputModelWithStringDate) => {
+ formData = values;
+ }
+
+ const { getByLabelText, getByText } = render()
+ await act(async () => {
+ fireEvent.focus(getByLabelText('date field'))
+ await waitForDomChange()
+ fireEvent.click(getByText('Today'))
+ await waitForDomChange()
+ userEvent.click(getByText('Submit'))
+ })
+
+ const result = await waitFor(() => {
+ if (formData) {
+ return formData
+ }
+ else {
+ return Promise.reject()
+ }
+ })
+
+ expect(result.dateField).toBe(moment().format("YYYY-MM-DD"));
+})
+
+test('should set date as Date object', async () => {
+
+ let formData: FormInputModelWithDateObject
+
+ const onSubmit = async (values: FormInputModelWithDateObject) => {
+ formData = values
+ }
+
+ const { getByPlaceholderText, getByLabelText, getByText } = render()
+ const datePicker = getByPlaceholderText('date field')
+ await act(async () => {
+ fireEvent.focus(getByLabelText('date field'))
+ await waitForDomChange()
+ fireEvent.click(getByText('Today'))
+ await waitForDomChange()
+ userEvent.click(getByText('Submit'))
+ })
+
+ const result = await waitFor(() => {
+ if (formData) {
+ return formData
+ }
+ else {
+ return Promise.reject()
+ }
+ })
+ expect(new Date(result.dateField).getUTCFullYear()).toBe(new Date().getUTCFullYear())
+ expect(new Date(result.dateField).getUTCMonth()).toBe(new Date().getUTCMonth())
+ expect(new Date(result.dateField).getUTCDate()).toBe(new Date().getUTCDate())
+})
+
diff --git a/src/date-picker/index.tsx b/src/date-picker/index.tsx
index 54a5e5c..4c99b3a 100644
--- a/src/date-picker/index.tsx
+++ b/src/date-picker/index.tsx
@@ -18,7 +18,10 @@ const {
} = $DatePicker
export type DatePickerProps = $DatePickerProps &
- FormikFieldProps & { keepOffset?: boolean }
+ FormikFieldProps & {
+ keepOffset?: boolean,
+ useStringValue?: boolean
+ }
export const DatePicker = ({
name,
@@ -26,6 +29,7 @@ export const DatePicker = ({
onChange,
fast,
keepOffset,
+ useStringValue,
...restProps
}: DatePickerProps) => (
@@ -36,7 +40,12 @@ export const DatePicker = ({
<$DatePicker
value={value ? moment(value) : undefined}
onChange={(date, dateString) => {
- setFieldValue(name, date ? date.toISOString(keepOffset) : null)
+ if (useStringValue) {
+ setFieldValue(name, dateString)
+ } else {
+ setFieldValue(name, date ? date.toISOString(keepOffset) : null)
+ }
+
setFieldTouched(name, true, false)
onChange && onChange(date, dateString)
}}