JavaScript插件:快速选择日期----jedate日历插件
jedate是一款轻量级JS库,可快速选择日期 http://www.sucaijiayuan.com/Js/DateTime/1371.html
使用方法:
下载jedate , 解压后不要改变文件夹内的目录结构,然后引入jedate.js文件,
<input id="datepicker" placeholder="请选择时间" type="text" readonly/>
var datepickerOptions = {
dateCell:"#datepicker", //目标元素。由于jedate.js封装了一个轻量级的选择器,因此dateCell还允许你传入class、tag这种方式 '#id .class'
format:"YYYY-MM-DD hh:mm:ss", //日期格式
minDate:"1900-01-01 00:00:00", //最小日期
maxDate:"2099-12-31 23:59:59", //最大日期
isinitVal:false, //是否初始化时间
isTime:true, //是否开启时间选择
isClear:true, //是否显示清空
festival:false, //是否显示节日
zIndex:999, //弹出层的层级高度
marks:null, //给日期做标注
choosefun:function(val) {}, //选中日期后的回调
clearfun:function(val) {}, //清除日期后的回调
okfun:function(val) {} //点击确定后的回调
};
jeDate(datepickerOptions);
注意一下几点:
1、
dateCell:"#datepicker", //目标元素。由于jedate.js封装了一个轻量级的选择器,因此dateCell还允许你传入class、tag这种方式 '#id .class'
指定要填充日期的DOM
2、
format:"YYYY-MM-DD hh:mm:ss", //日期格式
返回日期格式,format不同会导致日历界面的不同,例如:
"YYYY-MM"

"YYYY-MM-DD"

"YYYY-MM-DD hh:mm:ss" 同时设置isTime:true,开启时间选择

常见需求一般是选择一个时间格式,因此设置一个函数,传入三个主要参数:
/**
*datePickerInit.js 小工具
使用前提条件-----引入jquery-1.11.3.js jedate.js
*domId : 需要填充日期的DOM元素的id 比如是一个input的id
*format: 需要填充日期的格式 例如 "YYYY-MM-DD hh:mm:ss" "YYYY-MM-DD hh:00:00" "YYYY-MM-DD hh:59:59" "YYYY年MM月DD日 hh时mm分ss秒"
*isTime: 是否开启时间选择
**/
function datePickerInit(domId , format , isTime){
var datePickerOptions = {
dateCell:"#" + domId, //目标元素。由于jedate.js封装了一个轻量级的选择器,因此dateCell还允许你传入class、tag这种方式 '#id .class'
format:format, //日期格式
//minDate:"1900-01-01 00:00:00", //最小日期
//maxDate:"2099-12-31 23:59:59", //最大日期
isinitVal:false, //是否初始化时间
isTime:isTime, //是否开启时间选择
isClear:true, //是否显示清空
festival:false, //是否显示节日
zIndex:999, //弹出层的层级高度
marks:null, //给日期做标注
choosefun:function(val) {}, //选中日期后的回调
clearfun:function(val) {}, //清除日期后的回调
okfun:function(val) {} //点击确定后的回调
};
jeDate(datePickerOptions);
}
即可方便的设置要填充的DOM元素
$(function(){
datePickerInit("datepicker" , "YYYY-MM-DD hh:mm:ss" , true); });
JavaScript插件:快速选择日期----jedate日历插件的更多相关文章
- 【UI插件】简单的日历插件(下)—— 学习MVC思想
前言 我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了 上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么 ...
- js插件讲解_javascript原生日历插件讲解
效果图如下: html代码 <div class="date-control" id="date-control"> <span id=&qu ...
- 原生js日历选择器,学习js面向对象开发日历插件
在web开发过程中经常会碰到需要选择日期的功能,一般的操作都是在文本框点击,然后弹出日历选择框,直接选择日期就可以在文本框显示选择的日期.开发好之后给用户使用是很方便,但如果每一个日历选择器都要临时开 ...
- 一款简洁大气的jquery日期日历插件
本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址:http://keleyi.com/a/bjad/em ...
- javascript日历插件
原文:javascript日历插件 javascript日历插件 最近在尝试着写javascript日历插件,所以也到github上看国外人日历源码,或者国内人写的好点的,也在研究点,虽然看到网上有一 ...
- 完全原生javascript简约日历插件,js、html
效果图: 效果如图所示,尽管看上去并不是很美观,但是,基本上的功能还是已经完成了,码了一天多的时间,权当做复习一下js吧. 整个做下来差不多码了500多行代码~其实只是很多的样式也包括了在其中了,虽然 ...
- jquery双日历日期选择器bootstrap-daterangepicker日历插件
这个插件既可以作为双日历也可以作为单日历插件(jquery的插件在jquery插件库中http://www.jq22.com/下载很方便,在CSDN下载真麻烦) 引用 <meta http-eq ...
- JQuery日历插件My97DatePicker日期范围限制
My97DatePicker是一个非常优秀的日历插件,不仅支持多种调用模式,还支持日期范围限制. 常规的调用比较简单,如下所示: 1 <input class="Wdate" ...
- 记录-JQuery日历插件My97DatePicker日期范围限制
对于日期控件,有时会有不能选择今天以前的日期这种需求..... My97DatePicker是一个非常优秀的日历插件,不仅支持多种调用模式,还支持日期范围限制. 常规的调用比较简单,如下所示: 1 & ...
随机推荐
- 转: wireshark的使用说明
原创者:http://www.cnblogs.com/TankXiao/archive/2012/10/10/2711777.html from: https://mp.weixin.qq.com/ ...
- 【nodejs】理想论坛帖子下载爬虫1.08
//====================================================== // 理想论坛帖子下载爬虫1.09 // 使用断点续传模式,因为网络传输会因各种原因中 ...
- (纪录片)你必须知道的科学 The Science That You Have To Know (2014)
简介: 类型: 纪录片制片国家/地区: 英国语言: 英语上映日期: 2014-2片长: 150分钟 主要内容: 你有没有认真想过,自己的身体有多奇妙?人体是世间最复杂的一项工程杰作,他也带来了一些非常 ...
- ArcGIS 10.4的0x80040228许可错误
今天,再次遇到这个问题,再忙得把它记录下来! AO/AE程序的许可方式 不管是开发环境是基于ArcObject还是基于ArcEngine,不管运行环境是Desktop还是Runtime(早已改名了为A ...
- javascript数组操作大全,数组方法总汇
1. shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,3,4,5] ...
- 利用exif.js解决ios或Android手机上传竖拍照片旋转90度问题
html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...
- SQL Server从BAK文件还原新的数据库
同一个数据库多个副本 很多时候,比如为了方便测试,排查问题,我们常常会拿到问题系统的数据库备份来开发环境下debug,这个时候就会出现同一个数据库的多个副本. 还原法 还原到一个新建的空数据库,在选项 ...
- uva 11346 - Probability(概率)
option=com_onlinejudge&Itemid=8&page=show_problem&problem=2321">题目链接:uva 11346 - ...
- 感谢大家对《Cocos2d-JS开发之旅》的支持
昨天收到一封读者的来信,给我报了个喜,也提了一些非常好的建议. 他通过短短1个月时间就完成了学习和游戏开发,并发布了Android和iOS平台,真了不起.授人以鱼不如授人以渔,这也是写书的最大喜悦吧. ...
- 给mysql配置phpmyadmin可视化管理工具
1.配置IIS管理器1.控制面板——程序——程序和功能——启用或关闭windows功能并稍稍等候2.internet information services3.勾选ftp服务器.web管理工具.应用 ...