当然,如果项目中只是个别地方是使用到时间插件,建议采用import方式引入
laydate.min.js时间插件在vue组件中的使用方式
<template>
<div id="laydateIndex">
<div class="input-item">
<label for="">请选择时间:</label>
<input type='text'
name='houseChangeTime'
placeholder='请选择日期'
class='form-control'
onclick="laydate({ istime: true, format: 'YYYY/MM/DD hh:mm:ss' })" />
</div>
<div class="input-item">
<label for="">开始时间:</label>
<input type="text" name="" id="begintime" placeholder='请选择日期'>
</div>
<div class="input-item">
<label for="">结束时间:</label>
<input type="text" name="" id="endtime" placeholder='请选择日期'>
</div>
</div>
</template>
<script>
import '../../assets/js/laydate.min.js'
export default {
name: 'laydateIndex',
data () {
return {
begintime: '',
endtime: '',
start_time: '',
}
},
methods: {
setBeginTime () {
var _this = this;
var mintime = laydate.now(0, 'YYYY-MM-DD hh:mm:ss');
_this.$data.begintime = mintime;
_this.$data.endtime = mintime;
var begintiem_options = {
elem: '#begintime',
format: 'YYYY-MM-DD hh:mm:ss', // 分隔符可以任意定义
event: 'click', //触发事件
istime: true, //是否开启时间选择
isclear: true, //是否显示清空
issure: true, //是否显示确认
festival: true, //是否显示节日
min: mintime, //最小日期
max: '2099-12-31 23:59:59', //最大日期
start: mintime, //开始日期
fixed: true, //是否固定在可视区域
zIndex: 99999999, //css z-index
choose: function(dates) { // 选择日期完毕的回调
endtime_options.start = dates;
endtime_options.min = dates;
_this.$data.begintime = dates;
_this.$data.endtime = dates;
}
}; var endtime_options = {
elem: '#endtime',
format: 'YYYY-MM-DD hh:mm:ss', // 分隔符可以任意定义
event: 'click', //触发事件
istime: true, //是否开启时间选择
isclear: true, //是否显示清空
issure: true, //是否显示确认
festival: true, //是否显示节日
min: _this.$data.begintime, //最小日期










