全部产品

选择日期

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 用户取消操作。 这是用户正常交互流程分支,不需要特殊处理。

代码示例

  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</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">选择日期-1</button>
  8. <button class="page-body-button" type="primary" onTap="datePickerHMS">选择日期-2</button>
  9. <button class="page-body-button" type="primary" onTap="datePickerYMDHMS">选择日期-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. }
说明:对于 iOS 用户,若采用的 V10.1.68.35 及以上基线版本,可以通过创建 AUImplDatePicker 类,并重写 userNewYearDateAndTime 方法使其返回 YES 的方法设置最新的时间选择器的式样。
  1. @implementation AUImplDatePicker (NewDatePicker)
  2. // 外部重写可以使用新的年月日时分 UI
  3. - (BOOL)userNewYearDateAndTime
  4. {
  5. return YES;
  6. }
  7. @end

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