wx-vue

# Date Picker 日期选择器

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

注意

YYYY-MM-DD 格式的日期在IOS中无法正常解析，建议使用 YYYY/MM/DD 格式来处理日期

# 基本用法

<wx-form ref="form">
  <wx-form-body>
    <wx-form-group>
      <wx-date-picker v-model="v1" label="日期" placeholder="请选择日期"></wx-date-picker>
    </wx-form-group>
  </wx-form-body>
</wx-form>

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

# 选取范围

  • start 和 end: 如果是 Number 类型，表示起始年份；如果是 String 类型，格式为 YYYY/MM/DD
  • cron：三位表达式，分别是 dayOfMonth[1-31]，month[1-12] 和 dayOfWeek[0-6]（周日-周六）
<wx-form ref="form">
  <wx-form-body>
    <wx-form-group>
      <wx-date-picker v-model="v2" label="日期" :start="2020" :end="2022" placeholder="2020-2022"></wx-date-picker>
      <wx-date-picker v-model="v3" label="日期" start="2020/2/1" end="2020/12/1" placeholder="2020-2-1至2020-12-1"></wx-date-picker>
      <wx-date-picker v-model="v4" label="日期" cron="* * 0,6" placeholder="自定义(仅周末)"></wx-date-picker>
    </wx-form-group>
  </wx-form-body>
</wx-form>

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

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

<wx-form ref="form">
  <wx-form-body>
    <wx-form-group>
      <wx-date-picker v-model="v5" label="日期" placeholder="请选择日期" format="YYYY年M月D日"></wx-date-picker>
      <wx-date-picker v-model="v6" label="日期" placeholder="请选择日期" disabled></wx-date-picker>
    </wx-form-group>
  </wx-form-body>
</wx-form>

<script>
export default {
  data() {
    return {
      v5: "2020/5/20",
      v6: "2022/2/22"
    };
  }
};
</script>

# 数据校验

<wx-form ref="form">
  <wx-form-body>
    <wx-form-group>
      <wx-date-picker v-model="v1" label="日期" placeholder="请选择日期" required></wx-date-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>

提示

表单布局和表单校验可参考Form

# Date Picker Attributes

参数 说明 类型 可选值 默认值
v-model/value 绑定值 String - -
label 日期选择框标题 String - -
placeholder 日期选择框占位文本 String - -
required 是否必选 Boolean - false
emptyTips 空值校验提示信息 String - -
disabled 禁用状态 Boolean - false
start 起始年份 String/Number 1900-2100 2015
end 结束年份 String/Number 1900-2100 2025
cron 自定义日期区间 String - -
format 自定义日期显示格式 String - YYYY-MM-DD

注意

  • v-model/value：绑定值格式始终为YYYY/MM/DD（兼容IOS），不受 format 影响
  • start 和 end: 如果是 Number 类型，表示起始年份；如果是 String 类型，格式为 YYYY/MM/DD
  • cron：三位表达式，分别是 dayOfMonth[1-31]，month[1-12] 和 dayOfWeek[0-6]（周日-周六），如：* * 0，6，表示只能选择周末时段
back
日期选择器

← Form 表单 →