All Products
Search

This Product

    Mobile Platform as a Service:Choose date

    Document Center

    Mobile Platform as a Service: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. }
    8. @end

    The latest style of time picker is as follows: