date

<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">

&lt;web-date :dateMsg="dateMsg0"&gt;&lt;/web-date&gt;

&lt;web-date :dateMsg="dateMsg1"&gt;&lt;/web-date&gt;

&lt;web-date :dateMsg="dateMsg2"&gt;&lt;/web-date&gt;

</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>