Choose date - Mobile Platform as a Service - Alibaba Cloud Documentation Center

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

// API-DEMO page/API/date-picker/date-picker.json
{
    "defaultTitle": "Date Picker"
}

<!-- API-DEMO page/API/date-picker/date-picker.axml -->
<view class="page">
  <view class="page-description">API for selecting date</view>
  <view class="page-section">
    <view class="page-section-title">my.datePicker</view>
    <view class="page-section-demo">
      <button class="page-body-button" type="primary" onTap="datePicker">Select date-1</button>
      <button class="page-body-button" type="primary" onTap="datePickerHMS">Select date-2</button>
      <button class="page-body-button" type="primary" onTap="datePickerYMDHMS">Select date-3</button>
    </view>
  </view>
</view>

// API-DEMO page/API/date-picker/date-picker.js
Page({
  datePicker() {
    my.datePicker({
      currentDate: '2016-10-10',
      startDate: '2016-10-9',
      endDate: '2017-10-9',
      success: (res) => {
        my.alert({
          title: 'datePicker response: ' + JSON.stringify(res)
        });
      },
    });
  },
  datePickerHMS() {
    my.datePicker({
      format: 'HH:mm',
      currentDate: '12:12',
      startDate: '11:11',
      endDate: '13:13',
      success: (res) => {
        my.alert({
          title: 'datePicker response: ' + JSON.stringify(res)
        });
      },
    });
  },
  datePickerYMDHMS() {
    my.datePicker({
      format: 'yyyy-MM-dd HH:mm',
      currentDate: '2012-01-09 11:11',
      startDate: '2012-01-01 11:11',
      endDate: '2012-01-10 11:11',
      success: (res) => {
        my.alert({
          title: 'datePicker response: ' + JSON.stringify(res)
        });
      },
    });
  },
});

/* API-DEMO page/API/date-picker/date-picker.acss */
button + button {
  margin-top: 20rpx;
}

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.

@implementation AUImplDatePicker (NewDatePicker)
// External override can use the new UI of year, month, day, hour and minute.
- (BOOL)userNewYearDateAndTime
{
    return YES;
}

@end

The latest style of time picker is as follows: