my.datePicker

2023-03-28 12:11

Use this API to open the date selection list.

Sample code

index.json

copy

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

index.axml

copy

<!-- API-DEMO page/API/date-picker/date-picker.axml -->
<view class="page">
  <view class="page-description">Date picker API</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">Pick Date-1</button>
      <button class="page-body-button" type="primary" onTap="datePickerHMS">Pick Date-2</button>
      <button class="page-body-button" type="primary" onTap="datePickerYMDHMS">Pick Date-3</button>
    </view>
  </view>
</view>

index.js

copy

// 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)
        });
      },
    });
  },
});

index.acss

copy

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

Parameters

Property	Type	Required	Description
format	String	No	The returned date format.
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		No	Maximum date and time.
success	Function	Yes	The callback function for a successful API call.
fail	Function	Yes	The callback function for a failed API call.
complete	Function	Yes	The callback function used when the API call is completed. This function is always executed no matter the call succeeds or fails.

The returned date formats include:

yyyy-MM-dd (default)

HH:mm

yyyy-MM-dd HH:mm

yyyy-MM. Pass in canIUse('datePicker.object.format.yyyy-MM') to my.canIUse to query if the current version can be used.

yyyy. Pass in canIUse('datePicker.object.format.yyyy') to my.canIUse to query if the current version can be used.

Success callback function

Property	Type	Description
date	String	The selected date.

Error Code

Error Code	Description	Solution
11	The user cancelled the operation.	The user cancelled the operation and no action is required.