vue.js --------------时间选择器

很多项目中都会用到时间选择。下面列子中我写了一个实例

demo下载地址：https://download.csdn.net/download/zxd1314520/10634016

首先上效果图：

1.先引入 cnpm install vue-date-time-m --save

2.在main.js里引入

import dateTime from 'vue-date-time-m';
Vue.component('data-time', dateTime);

3.在template

   <div class="my-content-list" @click="show">
      <div class="date-time-input" >现在时间&nbsp;&nbsp;{{msg}}</div>
  </div>
  <date-time ref="dateTime"
        @confirm="select"
        format="yyyy年MM月dd日 hh小时mm分">
          <div slot="prevMonth"> <i>-</i> </div>
          <div slot="nextMonth"> <i>+</i> </div>
    </date-time>

4.在所需要的script里面 必须绑定点击事件

<script>
	import DateTime from 'vue-date-time-m'
	export default {
		components: {
			DateTime
		},
		data() {
			return {
				msg: '',
				count: 0,
				isLoading: false,

			}
		},

		methods: {
			show() {
				this.$refs.dateTime.show()
			},
			// 日期组件回调
			select(val) {
				this.msg = val
			},
		
		},
	}
</script>

5.根据项目要求 我修改了时间选择的主题颜色

 

css

.van-dialog__confirm,.van-dialog__confirm:active {
		color: #FF6600
}
	
.d-date-time-header,.d-date-time-bg{
		background: #FF6600!important;
}
.d-date-time-button a{
		color: #FF6600!important;
}

 

一个好看使用的时间选择就写完了。

还有其他如果你需要可以一起讨论。