DatePicker: add option to return the string value

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/)                              |
 

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",

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 (
+    <Formik initialValues={{ dateField: initialDate }} onSubmit={onSubmit}>
+      <Form>
+        <Form.Item label='date field' htmlFor='dateField' name='dateField' validate={validate}>
+          <DatePicker name='dateField' placeholder='date field' useStringValue={useStringValue} />
+        </Form.Item>
+        <SubmitButton>Submit</SubmitButton>
+      </Form>
+    </Formik>
+  )
+}
+
+test('should set date as string', async () => {
+
+  let formData: FormInputModelWithStringDate;
+
+  const onSubmit = async (values: FormInputModelWithStringDate) => {
+    formData = values;
+  }
+
+  const { getByLabelText, getByText } = render(<Container useStringValue={true} onSubmit={onSubmit} />)
+  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(<Container useStringValue={false} onSubmit={onSubmit} />)
+  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())
+})
+

src/date-picker/index.tsx

@@ -18,14 +18,18 @@ const {
 } = $DatePicker
 
 export type DatePickerProps = $DatePickerProps &
-  FormikFieldProps & { keepOffset?: boolean }
+  FormikFieldProps & { 
+    keepOffset?: boolean,
+    useStringValue?: boolean 
+  }
 
 export const DatePicker = ({
   name,
   validate,
   onChange,
   fast,
   keepOffset,
+  useStringValue,
   ...restProps
 }: DatePickerProps) => (
   <Field name={name} validate={validate} fast={fast}>
@@ -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)
         }}