又一款牛逼哄哄的日历插件jeDate横空出世



原文:http://www.jayui.com/jedate/index.html

下载:http://download.csdn.net/detail/cometwo/9393326

选择理由
jeDate除了包含日期范围限制、开始日期设定、自定义日期格式、时间戳转换、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别,操作等常规功能外,还拥有更多趋近完美的解决方案。 QQ群:516754269

github下载:github.com/singod/jeDate
注意事项
1、解压后,将jedate整个文件放至您项目的任意目录。
2、使用只需在页面引入jedate.js即可。
使用方法

jeDate({
dateCell:"#test",
format:"YYYY-MM-DD",
isTime:false,
minDate:"2014-09-19 00:00:00"
})

核心方法:jeDate(options)
options是一个对象,它包含了以下key: ‘默认值’

dateCell:”#id”, //需显示日期的元素选择器
format:”YYYY-MM-DD hh:mm:ss”, //日期格式
minDate:”1900-01-01 00:00:00”, //最小日期
maxDate:”2099-12-31 23:59:59”, //最大日期
isinitVal:false, //是否初始化时间
isTime:false, //是否开启时间选择
isClear: true, //是否显示清空
festival:false, //是否显示节日
zIndex:999, //弹出层的层级高度
choose:function(val) {} //选择时间之后的回调函

使用对象
可以使用在文本框与非文本框上:如 input 、 DIV

功能演示

2016年01月29日 18:43:10

请选择

【外部js调用】

jeDate({
dateCell:"#test1", //目标元素。由于jedate.js封装了一个轻量级的选择器,因此dateCell还允许你传入class、tag这种方式 '#id .class'
format:"YYYY年MM月DD日 hh:mm:ss",
isinitVal:true, //显示时间
isTime:true,
festival: true, //显示节日
minDate:"2014-09-19 00:00:00"
})

【图标触发日期】

自定义日期
自定义日期格式:日期范围限定在昨天到明天:
请选择

【自定义日期格式】

jeDate({
dateCell: '#custom1',
format: 'YYYY/MM' // 分隔符可以任意定义,该例子表示只显示年月
});

【日期范围限定在昨天到明天】

jeDate({
dateCell: '#custom2',
format:"YYYY-MM-DD",
minDate: jeDate.now(-1), //0代表今天,-1代表昨天,-2代表前天,以此类推
maxDate: jeDate.now(1) //1代表明天,2代表后天,以此类推
});

这是最简单的实现方式,以后项目就用以下形式

 <!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="js/jeDate.min.js"></script>
        <link rel="stylesheet" href="css/jedate.css" />
        <link href="css/prism.css" />
        <style>
            input {
                display: block;
                margin: 20px;
                width: 240px;
                height: 30px;
                border:1px solid #0E90D2 ;
                text-indent: 5px;
                background: url(icon.png) no-repeat 210px;
            }
            pre{
                margin-left: 30px;
                color: red;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                jeDate({
                    dateCell: "#indate0", //isinitVal:true,
                    format: "YYYY-MM-DD",
                    isTime: false, //isClear:false,
                    choose:function(val) {alert('选择后的回调函数')},
                    minDate: "2014-09-19 00:00:00"
                })
                jeDate({
                    dateCell: "#indate1",
                    isinitVal: true,
                    isTime: true, //isClear:false,
                    minDate: "2014-09-19 00:00:00"
                })
                jeDate({
                    dateCell: "#indate2", //目标元素。由于jedate.js封装了一个轻量级的选择器,因此dateCell还允许你传入class、tag这种方式 '#id .class'
                    format: "YYYY年MM月DD日 hh:mm:ss",
                    isinitVal: true, //显示时间
                    isTime: true,
                    isClear: true,
                    festival: true, //显示节日
                    minDate: "2014-09-19 00:00:00"
                })
                jeDate({
                    dateCell: '#indate3',
                    format: 'YYYY/MM' // 分隔符可以任意定义,该例子表示只显示年月,这一点牛逼
                })
                jeDate({
                    dateCell: '#indate4',
                    format: "YYYY-MM-DD",
                    minDate: jeDate.now(-1), //0代表今天,-1代表昨天,-2代表前天,以此类推
                    maxDate: jeDate.now(5) //1代表明天,2代表后天,以此类推
                })
            }
        </script>
    </head>

    <body>
        <input id="indate0" type="text" placeholder="请选择">
        <input id="indate1" type="text" placeholder="请选择">
        <input id="indate2" type="text" placeholder="请选择">
        <input id="indate3" type="text" placeholder="显示月">
        <input id="indate4" type="text" placeholder="请选择">
        <pre>
1、解压后,将jedate整个文件放至您项目的任意目录。
2、使用只需在页面引入jedate.js和jedate.css即可。
核心方法:jeDate(options):options是一个对象,它包含了以下key: '默认值'

<code>
dateCell:"#id", //需显示日期的元素选择器
format:"YYYY-MM-DD hh:mm:ss",   //日期格式
minDate:"1900-01-01 00:00:00",   //最小日期
maxDate:"2099-12-31 23:59:59",  //最大日期
isinitVal:false,   //是否初始化时间
isTime:false,     //是否开启时间选择
isClear: true,    //是否显示清空
festival:false,   //是否显示节日
zIndex:999,   //弹出层的层级高度
choose:function(val) {}  //选择时间之后的回调函
</code>
        </pre>
    </body>

</html>

就你妈缺一张图片:

时间: 2024-11-01 22:15:21

又一款牛逼哄哄的日历插件jeDate横空出世的相关文章

如何成为一名牛逼的产品经理

摘要: 前言: 师兄,我们这款产品的核心功能是要达到XXX,可以采用XX技术来实现,这样可能会比较好,且,你管我用什么技术,我能给你实现就好了,你又不懂技术,瞎扯什么蛋呢?瓜兮兮嘞 前言: "师兄,我们这款产品的核心功能是要达到XXX,可以采用XX技术来实现,这样可能会比较好","且,你管我用什么技术,我能给你实现就好了,你又不懂技术,瞎扯什么蛋呢?瓜兮兮嘞--" "美女,这个UI可以加宽Xpx.加高Xpx会更好看,用XX修图软件可以处理得更棒"

老鱼看会:低调才是最牛逼的炫耀!

文章讲的是老鱼看会:低调才是最牛逼的炫耀!一群平均年龄只有27岁的年轻人,创造了一款每天有200万人使用的产品,并创造了年近2亿元的销售额,却低调的鲜为人知! ▲题图来自帆软吉祥物:悟帆 "低调"笔者认为最好的诠释是"能高调但不高调".虽然不是很显眼甚至不被人所熟知,可实质上它是在观察.积累.沉淀,在最适当的时候释放!告诉身边的每一个人什么是真正的光彩夺目! 近日,笔者就参加了这样一场低调的活动.一个厂商(非第三方)举办的大会,没有红头文件,到场117家银行,而且参

浅谈个人对百度筷搜的看法:真的很牛逼 但也吹了牛皮!

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 百度筷搜是个好产品,抛开技术层面不谈,起码比谷歌眼睛来的更实在. 往大了说,这是可以影响到我大中国全民健康与国运的一个产品(呵呵-). 往小了说,如果一款长的很像筷子的智能11585.html">硬件设备,跟手机上装的app配合使用,可以检测油品.水品.果蔬品,甚至还能检测营养成分.产地.保质期等,是不是觉得很酷炫狂拽吊炸天啊

你不牛逼,认识再多牛逼的人,也与你无关(转)

寂静的夜,人们总是习惯在这个时候,去独自思考人生.回想过往的辉煌与落寞.至少我是这样,在我工作近十年的时间里,这个"恶习"一直陪伴着我.在深夜,我会复盘曾经失去的钱权与感情,尝试着找寻其中的规律,让自己在下一次尽量避免.事实也的确如此,同样的错误我很少在遇到.当然,有种错误叫做"原则",这个我是没有办法避免的. 有人曾经问我这样会不会很累,其实我也不知道.虽然我每天只休息 4 个小时不到,但是却依然可以精神充沛,也许是我爱我的职业.至于问我这个问题的朋友,现在已经返

别在论坛发广告外链了,学学牛逼人物牛逼的推广方式吧

别在论坛发广告外链了,跟个贴小广告似的,不但不会提高网站知名度,还会让人觉得你这个企业不权威,就个二流产品,学习一下那些牛逼的人物,做的牛逼的推广方式吧. 土豪式 柴静掏100万拍雾霾?这是一个很好的选择,这100万是花的值的,如果是某一个绿化.景观等企业老板去做一件这样的事情,我相信他的公司会发展的很壮观.但耗资100万不是每一个老板都能够做到的,方法确实是一个好方法,但不是每一个人都可以做. 才艺式 你是咋知道知乎的?我的回答是,我是在非诚勿扰上知道知乎的,不记得是什么时候了,知乎COO上非

Bootstrap嵌入jqGrid,使你的table牛逼起来_jquery

Bootstrap原生的table组件只能满足简单的数据展示,满足不了更富有操作性的要求.当然了,你可以找到一款叫做"DataTables-1.10.11"的基于bootstrap的table组件,但如果你对API看得不甚了解的话,用起来可就痛苦了,但是如果你选择使用jqGrid,那么本篇教程就给你带来了解决这种富操作性table的解决方案. 一.效果展示 OK,就展示这一张图片,相信你已经爱上了bootstrap版的jqGrid,和bootstrap很兼容,简直完美,当然了,这需要我

用好用厉害牛逼这类情感化字眼来形容一家创业公司

基于媒体的节操,我们很少会用"好用""厉害""牛逼"这类情感化字眼来形容一家创业公司.但至少在在线表单这个领域,请容我轻轻地赞一下"问卷网". 正如我们之前所写的,"问卷网"是一个体验十分简洁的在线表单平台.该平台应用了大量的拖拽式操作,提供了问卷所见即所得的体验,模板比较丰富,问卷逻辑设置也比较完善,而且包括一些高级功能在内一直免费(当然不是不赚钱,但"问卷网"团队表示"我有

蓝港在线王峰创业这些年 被评“越想牛逼 越不牛逼”

蓝港在线CEO王峰 注:发表此文,不代表完全赞同文章观点,仅供了解王峰创业这些年的冰山一角. 1.互联网公司有种有趣的离职文化,离开某个有话题性公司的人扎堆开个QQ群,起个耐人寻味的名儿.百度出来叫"百老汇",盛大出来叫"盛斗士",金山出来叫"旧金山".在旧金山大军中,王峰属于资历辈份比较老的一位,曾与求伯君.雷军并称"金山三杰". 金山三杰中,时来运转的雷军凭借小米手机以及一系列成功的天使投资,混得风生水起;求伯君手握大量金

礼物说创始人温城辉:牛逼的90后你们永远黑不完

文| 温城辉(礼物说创始人)佳文前段时间上了一档节目,这几天关于他的各种评论天天刷屏,刚开始还是赞扬的声音,而这一两天媒体为了抢眼球纷纷都粉转黑,到处都是吐槽和批评,批评到一向不 care 外界言论的佳文都开始写回应.我和佳文有很多共同点,我们都是 90 后的创业者,都是红杉资本投的移动互联网公司,都在做着一家有数百万用户的公司.我高中的时候和佳文一样让人觉得很狂妄,可惜我没有一直保持狂妄下去,要是我还和当年一样,估计今天故事的主角就是我了.今天我在上海出差,和德邦物流的崔总.晨光文具的陈总聊了