DatetimePicker
日期时间选择器
支持自定义格式
引入
import {DatetimePicker} from 'sinoiov-ui'
Vue.component(DatetimePicker)
代码示例
简单使用
默认为DatetimePicker，包括年月日时分
点击弹出Datetime Picker
export default {
methods: {
openDatetimePicker () {
this.$refs.datetimePickerRef1.open()
},
handleConfirm (value) {
this.$toast(value)
}
}
}
不同的显示类型
通过type属性指定类型，可选值有：datetime,date,time。默认为datetime
点击弹出Date Picker
点击弹出Time Picker
export default {
methods: {
openDatePicker () {
this.$refs.datetimePickerRef2.open()
},
openTimePicker () {
this.$refs.datetimePickerRef3.open()
}
}
}
自定义格式
默认的结果值为Date对象，可以通过format属性指定格式化字符串，形如：'yyyy-MM-dd hh:mm'或'yyyy/MM/dd'等
自定义格式 yyyy-MM-dd hh:mm
自定义格式 yyyy年MM月dd日
export default {
methods: {
openDatetimePicker () {
this.$refs.datetimePickerRef4.open()
},
openDatePicker () {
this.$refs.datetimePickerRef5.open()
},
handleConfirm (value) {
this.$toast(value)
}
}
}
限定显示范围
年份默认的范围为当前年份的前后10年，其他没有限定。需要时可以通过min-year和max-year来限定年份
限定年份的显示范围
双向绑定
通过v-model来指定默认值和获取值。指定时可以通过数组或具有日期格式的字符串来指定默认值，如果默认值为空，则默认选中当前日期；获取值时会按照format属性指定的格式返回，如果没有指定format则返回一个Date对象
数组形式
字符串形式