[vue组件]日期时间选择器

安装

引入日期时间选择器

使用

<template>
  <div style="margin-left: 30px">
    <date-picker
        mode="datetime"
        :default-time="1566270847000"
        :min-time="1562037247000"
        :max-time="1567394047000"
        @change="getTime"></date-picker>
    <date-picker
        mode="date"
        format="YYYY年MM月DD日"
        :min-time="1562037247000"
        :max-time="1567394047000"
        @change="getTime"></date-picker>
    <date-picker
        mode="month"
        :min-time="1496128969000"
        :max-time="1590823369000"
        @change="getTime"></date-picker>
    <date-picker mode="year" @change="getTime"></date-picker>
  </div>
</template>

<script>
  import datePicker from './components/datePicker.vue'
  export default {
    name: '',
    components: {
      datePicker
    },
    data() {
      return {}
    },
    methods: {
      getTime(date){
        console.log(date);
      }
    }
  }
</script>


<style scoped>

</style>

属性

属性	描述	类型	备注
mode	日期类型	Number(时间戳)	没有默认值,必填,可选值为(date/datetime/month/year)
placeholderText	没有选择日期时的占位文字	String	请选择日期/月份/年份
defaultTime	默认时间	Number(时间戳)	没有默认值,选填
minTime	最小可选时间	Number(时间戳)	没有默认值,选填
maxTime	最大可选时间	Number(时间戳)	没有默认值,选填
format	格式化显示日期	String	YYYY-MM-DD hh:mm:ss
pickerWidth	组件宽	Number	250/155