• 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>
  • 相关阅读:
    我的第一个JAVA程序
    根据分辨率改变宽度 demo
    CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8
    学习lofter 让图片适应各个分辨率的方法
    浮点数剖析
    day03<Java语言基础+>
    ASCII码表完整版
    day02<Java语言基础+>
    day01<计算机基础知识&Java语言基础>
    Java集合----概述、Collection接口、Iterator接口
  • 原文地址:https://www.cnblogs.com/mx2036/p/9357711.html
Copyright © 2020-2023  润新知