js日期插件

推荐一款贤心写的js日期插件;
调用非常方便;
顺手写了一个demo。
先列举下这款插件的优点:
日期范围限制;
开始日期设定;
自定义日期格式;
时间戳转换;
当天的前后若干天返回;
时分秒选择;
智能响应;
自动纠错;
节日识别;
快捷键操作;
更换皮肤等。
当然还有很重要的一点是使用简单;
代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>data_demo</title>
<!-- 引入laydate插件开始 -->
<script type="text/javascript" src="http://baijunyao.com/Demo/date_demo/laydate-v1.1/laydate.js"></script>
<!-- 引入laydate插件结束 -->
</head>
<body>
<!-- 基础日期调用开始 -->
基础调用开始:<input onclick="laydate()">
<!-- 基础日期调用结束 -->
<br><br>
<!-- 带时间时分秒调用开始 -->
带时间时分秒调用:<input onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
<!-- 带时间时分秒调用结束 -->
<br><br>
<!-- 带时间、带图标调用开始 -->
带时间、带图标调用:<input onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
<!-- 带时间、带图标调用结束 -->
<br><br>
<!-- 外部js简单调用开始 -->
外部js简单调用:<input id="hello">
<script type="text/javascript">
laydate({
    elem: '#hello', //需显示日期的元素选择器
    event: 'focus' //响应事件。如果没有传入event,则按照默认的click
});
</script>
<!-- 外部js简单调用结束 -->
<br><br>
<!-- 外部js设置具体参数调用开始 -->
外部js设置具体参数调用:<input id="test">
<script type="text/javascript">
/*方法属性开始*/
    laydate.skin('molv'); // 设置皮肤 官方默认可以调用的皮肤有'default'、'dahong'、'molv' 此版本已集成了'default'、'dahong'、'molv'、'danlan'、'yalan'、'qianhuang'、'yahui'、'huanglv'
    var tody=laydate.now('-2'); // laydate.now(timestamp, format); timestamp可以是前后若干天,也可以是一个时间戳。format为日期格式,为空时则采用默认的“-”分割。如laydate.now(-2)将返回前天,laydate.now(3999634079890)将返回2096-09-28
/*方法属性结束*/
/*参数设置开始*/
    laydate({
        elem: '#test', //需显示日期的元素选择器
        event: 'mouseover', //触发事件 可以调用的事件'click'、'focus'、'mouseover'、'mouseout'等
        format: 'YYYY/MM/DD hh:mm:ss', //日期格式
        istime: false, //是否开启时间选择
        isclear: true, //是否显示清空
        istoday: true, //是否显示今天
        issure: true, //是否显示确认
        festival: true, //是否显示节日
        min: '2015-03-01 00:00:00', //最小日期
        max: '2015-04-01 23:59:59', //最大日期
        start: laydate.now(),    //开始日期 例如:'2015-04-01 23:59:59' 此处是先用laydate.now('-1')获得了昨天的时间
        fixed: false, //是否固定在可视区域
        zIndex: 99999999, //css z-index
        choose: function(dates){ //选择好日期后的回调
            alert(tody);
        }
    })
/*参数设置结束*/
</script>
<!-- 外部js设置具体参数调用结束 -->
</body>
</html>

demo下载链接:http://pan.baidu.com/s/1qW6zHoC
到此结束;
可以无视下面这样用来做文章封面的图片;
白俊遥博客

 白俊遥博客
请先登录后发表评论
  • 最新评论
  • 总共4条评论
 白俊遥博客

蝌蚪:白老大,这个插件怎么获取value啊

2017-06-17 16:36:24 回复

 白俊遥博客
  • 云淡风晴 回复 蝌蚪:和正常的input一样;
  • 2017-06-18 22:06:02 回复
 白俊遥博客

断肠人:用html5的date也是非常方便,不用引入什么js

2016-10-20 11:08:09 回复

 白俊遥博客
  • 云淡风晴 回复 断肠人:要是能忍默认的那个样式的丑;也行;
  • 2016-10-22 00:41:02 回复
 白俊遥博客

{"name":"路人黄"}

2016-09-20 15:11:27 回复

 白俊遥博客

孤城浪子:一直用的jquery.datetimepicker,有机会用用你推荐这个

2016-09-10 18:22:49 回复

  • 本站使用自主开发的laravel-bjyblog开源博客程序搭建 © 2014-2017 baijunyao.com 版权所有 ICP证:豫ICP备14009546号-3
  • 联系邮箱:baijunyao@baijunyao.com