--- nav: path: /components group: title: Information Entry order: 10 toc: 'content' --- # DatePicker Compared to native `my.datePicker`, to achieve the same iOS and Android experience. ## Introduction In `index.json` Introducing Components in ```json "usingComponents": { #if ALIPAY "ant-date-picker": "antd-mini/es/DatePicker/index", "ant-range-picker": "antd-mini/es/DatePicker/RangePicker/index" #endif #if WECHAT "ant-date-picker": "antd-mini/DatePicker/index", "ant-range-picker": "antd-mini/DatePicker/RangePicker/index" #endif } ``` ## Code Sample ### Basic use > `defaultValue` property is`dayjs` A timestamp or object that can be parsed. ```xml ``` ```js Page({ data: { min: new Date('2019/01/15').getTime(), max: new Date('2023/08/20').getTime(), defaultDate: new Date('2019/02/02').getTime(), }, handlePickerChange(date, dateStr, e) { console.log('onPickerChange', date, dateStr, e); }, handleTriggerPicker(visible, e) { console.log('onVisibleChange', visible, e); }, handleDismiss(e) { console.log('e', e); }, handleOk(date, format, e) { console.log('onOk', date, format, e); }, }); ``` ### precision control > `precision` Property to control the time precision of the selection.`format` property is used to format the displayed `value` Value. ```xml ``` ### Disable state > `disabled` Property is used to control the disabled state. ```xml ``` ### Customize the rendering of each column in the selection panel > Incoming Function `onFormatLabel` , the return value is the data you want to render for each column in the selection panel. ```xml ``` ```js Page({ data: { #if WECHAT handleFormatLabel(type, value) { return String(value); }, #endif }, handleFormatLabel(type, value) { return String(value); }, }); ``` ### Controlled Mode > control the selected value, which requires `value` property and `onOk` Events are used together. The control panel displays the closed state, which requires `visible` property and `onVisibleChange` Events are used together. ```xml ``` ```js Page({ data: { pickerVisible: false, pickerValue: new Date('2019/02/02').getTime(), }, handlePickerChange(date, dateStr, e) { console.log('onPickerChange', date, dateStr, e); }, handleControlledOk(value) { #if WECHAT this.setData({ // 微信只支持传递时间戳 pickerValue: value.detail.getTime(), }); #endif #if ALIPAY this.setData({ pickerValue: value, }); #endif }, handleTriggerControlledPicker(visible, e) { #if WECHAT console.log('handleTriggerControlledPicker', visible); this.setData({ pickerVisible: visible.detail, }); #endif #if ALIPAY console.log('handleTriggerControlledPicker', visible, e); this.setData({ pickerVisible: visible, }); #endif }, }); ``` ### Time Range Selection > Introduction `ant-range-picker` component, you can have the ability to select a time range. ```xml ``` ```js Page({ data: { defaultDateRange: [ new Date('2022/03/21').getTime(), new Date('2022/05/20').getTime(), ], }, handlePickerRangeChange(type, date, dateStr, e) { console.log('onPickerRangeChange', type, date, dateStr, e); }, handleTriggerPicker(visible, e) { console.log('onVisibleChange', visible, e); }, handleRangeOk(date, format, e) { console.log('onRangeOk', date, format, e); }, }); ``` ### Demo Code ## API ### DatePicker | Property | Description | Type | Default Value | | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- | ------------ | | animationType | Animation type, optional `transform` `position`, the default is used `transform` Animation performance is better. Due to bug in the basic library of small programs, the pop-up window `picker-view` Shadow style may have style problems under iOS and can be temporarily switched `position` Resolve. | string | `transform` | | className | Class Name | string | - | | defaultValue | Time selected by default | Date | - | | defaultPickerValue | Set the default time when the user selects a date | Date | - | | disabled | Disable | boolean | false | | readonly | Read-only | boolean | false | | cancelText | Cancel Copy | string | "Cancel" | | content | Custom Content Slots | slot | - | | format | Time format display, the format is the same [dayjs](https://day.js.org/docs/zh-CN/display/format) | string | 'YYYY/MM/DD' | | indicatorStyle | Check Box Style | string | - | | indicatorClassName | Class name of the check box | string | - | | maskClassName | Class name of the layer | string | - | | maskClosable | Click whether the layer can be closed | boolean | true | | maskStyle | Mating Style | string | - | | max | Maximum | Date | Ten years later | | min | Minimum | Date | Ten years ago | | okText | Confirm Button Copy | string | "OK" | | placeholder | Prompt Copy | string | "Please select" | | popClassName | Popup box class name | string | - | | popStyle | Pop-up Style | string | - | | precision | Select precision, optional `year` `month` `day` `hour` `minute` `second` | string | `day` | | prefix | Prefix | slot | - | | style | Style | string | - | | suffix | Suffix | slot | - | | title | Pop-up Title | string \| slot | - | | value | Selected time | Date | - | | visible | Whether to display | boolean | false | | defaultVisible | Display by default | boolean | false | | onFormat | Text display format of the selected value | (date: Date, dateStr: string) => string | - | | onFormatLabel | Customize the content displayed in each column, and add the year, month, day, hour, minute, and second units by default. | (type: `year` \| `month` \| `day` \| `hour` \| `minute` \| `second`, value: number) => string | - | | #if ALIPAY onOk | Click the OK button to trigger the callback | (date: Date, dateStr: string, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | | #if ALIPAY onCancel | Click the cancel button/layer to trigger the callback | (event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | | #if ALIPAY onPickerChange | The selected item changes, triggering a callback | (date: Date, dateStr: string, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | | #if ALIPAY onVisibleChange | Pop-up display/hide status change trigger | (visible: boolean, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | | #if WECHAT bindok | Click the OK button to trigger the callback | (date: Date, dateStr: string, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | | #if WECHAT bindcancel | Click the cancel button/layer to trigger the callback | (event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | | #if WECHAT bindpickerchange | The selected item changes, triggering a callback | (date: Date, dateStr: string, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | | #if WECHAT bindvisiblechange | Pop-up display/hide status change trigger | (visible: boolean, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | ### RangePicker | Property | Description | Type | Default Value | | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | ------------ | | animationType | Animation type, optional `transform` `position`, the default is used `transform` Animation performance is better. Due to bug in the basic library of small programs, the pop-up window `picker-view` Shadow style may have style problems under iOS and can be temporarily switched `position` Resolve. | string | `transform` | | className | Class Name | string | - | | defaultValue | Time range selected by default | [Date, Date] | - | | disabled | Disable | boolean | false | | readonly | Read-only | boolean | false | | cancelText | Cancel Copy | string | "Cancel" | | content | Custom Content Slots | slot | - | | endPlaceholder | End Time Prompt Copy | string | "Not selected" | | format | Time format display, the format is the same [dayjs](https://day.js.org/docs/zh-CN/display/format) | string | 'YYYY/MM/DD' | | indicatorStyle | Check Box Style | string | - | | indicatorClassName | Class name of the check box | string | - | | maskClassName | Class name of the layer | string | - | | maskClosable | Click whether the layer can be closed | boolean | true | | maskStyle | Mating Style | string | - | | max | Maximum | Date | Ten years later | | min | Minimum | Date | Ten years ago | | okText | Confirm Button Copy | string | "OK" | | placeholder | Prompt Copy | string | "Please select" | | popClassName | Popup box class name | string | - | | popStyle | Pop-up Style | string | - | | precision | Select precision, optional `year` `month` `day` `hour` `minute` | string | `day` | | splitCharacter | Display Connector | string | - | | startPlaceholder | Start Time Prompt Copy | string | "Not selected" | | prefix | Prefix | slot | - | | style | Style | string | - | | suffix | Suffix | slot | - | | title | Pop-up Title | string \| slot | - | | value | Selected time range | [Date, Date] | - | | visible | Whether to display | boolean | false | | defaultVisible | Display by default | boolean | false | | onFormat | Text display format of the selected value | (date: [Date, Date], dateStr: [string, string]) => string | - | | onFormatLabel | Customize the content displayed in each column, and add the year, month, day, hour, minute, and second units by default. | (type: `year` \| `month` \| `day` \| `hour` \| `minute`, value: number) => string | - | | #if ALIPAY onOk | Click the OK button to trigger the callback | (date: [Date, Date], dateStr: [string, string], event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | | #if ALIPAY onCancel | Click the cancel button/layer to trigger the callback | (event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | | #if ALIPAY onPickerChange | The selected item changes, triggering a callback | (type: `start` \| `end`, date: Date, dateStr: string, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | | #if ALIPAY onVisibleChange | Pop-up display/hide status change trigger | (visible: boolean, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | | #if WECHAT bindok | Click the OK button to trigger the callback | (date: [Date, Date], dateStr: [string, string], event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | | #if WECHAT bindcancel | Click the cancel button/layer to trigger the callback | (event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | | #if WECHAT bindpickerchange | The selected item changes, triggering a callback | (type: `start` \| `end`, date: Date, dateStr: string, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | | #if WECHAT bindvisiblechange | Pop-up display/hide status change trigger | (visible: boolean, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | ## How to obtain `YYYY-MM-DD` Time in format The time returned by the DatePicker component is in the format `Date` type, if you need to convert `YYYY-MM-DD` format, you can use [dayjs](https://day.js.org/docs/zh-CN/display/format) Make the conversion. ```xml ``` ```javascript Page({ handleOk(date) { const dateStr = dayjs(date).format('YYYY-MM-DD'); console.log(dateStr); }, }); ``` ### Theme customization #### Style Variables Component provides the following CSS variables, which can be used to customize styles. For more information, see ConfigProvider Components. | Variable name | Default Value | Dark Mode Default | Remarks | | --------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | -------------------------- | | --range-picker-shadow-color |
#000000
|
#000000
| Range Selector Shadow Color | | --range-picker-item-color |
#333333
|
#c5cad1
| Range Selector Item Color | | --range-picker-active-color |
#1677ff
|
#3086ff
| Range Selector Activity Color | | --range-picker-placeholder-color |
#cccccc
|
#474747
| Range selector placeholder color | | --range-picker-shadow-color-faded |
rgba(0, 0, 0, 0.9)
|
rgba(0, 0, 0, 0.9)
| Range Selector Shadow Color (Faded) |