小程序调用my.datePicker API选择日期与时间-移动开发平台 mPaaS-阿里云

my.datePicker

说明：mPaaS 10.1.32 及以上版本支持该接口。

该接口用于打开日期选择列表。

入参

名称	类型	必填	描述
format	String	否	返回的日期格式， 1. yyyy-MM-dd（默认） 2. HH:mm 3. yyyy-MM-dd HH:mm 4. yyyy-MM （最低基础库：1.1.1，可用 canIUse(‘datePicker.object.format.yyyy-MM’) 判断） 5. yyyy （最低基础库：1.1.1，可用 canIUse(‘datePicker.object.format.yyyy’) 判断）
currentDate	String	否	初始选择的日期时间，默认为当前时间。
startDate	String	否	最小日期时间。
endDate	String	否	最大日期时间。
success	Function	否	调用成功的回调函数。
fail	Function	否	调用失败的回调函数。
complete	Function	否	调用结束的回调函数（调用成功、失败都会执行）。

success 返回值

名称	类型	描述
date	String	选择的日期。

错误码

error	描述	解决方案
11	用户取消操作。	这是用户正常交互流程分支，不需要特殊处理。

代码示例

// 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</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">选择日期-1</button>
      <button class="page-body-button" type="primary" onTap="datePickerHMS">选择日期-2</button>
      <button class="page-body-button" type="primary" onTap="datePickerYMDHMS">选择日期-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;
}

说明：对于 iOS 用户，若采用的 V10.1.68.35 及以上基线版本，可以通过创建 AUImplDatePicker 类，并重写 userNewYearDateAndTime 方法使其返回 YES 的方法设置最新的时间选择器的式样。

@implementation AUImplDatePicker (NewDatePicker)
// 外部重写可以使用新的年月日时分 UI
- (BOOL)userNewYearDateAndTime
{
    return YES;
}
@end

最新的时间选择器的样式如下：