js日期插件

推荐一款贤心写的js日期插件,调用非常方便;顺手写了一个demo。

先列举下这款插件的优点:日期范围限制、开始日期设定、自定义日期格式、时间戳转换、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别、快捷键操作、更换皮肤等。

当然还有很重要的一点是使用简单;

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>data_demo</title>
<!-- 引入laydate插件开始 -->
<script type="text/javascript" src="http://www.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

到此结束,可以无视下面这样用来做文章封面的图片;

时间: 2024-10-03 22:53:55

js日期插件的相关文章

laydate JS日期插件

原文出处 简要介绍 你是时候换一款日期控件了,而layDate非常愿意和您成为工作伙伴.她致力于成为全球最用心的web日期支撑,为国内外所有从事web应用开发的同仁提供力所能及的动力.她基于原生JavaScript精心雕琢, 兼容了包括IE6在内的所有主流浏览器.她具备优雅的内部代码,良好的性能体验,和完善的皮肤体系,并且完全开源,你可以任意获取开发版源代码,一扫某些 传统日期控件的封闭与狭隘.layDate本着资源共享的开发者精神和对网页日历交互无穷的追求,延续了layui一贯的简单与易用.她

js 日期插件 datepicker

点击图片出现  时间 ,增加一个点击事件 1 <label for="" class="width80">创建日:</label> 2 <div class="input-group"> 3 <div class="date"> 4 <?= Html::TextInput('search[begin_date]', 5 isset($searchParams['begin_

date.plugin.js 日期插件

//定义命名空间 var DatePlugin; if (!DatePlugin) DatePlugin = {}; /*整理时间:2015-05-28*/ var defaultFormat = "yyyy-MM-dd"; //默认的日期格式 var totalDefaultFormat = "yyyy-MM-dd hh:mm:ss"; var pointFormat = "yyyy.MM.dd"; var slashFormat = &quo

原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org

扩展日期插件

1.请扩展日期插件(/date/js/jq.date.js),使其在select后面自动加上“年”. “月”.“日”;并添加一个参数(lang)控制语言选择:当lang为“chs”时如图1效果,当lang为“eng”如图2效果: 图 1 <!doctype html><html><head><meta charset="utf-8"><title>下拉日期插件</title></head><scr

(转)jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明

(原)http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明 近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好百度.Google啦,找到了两款 jquery-mobile-datebox 和 

Mobiscroll日期插件使用

相关资源 官方帮助文档:https://docs.mobiscroll.com/3-0-1 导入资源文件 <link href="${webRoot}/template/green/wap/module/member/medicinebox/statics/css/mobiscroll.css" type="text/css" rel="stylesheet" /> <link href="${webRoot}/tem

jQuery Mobile 移动开发中的日期插件Mobiscroll使用说明

近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好百度.Google啦,找到了两款 jquery-mobile-datebox 和 mobiscroll-2.3 jqueryMobileDatebox 这个在板上的表现不好,性能方面有点卡 mobiscroll 性能方面比前者要好一些,效果更简洁 ,划动更流畅 放在一起对比下 各位看官,你们觉得哪个

jquery-ui里日期插件的使用

HTML为 <input type="text" id="starttime" readonly /> <input type="text" id="endtime" readonly /> 设置readonly属性,则输入框不可写: 引入必要的js文件和css文件 <link rel="stylesheet" type="text/css" href=&q