分享vue 只选择时分秒时间的第三方插件

很好用的vue2 时间选择插件

vue2-datepicker

https://www.npmjs.com/package/vue2-datepicker

 

不加lang 配置默认为中文版本

选择的时间需要配合momen转成标准格式moment(‘获取的时间’).format("YYYY-MM-DD")

 

demo

https://mengxiong10.github.io/vue2-datepicker/demo/index.html

 

案例展示：

https://mengxiong10.github.io/vue2-datepicker/demo/index.html

 

安装（install）

$ npm install vue2-datepicker --save

使用

import DatePicker from 'vue2-datepicker'

 

页面内使用

<script>

import DatePicker from 'vue2-datepicker'

 

export default {

  components: { DatePicker },

  data() {

    return {

      time1: '',

      time2: '',

      time3: '',

      // custom lang

      lang: {

        days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],

        months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],

        pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],

        placeholder: {

          date: 'Select Date',

          dateRange: 'Select Date Range'

        }

      },

      // custom range shortcuts

      shortcuts: [

        {

          text: 'Today',

          onClick: () => {

            this.time3 = [ new Date(), new Date() ]

          }

        }

      ],

      timePickerOptions:{

        start: '00:00',

        step: '00:30',

        end: '23:30'

      }

    }

  }

}

</script>