All Products
Search
Document Center

Choose date

Last Updated: Jun 30, 2021

my.datePicker

Note: This interface is only supported in mPaaS 10.1.32 and later versions.

Use this API to open the date selection list.

Parameters

Parameter Type Required Description
format String No Format of the returned date.
1. yyyy-MM-dd (default)
2. HH:mm
3. yyyy-MM-dd HH:mm
4. yyyy-MM (Base library with version lower than 1.1.1 is not supported. Use canIUse('datePicker.object.format.yyyy') to query if the current version can be used.)
5. yyyy (Base library with version lower than 1.1.1 is not supported. Use canIUse('datePicker.object.format.yyyy') to query if the current version can be used.)
currentDate String No The date and time initially selected. By default, the current time date and time are used.
startDate String No Minimum date and time.
endDate String No Maximum date and time.
success Function No The callback function for a successful API call.
fail Function No The callback function for a failed API call.
complete Function No The callback function used when the API call is completed. This function is always executed no matter the call succeeds or fails.

Return value on success

Name Type Description
date String Selected date.

Error code

Error Description Solution
11 The user cancelled the operation. This is normal user interaction, and you don’t have to take any action.

Sample code

 
  1. // API-DEMO page/API/date-picker/date-picker.json
  2. {
  3. "defaultTitle": "Date Picker"
  4. }
 
  1. <!-- API-DEMO page/API/date-picker/date-picker.axml -->
  2. <view class="page">
  3. <view class="page-description">API for selecting date</view>
  4. <view class="page-section">
  5. <view class="page-section-title">my.datePicker</view>
  6. <view class="page-section-demo">
  7. <button class="page-body-button" type="primary" onTap="datePicker">Select date-1</button>
  8. <button class="page-body-button" type="primary" onTap="datePickerHMS">Select date-2</button>
  9. <button class="page-body-button" type="primary" onTap="datePickerYMDHMS">Select date-3</button>
  10. </view>
  11. </view>
  12. </view>
 
  1. // API-DEMO page/API/date-picker/date-picker.js
  2. Page({
  3. datePicker() {
  4. my.datePicker({
  5. currentDate: '2016-10-10',
  6. startDate: '2016-10-9',
  7. endDate: '2017-10-9',
  8. success: (res) => {
  9. my.alert({
  10. title: 'datePicker response: ' + JSON.stringify(res)
  11. });
  12. },
  13. });
  14. },
  15. datePickerHMS() {
  16. my.datePicker({
  17. format: 'HH:mm',
  18. currentDate: '12:12',
  19. startDate: '11:11',
  20. endDate: '13:13',
  21. success: (res) => {
  22. my.alert({
  23. title: 'datePicker response: ' + JSON.stringify(res)
  24. });
  25. },
  26. });
  27. },
  28. datePickerYMDHMS() {
  29. my.datePicker({
  30. format: 'yyyy-MM-dd HH:mm',
  31. currentDate: '2012-01-09 11:11',
  32. startDate: '2012-01-01 11:11',
  33. endDate: '2012-01-10 11:11',
  34. success: (res) => {
  35. my.alert({
  36. title: 'datePicker response: ' + JSON.stringify(res)
  37. });
  38. },
  39. });
  40. },
  41. });
 
  1. /* API-DEMO page/API/date-picker/date-picker.acss */
  2. button + button {
  3. margin-top: 20rpx;
  4. }
Note: For iOS users who use the baseline version V10.1.68.35 and later, the latest style of time picker can be set by creating the AUImplDatePicker class and overriding the userNewYearDateAndTime method to return the YES method.
 
  1. @implementation AUImplDatePicker (NewDatePicker)
  2. // External override can use the new UI of year, month, day, hour and minute.
  3. - (BOOL)userNewYearDateAndTime
  4. {
  5. return YES;
  6. }
  7. @end

The latest style of time picker is as follows: