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日历插件的更多相关文章

  1. 【UI插件】简单的日历插件(下)—— 学习MVC思想

    前言 我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了 上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么 ...

  2. js插件讲解_javascript原生日历插件讲解

    效果图如下: html代码 <div class="date-control" id="date-control"> <span id=&qu ...

  3. 原生js日历选择器,学习js面向对象开发日历插件

    在web开发过程中经常会碰到需要选择日期的功能,一般的操作都是在文本框点击,然后弹出日历选择框,直接选择日期就可以在文本框显示选择的日期.开发好之后给用户使用是很方便,但如果每一个日历选择器都要临时开 ...

  4. 一款简洁大气的jquery日期日历插件

    本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址:http://keleyi.com/a/bjad/em ...

  5. javascript日历插件

    原文:javascript日历插件 javascript日历插件 最近在尝试着写javascript日历插件,所以也到github上看国外人日历源码,或者国内人写的好点的,也在研究点,虽然看到网上有一 ...

  6. 完全原生javascript简约日历插件,js、html

    效果图: 效果如图所示,尽管看上去并不是很美观,但是,基本上的功能还是已经完成了,码了一天多的时间,权当做复习一下js吧. 整个做下来差不多码了500多行代码~其实只是很多的样式也包括了在其中了,虽然 ...

  7. jquery双日历日期选择器bootstrap-daterangepicker日历插件

    这个插件既可以作为双日历也可以作为单日历插件(jquery的插件在jquery插件库中http://www.jq22.com/下载很方便,在CSDN下载真麻烦) 引用 <meta http-eq ...

  8. JQuery日历插件My97DatePicker日期范围限制

    My97DatePicker是一个非常优秀的日历插件,不仅支持多种调用模式,还支持日期范围限制. 常规的调用比较简单,如下所示: 1 <input class="Wdate" ...

  9. 记录-JQuery日历插件My97DatePicker日期范围限制

    对于日期控件,有时会有不能选择今天以前的日期这种需求..... My97DatePicker是一个非常优秀的日历插件,不仅支持多种调用模式,还支持日期范围限制. 常规的调用比较简单,如下所示: 1 & ...

随机推荐

  1. java 上传图片压缩

    public static void uploadFile(MultipartFile multfile, String filePath) throws Exception { File targe ...

  2. Andorid 翻书效果

    本文内容 项目结构 环境 演示 参考资料 翻书效果,主要采用绘制贝塞尔曲线的方法.本文有三个演示: 简单翻书效果.翻下一页后,当前页不会消失. 翻书时的贝塞尔曲线.演示翻书时,贝塞尔曲线的路径和要素. ...

  3. Android 分析 Android 应用结构

    本文说明 Android 项目组成,虽然简单,但决不能忽视. 当你从简单 Hello World 程序,到会实现一些常见功能,比如,下拉(上拉)刷新最新(加载更多),消息处理(UI 通知更新),Vie ...

  4. Android 之 获取地理位置及监听

    第一步.添加权限 <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> ...

  5. C# FTP常规方法

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  6. Java BIO、NIO、AIO 学习

    正在学习<大型网站系统与JAVA中间件实践>,发现对BIO.NIO.AIO的概念很模糊,写一篇博客记录下来.先来说个银行取款的例子: 同步 : 自己亲自出马持银行卡到银行取钱(使用同步IO ...

  7. 【Linux 驱动】Netfilter/iptables (八) Netfilter的NAT机制

    NAT是Network Address Translation的缩写,意即"网络地址转换". 从本质上来说,是通过改动IP数据首部中的地址,以实现将一个地址转换成还有一个地址的技术 ...

  8. 排序基础之插入排序、冒泡排序、选择排序详解与Java代码实现

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6594533.html  一:插入排序==逐个往前相邻数比较交换,小的在前 第一轮:A[1]与A[0]比较,小的 ...

  9. RabbitMQ学习笔记1-hello world

    安装过程略过,一搜一大把. rabbitmq管理控制台:http://localhost:15672/   默认账户:guest/guest RabbitMQ默认监听端口:5672 JAVA API地 ...

  10. 11、java5线程池之异步任务CompletionService

    JDK文档描述: public interface CompletionService<V> 将生产新的异步任务与使用已完成任务的结果分离开来的服务.生产者 submit 执行的任务.使用 ...