laydate日期选择插件蓝色风格自定义及使用Demo

今天给大家介绍的是一款日期选择插件，下面是官网地址

http://laydate.layui.com/ 





这是本人修改后的laydate插件包下载地址

链接：http://pan.baidu.com/s/1hrXRKJ6   密码：yo5u

记住引用laydate.js后还必须要css基础包need文件夹下，skins是皮肤包，可以自己定义

laydate.skin('molv'); 加载皮肤的语法  

注：官方还有8种左右的皮肤，当然您也可以根据自己的项目调整皮肤哦

部分基础语法

laydate({  

        elem: '#ordering', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'  

        event: 'focus', //响应事件。如果没有传入event，则按照默认的click

        format: 'YYYY-MM-DD hh:mm:ss', // 分隔符可以任意定义，该例子表示只显示年月

        istime: true, //是否开启时间选择

        min: currentTime, //最小日期

        max: maxTime, //最大日期

        start: currentTime,  //开始日期  

    }); 

以下是我的使用代码

<script>  

    

    /*当前时间*/

    var todayDate = new Date();

    var maxDate = new Date();

    var currentTime = getNowFormatDateToDay(todayDate);

    /*当前时间加上15天*/

    maxDate.setDate(todayDate.getDate()+15);

    var maxTime = getNowFormatDate(maxDate);

    laydate.skin('zjj');

    laydate({  

        elem: '#ordering', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'  

        event: 'focus', //响应事件。如果没有传入event，则按照默认的click

        format: 'YYYY-MM-DD hh:mm:ss', // 分隔符可以任意定义，该例子表示只显示年月

        istime: true, //是否开启时间选择

        min: currentTime, //最小日期

        max: maxTime, //最大日期

        start: currentTime,  //开始日期  

    }); 

    

    function getNowFormatDate(date) 

    {//返回时间格式

        var seperator1 = "-";

        var seperator2 = ":";

        var month = date.getMonth() + 1;

        var strDate = date.getDate();

        if (month >= 1 && month <= 9) {

            month = "0" + month;

        }

        if (strDate >= 0 && strDate <= 9) {

            strDate = "0" + strDate;

        }

        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate

                + " " + date.getHours() + seperator2 + date.getMinutes()

                + seperator2 + date.getSeconds();

        return currentdate;

    }

    function getNowFormatDateToDay(date) 

    {//返回时间格式【不精确到时间】

        var seperator1 = "-";

        var seperator2 = ":";

        var month = date.getMonth() + 1;

        var strDate = date.getDate();

        if (month >= 1 && month <= 9) {

            month = "0" + month;

        }

        if (strDate >= 0 && strDate <= 9) {

            strDate = "0" + strDate;

        }

        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;

        return currentdate;

    }

</script>  

值得一提的是，laydate并不依赖jq哦，它自带了一套轻量级的DOM查找

以上就是我为大家带来的分享，希望大家可以一起学习，共同进步

编辑@前端小喻