跳到主要内容
Date-picker
日期选择器用于显示过去、现在或将来的日期。用户请求的日期类型（准确的、时间范围的、日期+时间）将决定最适合使用的哪个选择器，选择器的格式可以根据需要进行组合。
用法
样式
可访问性

示例​

注意​

  • 所有种类和维度的日期控件，它们的展示文案是内部统一不可配置的。比如周维度下的展示文案即：2020第2周。
  • 前端回显时间如果有时区要求，后端返回前端必须是时间字符串 类似 2023/9/7 23:59:59 字符串，不能传UTC 时间戳，会有时区偏移 问题！

选择年月日​

PCPhonePad
<page>
  <form  layout="horizontal">
    <item
      node='date-picker'
      name='date'
      label='日期选择/默认'
      placeholder='请选择'
      />
      <item
          node='date-picker'
          name='date'
          label='日期选择+默认值'
          value='{{Date.now()}}'
          placeholder='请选择'
      />
  </form>
</page>

export default XPage({
  
})


其他日期单位​

通过扩展基础的日期选择，可以选择周、月、年、季度或多个日期

PCPhonePad
<page>
    <form  layout="horizontal">
        <item
            node='date-picker'
            name='multiple'
            type='multiple'
            label='日期多选'
            placeholder='日期多选' />
        <item
            node='date-picker'
            name='week'
            type='week'
            label='周'
            placeholder='选择周' />
        <item
            node='date-picker'
            name='year'
            type='year'
            label='年'
            placeholder='选择年'
        />
        <item
            node='date-picker'
            name='month'
            type='month'
            label='月'
            placeholder='选择月' />
        <item
            node='date-picker'
            name='halfyear'
            type='halfyear'
            label='半年'
            show-now='{{false}}'
            placeholder='选择半年'
        />
        <item
            node='date-picker'
            name='quarter'
            type='quarter'
            label='季度'
            placeholder='选择季度'
        />
    </form>
</page>

export default XPage({
  
})


选择日期范围​

可在一个选择器中便捷地选择一个时间范围

PCPhonePad

<page>
    <form>
        <item
            node='date-picker'
            name='date'
            type='daterange'
            label='日期范围'
            value-format='yy/MM/dd'
            format='yy/MM/dd'
            placeholder='选择日期范围'
        />
        <item
            node='date-picker'
            name='date'
            type='daterange'
            label='日期范围+默认值'
            value-format='yy/MM/dd'
            format='yy/MM/dd'
            placeholder='选择日期范围'
            value='{[Date.now(), Date.now() + 24 * 60 * 60 * 1000 * 7]}'
        />
        <item
            node='date-picker'
            name='date'
            type='daterange'
            label="日期范围/带快捷选项"
            value-format='yy/MM/dd'
            format='yy/MM/dd'
            placeholder='选择日期范围'
            value='{[Date.now(), Date.now() + 24 * 60 * 60 * 1000 * 7]}'
        />
        <item
            node='date-picker'
            name='date'
            type='daterange'
            label="限定可选范围"
            value-format='yy/MM/dd'
            format='yy/MM/dd'
            placeholder='选择日期范围'
            before-render="{{disabledDate}}"
        />
    </form>
</page>

export default XPage({
    disabledDate(date) {
        const now = Date.now();
        const time = date.getTime();
        
        if (time > now && time < now + 7 * 24 * 60 * 60 * 1000) {
            return false;
        } else {
            return true;
        }
    },
})


日期时间选择器​

在同一个选择器里选择日期和时间

PCPhonePad

<page>
    <form>
        <item
            node='date-picker'
            name='date'
            type='datetime'
            label='日期和时间点'
            placeholder='请选择'
        />
        <item
            node='date-picker'
            name='date'
            type='datetime'
            label='日期和时间点 + 默认值'
            placeholder='请选择'
            value='{{Date.now()}}'
        />
        <item
            node='date-picker'
            name='date'
            type='datetimerange'
            label='日期时刻范围 + 时刻默认值'
            placeholder='请选择'
        />
        <item
            node='date-picker'
            name='date'
            type='datetimerange'
            label='限定日期时刻 可选范围'
            placeholder='请选择'
            before-render="{{disabledDate}}"
        />
    </form>
</page>

export default XPage({
    disabledDate(date) {
        const now = Date.now();
        const time = date.getTime();
        
        if (time > now && time < now + 7 * 24 * 60 * 60 * 1000) {
            return false;
        } else {
            return true;
        }
    },
})


时区功能​

PCPhonePad

<page>
    <form>
        <item
            node='date-picker'
            name='date'
            type='datetime'
            label='日期时间点'
            timeZone='{{timeZone}}'
            placeholder='请选择'
        />
        <item
            node='date-picker'
            name='datetimerange'
            type='datetimerange'
            label='日期时间范围 '
            timeZone='{{timeZone}}'
            placeholder='请选择'
        />
    </form>
</page>

export default XPage({
    data:{
        timeZone:'UTC+8'
    }
})


## 步长
PCPhonePad

<page>
    <form>
        <item
            node='date-picker'
            name='date'
            type='datetime'
            label='日期时间点-只能选择时分'
            step='01:01:00'
            placeholder='请选择'
        />
        <item
            node='date-picker'
            name='date'
            type='datetimerange'
            label='日期时间范围-只能选择时分'
            step='01:01:00'
            placeholder='请选择'
        />
    </form>
</page>

export default XPage({
    disabledDate(date) {
        const now = Date.now();
        const time = date.getTime();
        
        if (time > now && time < now + 7 * 24 * 60 * 60 * 1000) {
            return false;
        } else {
            return true;
        }
    },
})


Attributes​

参数说明类型可选值默认值端版本
name名称(原生属性)String----PC/Mobile--
type类型String见type值DatePC/Mobile--
onPick选中日期触发事件Function----PC/Mobile--
default-time时刻的默认值Array<(String)>--['00:00:00', '00:00:00']PC/Mobile--
value绑定值(type 为 季度 半年 不可设置)Date / Array----PC--
value-format绑定值格式(type 为 季度 半年 不可设置),注意value-format要和value 值类型对应，否则部分情况初始value值可能不显示String见format--PC--
format显示格式String见format--PC--
disabled禁用Boolean--falsePC--
placeholder占位符String----PC--
end-placeholder结束日期占位String仅在type为 **-range生效--PC--
shortcuts快捷操作Array<(Function({text, onClick}))>----PC--
before-render设置禁用状态Function----PC--
unlink-panels取消两个日期面板间联动Boolean--falsePC--
step时分秒间隔String小时步长(1-23)：分钟步长(1-59)：秒步长(1-59)'01:01:01'PC--
rangeLimitDay可选范围最大跨度长度限制Number仅在type为 **-range生效-PC--
show-week-Number显示周信息Boolean仅在type为 week**生效-PC--
offsetDayOfWeek周第一天定义Number仅在type为 week**生效-PC--
lunar农历Boolean----PC/Mobile--
selectableRange时分秒可选范围配置Array['06:30:00 - 20:00:00']--PC/Mobile--
showNow显示此刻按钮Booleantrue/falsetruePC/Mobile--
clearable是否显示input内的清空按钮Booleantrue/falsetruePC/Mobile--
maxDate最大日期 (仅移动端生效)控制可选范围Date移动端渲染时间跨度,默认为当前时间前后2年-Mobile--
minDate最小日期(仅移动端生效)控制可选范围Date移动端渲染时间跨度,默认为当前时间前后2年-Mobile--
timeZone时区展示(仅当存在time 选择时显示)String自定义字符串-PC/Mobile--

type​

值说明端
date默认类型 选择年月日PC/Mobile
datetime选择年月日时分秒PC/Mobile
datetime选择年月日时分秒PC/Mobile
daterange选择年月日范围PC/Mobile
datetimerange选择年月日时分秒范围PC/Mobile
week选择某年第几周PC/Mobile
weeks周多选PC
weekrange选择某年第几周到第几周PC
month选择某年某月PC/Mobile
year选择某年PC/Mobile
halfyear选择半年PC
quarter选择季度PC
yearrange选择年范围PC
multiple多选年月日PC/Mobile

Events​

名称说明回调参数
changed值改变后触发(value)

format&value-format​

使用format指定输入框的格式；使用value-format指定绑定值的格式。

默认情况下，组件接受并返回Date对象。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：

格式含义备注举例
yyyy年2017
M月不补01
MM月01
W周仅周选择器的 format 可用；不补01
WW周仅周选择器的 format 可用01
d日不补02
dd日02
H小时24小时制；不补03
HH小时24小时制03
h小时12小时制，须和 A 或 a 使用；不补03
hh小时12小时制，须和 A 或 a 使用03
m分钟不补04
mm分钟04
s秒不补05
ss秒05
AAM/PM仅 format 可用，大写AM
aam/pm仅 format 可用，小写am
timestamp时间戳仅 valueFormat 可用，小写
[MM]使用[]包裹不需要格式化字符使用方括号标识不需要格式化的字符 (如 [A][MM])MM