原生JS时间格式处理与layDate使用

原生JS处理日期，将时间戳进行格式化 

 //日期处理
                        const time=data.data.data[i].createTime;//将获取的时间定义变量

                        //对时间的处理
                        var date = new Date(time);
                        Date.prototype.Format = function(fmt) {
                            var o = {
                                "M+" : this.getMonth()+1,                 //月份
                                "d+" : this.getDate(),                    //日
                                "h+" : this.getHours(),                   //小时
                                "m+" : this.getMinutes(),                 //分
                                "s+" : this.getSeconds(),                 //秒
                                "q+" : Math.floor((this.getMonth()+3)/3), //季度
                                "S"  : this.getMilliseconds()             //毫秒
                            };
                            if(/(y+)/.test(fmt))
                                fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
                            for(var k in o)
                                if(new RegExp("("+ k +")").test(fmt))
                                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                            return fmt;
                        };
                        var currentDate =date.Format("yyyy-MM-dd");//2018-01-14
                        //currentDate为最后处理的时间格式自己定

                        datas +='<td data-field="createTime">'+currentDate+'</td>';

LayDate使用

依然是项目需要，在input中加入时间，完成一个搜索功能。

起初的时候考虑过给type加date属性，但是固定格式的原因，placeholder失效了就，所以选择了layDate，功能很多，代码轻量，下面是HTML部分，重要的有两部分

（1）class="layer-date"

（2）onclick="laydate({format: 'YYYY-MM-DD'})"

<form action="" class="modelHead">
    <input type="text" class="layer-date" placeholder="开始时间"  id="startDate" onclick="laydate({format: 'YYYY-MM-DD'})">
    <input type="text" class="layer-date" placeholder="结束时间"  id="endDate" onclick="laydate({format: 'YYYY-MM-DD'})">
    <button type="button" class="btn  btn-success" onclick="searchShopOrder()">搜索</button>
</form>

下面是JS部分，要配置layDate的一些属性，具体的属性代码中有注释。这里还是引入了一个小库，也是一个轻量级的日期处理库，因为需求要求两个input分别获取到当前月的第一天和最后一天，所以还对日期进行了处理，用了xDate.js。获取当前日期可用laydate.now( )来实现。这里额外对日期进行了处理。

<!-- layerDate plugin javascript -->
<script src="js/plugins/layer/laydate/laydate.js"></script>
<script src="js/xdate.js"></script>

<!--inputDateScript-->
<script type="text/javascript">
    var start = {
        elem: '#startDate',//获取到input的id
        format: 'YYYY-MM-DD',//日期格式，可根据需求修改
        max: laydate.now(),
        istime: false,
        istoday: false,
        choose: function (datas) {
            end.min = datas; //开始日选好后，重置结束日的最小日期
            end.start = datas //将结束日的初始值设定为开始日
        }
    };
    var end = {
        elem: '#endDate',
        format: 'YYYY-MM-DD',
        max: laydate.now(),
        istime: false, //是否开启时间选择
        istoday: false,
        isclear: true, //是否显示清空
        issure: true, //是否显示确认
        choose: function (datas) {
            start.max = datas; //结束日选好后，重置开始日的最大日期
        }
    };
    laydate(start);
    laydate(end);
    //给input赋值

    //获取当前月第一天和最后一天
    let firstDate = new Date();
    firstDate.setDate(1); //第一天
    let endDate = new Date(firstDate);
    endDate.setMonth(firstDate.getMonth()+1);
    endDate.setDate(0);

    $('#startDate').val(new XDate(firstDate).toString('yyyy-MM-dd'));
    $('#endDate').val(new XDate(endDate).toString('yyyy-MM-dd'));

</script>