<template>
<div class="tabNavContent">
<div class="cont_title">
<h3>日期选择器</h3>
</div>
<div class="cont_body clearfix">
<div class="cont_demo">
<!-- <div class="date"><span>基础</span><input type="text" class="jcDate" /></div>
<div class="date date-hover"><span>hover</span><input type="text" class="jcDate" /></div>
<div class="date date-disabled"><span>禁用</span><input type="text" class="jcDate" disabled="" /></div> -->
<div style="margin-bottom: 25px;">
<span>基础</span>
<web-date :dateMsg="dateMsg0"></web-date>
</div>
<div style="margin-bottom: 25px;">
<span>点击</span>
<web-date :dateMsg="dateMsg1"></web-date>
</div>
<div style="margin-bottom: 25px;">
<span>禁用</span>
<web-date :dateMsg="dateMsg2"></web-date>
</div>
</div>
<div class="cont_code">
<a class="btn-code-copy" data-clipboard-action="copy" data-clipboard-target="#date_code"></a>
<pre id="date_code">
<web-date :dateMsg="dateMsg0"></web-date>
<web-date :dateMsg="dateMsg1"></web-date>
<web-date :dateMsg="dateMsg2"></web-date>
</pre>
</div>
</div>
<div class="">
<div class="cont_title">
<h3>使用说明</h3>
</div>
<div class=" cont_body info_des clearfix">
<div class="cont_demo min_h">
<ul>
<li>
<p class="inof_title">常用参数：</p>
<p><span>id :</span><span> 日期组件id</span></p>
<p><span>type :</span><span> 日期类型 0,1,2</span></p>
<p><span>disable :</span><span> 控制日期组件状态：不可用disabled</span></p>
<p><span>options :</span><span> laydate配置项</span></p>
<p class="inof_title">laydate常用参数options</p>
<ul>
<li>
<p><span>elem :</span><span> 绑定元素</span></p>
<p><span>type :</span><span> 控件选择类型,默认：date,可取值：year，month，time（时间），datetime（日期时间）</span></p>
<p><span>range :</span><span> 开启左右面板范围选择</span></p>
<p><span>format :</span><span> 自定义格式如'yyyy-MM-dd'</span></p>
<p><span>value :</span><span> 初始值</span></p>
<p><span>min/max :</span><span> 最小/大范围内的日期时间值</span></p>
<p><span>showBottom :</span><span> 是否显示底部栏</span></p>
<p><span>ready:</span><span> function 控件初始打开的回调</span></p>
<p><span>change:</span><span> 日期时间被切换后的回调</span></p>
<p><span>dine:</span><span> 控件选择完毕后的回调</span></p>
</li>
</ul>
</li>
<li>
<p>引入文件有：laydate.js及common/theme/default/laydate.css</p>
</li>
<li>参照网址：<a href="http://www.layui.com/doc/modules/laydate.html">laydate</a></li>
</ul>
</div>
<div class="cont_code min_h">
<a class="btn-code-copy" data-clipboard-action="copy" data-clipboard-target="#date_use"></a>
<pre id="date_use">
//在data中设置,不同参数：
data(){
return{
dateMsg0: {id:'test1',options:{
elem: '#test1' ,
theme: 'white',
showBottom: false ,
trigger: 'click',
done: function (date) {
}
}
},
dateMsg1: {id: 'test2', type: '1'},
dateMsg2: {id: 'test3', disable: 'disabled', type: '2'},
}
},
//调用option参数说明：
option
laydate.render({
elem: '#test1', //指定元素
format:'yyyy-MM-dd',//自定义格式
value:'',//初始值
min:'',//最小值
max:'',//最大值
theme:'white',//皮肤
btns:['confirm'],//工具按钮 默认['clear', 'now', 'confirm']
showBottom: false,//是否显示底部操作栏
change:function(value, date, endDate){//日期时间被切换后的回调
},
done:function(value, date, endDate){//选择完毕后的回调
}
});
</pre>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'date',
data(){
return{
dateMsg0: {id:'test1',options:{
elem: '#test1' ,
theme: 'white',
showBottom: false ,
trigger: 'click',
done: function (date) {
}
}
},
dateMsg1: {id: 'test2', type: '1'},
dateMsg2: {id: 'test3', disable: 'disabled', type: '2'},
}
},
mounted () {
this.copy = this.clipboardCopy();
$('#date_use').snippet("javascript", { style: "acid", collapse: false});
$('#date_code').snippet("javascript", { style: "acid", collapse: false});
},
methods:{
app:function(){
}
},
destroyed(){
this.copy.destroy()
}
}
</script>