vue-datepicker

A datetimepicker Vue component suitable for PC. Compatible with Vue 2.x

• Install
• Demo
• Usage
• Formatting

Install

npm install -D vue-datetimepicker-plugin dateformat

Demo

To view a demo online: https://kyo4311.github.io/vue-datetimepicker/

Usage

<date-picker v-model="time">
  <div class="my-datepicker">{{timeDisplay}}</div>
</date-picker>

import DatePicker from 'vue-datetimepicker-plugin'
import dateFormat from 'dateformat'
require("vue-datetimepicker-plugin/index.css")
export default {
  computed: {
    timeDisplay() {
      return this.time ? dateFormat(this.time, 'yyyy-mm-dd') : 'Please choose time.'
    }
  },
  data() {
    return {
      time: new Date('2018-11-11')
    }
  },
  components: {
    DatePicker
  }
}

.my-datepicker{
  border:1px solid #3fb883;
  width: 190px;
  height: 30px;
  display: flex;
  background: #fff;
  align-items: center;
  font-size: 12px;
  padding: 0 5px;
  border-radius: 5px;
  overflow: hidden;
}

Formatting

To reduce the size of components, components do not include Formatting. If the project does not use much, it is recommended to write a simple Formatting. If more projects are used, you can use third-party tools for Formatting