Time Picker 时间选择器

表单类型组件，结合form组件使用

基本用法

<wx-form ref="form">
  <wx-form-body>
    <wx-form-group>
      <wx-time-picker v-model="v1" label="时间" placeholder="请选择时间" required></wx-time-picker>
    </wx-form-group>
</wx-form>

<script>
export default {
  data() {
    return {
      v1: ""
    };
  }
};
</script>

选取范围

<wx-form ref="form">
  <wx-form-body>
    <wx-form-group title="选取范围">
      <wx-time-picker v-model="v2" label="时间" :start="9" :end="18" placeholder="指定时段"></wx-time-picker>
      <wx-time-picker v-model="v3" label="时间" :time-span="15" placeholder="指定间隔"></wx-time-picker>
    </wx-form-group>
  </wx-form-body>
</wx-form>

<script>
export default {
  data() {
    return {
      v2: "",
      v3: ""
    };
  }
};
</script>

默认值/显示格式/不可用

<wx-form ref="form">
  <wx-form-body>
    <wx-form-group title="默认值/显示格式/不可用">
      <wx-time-picker v-model="v4" label="时间" placeholder="请选择时间" format="HH时mm分"></wx-time-picker>
      <wx-time-picker v-model="v5" label="时间" placeholder="请选择时间" disabled></wx-time-picker>
    </wx-form-group>
  </wx-form-body>
</wx-form>

<script>
export default {
  data() {
    return {
      v4: "12:55",
      v5: "23:59"
    };
  }
};
</script>

数据校验

<wx-form ref="form">
  <wx-form-body>
    <wx-form-group>
      <wx-time-picker v-model="v1" label="时间" placeholder="请选择时间" required></wx-time-picker>
    </wx-form-group>
  </wx-form-body>
  <wx-form-action>
    <wx-button @click="handleClick">确定</wx-button>
  </wx-form-action>
</wx-form>

<script>
export default {
  data() {
    return {
      v1: ""
    };
  },
  methods: {
    handleClick() {
      this.$refs.form.validate(error => {
        if (error) {
          this.$tooltip(error)
        } else {
          this.$toast("验证成功", { type: "success" })
        }
      });
    }
  }
};
</script>

Date Picker Attributes

参数	说明	类型	可选值	默认值
v-model/value	绑定值	String	-	-
label	时间选择框标题	String	-	-
placeholder	时间选择框占位文本	String	-	-
required	是否必选	Boolean	-	false
emptyTips	空值校验提示信息	String	-	-
disabled	禁用状态	Boolean	-	false
start	起始年份	Number	>=0,<12	0
end	结束年份	Number	>=12,<24	23
timeSpan	自定义时间间隔	Number	1, 5, 10, 15, 20, 30	5
format	自定义时间显示格式	String	-	HH:mm

时间选择器