时刻选择器（moment） | ITRITON开发文档

# 时刻选择器（moment）

时刻预约，可用于预约类项目

# 基本使用

<itu-moment v-model="showMoment" titleAlign="left" :date="momentDate" :moment="moment" maxDate="2024-06-09" :borderRadius="16" shape="round" @change="changeMoment"></itu-moment>
<script>
  export default {
    data() {
      return {
        showMoment: false,
        moment: "",
        momentDate: "",
      };
    },
    methods: {
      changeMoment(e) {
        console.log("moment", e);
        this.moment = e.time;
        this.momentDate = e.date;
      },
    },
  };
</script>

# 多选连续

<itu-moment mode="range" shape="round" :momentRange="momentRange" :momentSlotList="momentSlotList" :borderRadius="16" v-model="showRangeMoment" @change="changeMomentRange"></itu-moment>
<script>
  export default {
    data() {
      return {
        showRangeMoment: false,
        momentRange: ["2024-05-30 11:00", "2024-05-30 23:00"],
        momentSlotList: [
          { datetime: "2024-05-29 11:00", disabled: true, text: "已预约" },
          { datetime: "2024-05-29 16:00", disabled: true, text: "已预约" },
        ],
      };
    },
    methods: {
      changeMomentRange(e) {
        console.log("momentRange", e);
        this.momentRange = e.momentRange;
      },
    },
  };
</script>

# 多选不连续

<itu-moment mode="range" shape="round" :continuous="false" :moments="moments" :momentSlotList="momentSlotList" :borderRadius="16" v-model="showMoments" @change="changeMoments"></itu-moment>
<script>
  export default {
    data() {
      return {
        showMoments: false,
        moments: ["2024-05-30 12:00", "2024-05-30 13:00", "2024-05-30 18:00"],
        momentSlotList: [
          { datetime: "2024-05-29 11:00", disabled: true, text: "已预约" },
          { datetime: "2024-05-29 16:00", disabled: true, text: "已预约" },
        ],
      };
    },
    methods: {
      changeMoments(e) {
        console.log("moments", e);
        this.moments = e.moments;
      },
    },
  };
</script>

# Props

属性名	类型	默认值	说明
title	String	选择时刻	标题
titleAlign	String	center	标题位置, 可选 left, center
calendarTitle	String	选择日期	日期选择标题
calendarWeekTextList	Array	['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']	星期数据字典
calendarWeekDayList	Array	['日', '一', '二', '三', '四', '五', '六']	星期数据字典(日历上)
showRangeTime	Boolean	true	显示时间区间
lastDateText	String	前一天	前一天文本
nextDateText	String	后一天	后一天文本
date	String	''	当前默认选中日期
mode	String	moment	moment-单个时刻选择，range-开始时刻+结束时刻选择
moment	String	''	时刻 mode=moment 切 date 有值时生效
moments	Array	[]	时刻 mode=range, continuous=false 时生效
momentRange	Array	[]	时刻 mode=range, continuous=true 时生效
startTime	[Number, String]	0	开始时间，支持小时
endTime	[Number, String]	[]	结束时间，支持小时
timeSlot	Number	60	间隔时间（分钟），可选值：15/30/45/60
safeAreaInsetBottom	Boolean	false	适配安全区域
shape	String	square	按钮形状可选值 square、round、circle
isMaskClose	Boolean	true	是否允许通过点击遮罩
value	Boolean	false	通过双向绑定控制组件的弹出与收起
minDate	[Number, String]	''	默认最小可选日期为今天
maxDate	[Number, String]	''	最大可选日期，之后的日期不可选(不在范围内日期禁用不可选)
borderRadius	String, Number	true	圆角背景，rpx 单位
confirmText	String	确认	确认按钮
activeBgColor	String	#2979ff	选中
activeColor	String	#ffffff	选中
rangeBgColor	String	#2979ff	范围内日期字体颜色
startText	String	开始	mode=range, continuous=true时生效，起始日期自定义文案
endText	String	结束	mode=range, continuous=true时生效，结束日期自定义文案
closeable	Boolean	true	是否显示右上角的关闭图标
daySpan	Boolean	false	mode=range时生效，跨天选择
weekText	Array	['周日', '周一', '周二', '周三', '周四', '周五', '周六']	星期数据字典
continuous	Boolean	true	mode=range时生效，是否连续时段
showOverdue	Boolean	true	显示/隐藏过期时间
disabledOverdue	Boolean	true	禁用过期时间选择
momentSlotList	Boolean	true	默认某些时刻状态数组 [{datetime: '2024-05-29 11:00', disabled: true, text: '已预约'}], disabled为true则该时间不可选择为false则可选择，text显示在日期下方
expireText	String	已过期	过期文本

# Events

事件名称	类型	说明
@change	Function	点击【确定】按钮时时触发的事件, mode=moment 返回 {date, datetime, range, time}； mode=range&continuous=true 返回 {startMoment, endMoment, momentRange}；mode=range&continuous=false 返回 {moments, momentRanges}
@changeDate	Function	选择日期触发事件，返回当前日期

← 日历选择器（calendar）预约时间间隔（time-slot） →