记录 第一次使用 VUE vue-datepicker 日期控件
1.首先导入 :2. html代码: <myDatepicker :date="startTime" :option="multiOption" :limit="limit" v-model="dataForm.createDate" ></myDatepicker>3.js代码:<script>import myDatepicker fro...
1.首先导入 :
2. html代码: <myDatepicker :date="startTime" :option="multiOption" :limit="limit" v-model="dataForm.createDate" ></myDatepicker>
3.js代码:
<script>
import myDatepicker from 'vue-datepicker/vue-datepicker-es6.vue'
export default {
data () {
return {
visible: false,
dataForm: {
id: 0,
num: '',
name: '',
desc: '',
createDate: '',
createBy: '',
updateDate: '',
updateBy: ''
},
startTime: { // 相当于变量
time: ''
},
multiOption: {
type: 'min',
week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
month: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
//format:"YYYY-M-D HH:mm",
format:"YYYY-M-D",
inputStyle: {
'display': 'inline-block',
'padding': '6px',
'line-height': '22px',
'width':'160px',
'font-size': '16px',
'border': '2px solid #fff',
'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',
'border-radius': '2px',
'color': '#5F5F5F',
'margin':'0'
},
color: { // 字体颜色
header: '#35acff', // 头部
headerText: '#fff', // 头部文案
},
buttons: { // button 文案
ok: '确定',
cancel: '取消'
},
placeholder: '请选时间',
dismissible: true
},
limit: [{
type: 'weekday',
available: [1, 2, 3, 4, 5,6,0]
},
{
type: 'fromto',
from: '2016-02-01',
to: '2050-02-20'
}]
}
},
components:{
myDatepicker
}
}
</script>
4效果:
更多推荐
所有评论(0)