浅析jquery ui的datepicker组件
今天计划在博客上添加一个日历,方便用户查看日期。Google了一圈,最终决定使用jquery ui的datepicker部件实现。原因有三:Datepicker使用配置比较简洁,几行代码就可以得到一个简易日历;其有详细的说明文档和参考资料;可扩展性强,而且支持定制化界面。
首先是依赖文件的引入。可以使用在线资源,也可以通过bower下载到本地。我是下载到了一个public文件夹下,所以在代码开始时候,添加标签:
<link rel="stylesheet" href="public/lib/jquery-ui/themes/flick/jquery-ui.css"> //themes文件夹有25个子文件夹,引入各文件夹下的jquery-ui.css,就可以使用不同的日历背景风格
<script src="public/lib/jquery/dist/jquery.js"></script>
<script src="public/lib/jquery-ui/jquery-ui.min.js"></script>
<script src="public/lib/jquery-ui/ui/i18n/datepicker-zh-CN.js"></script> //本地化,引入i18n下的各个文件,可以让日历显示为相应的语言,默认情况下是英语
上手比较简单,以内嵌日历为例:
<div class="datePicker"></div>
<script>
$(".datePicker").datepicker();
</script>
就可以得到一个简单的flick风格的日历,并且日历的内容就会用中文而不是英文显示。还有几个比较常用的配置,我们用来完成一个比较完整的日历:
<div class="datePicker"></div>
<script>
$(".datePicker").datepicker({
changeYear: true, //是否在日历上以下拉菜单的形式显示可选年份,方便用户在不同年份之间跳转
changeMonth:true, //是否在日历上以下拉菜单形式显示可选月份
showButtonPanel:true //为选择当天日期显示一个"Today"按钮
});</script>
效果图如下:
浅析jquery ui的datepicker组件的更多相关文章
- jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
这篇文章主要介绍了jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate),需要的朋友可以参考下 使用jQuery ui首先需要引入jQuery类库 ...
- 5-15 bootcss 之 modal 以及 jquery ui 之datepicker 小记
最近公司在用bootstrap和Jquery UI做项目,类似与OA的东西前两天碰到点问题,记录一下.希望读者不要在遇到和我一样的问题. 1 datepicker.不知道怎么自己下载的bootcss里 ...
- Jquery UI的datepicker插件使用方法
原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,并且UI的各部分插件可以独自分离出来使用,这是其他很多Jquery插件没有的 ...
- Jquery UI的datepicker插件使用
原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,而且UI的各部分插件能够独自分离出来使用.这是其它非常多Jquery插件没有 ...
- jQuery UI的datepicker日期控件如何让他显示中文
首先是引入UI的JS文件和模板文件,如下: <link rel=”stylesheet” href=”./ui/themes/le-frog/jquery.ui.all.css”> < ...
- BootStrap、jQuery UI、bxSlider组件使用
组件的使用 首先需要将组件下载下来放在统同级目录下 导入组件 使用组件 BootStrap 示例: <!DOCTYPE html> <html lang="en" ...
- jQuery UI的datepicker()与变更格式
继续MVC应用程序的练习,刚刚练习了jQuery的UI中的datepicker()的方法,它是为了让用户能在文本框中快捷输入日期. 代码简洁与简单. 打开以前练习的一个视图Views\Home\Ind ...
- Jquery UI 中Tree组件的json格式,java递归拼接demo
数据库中表数据,如下图: 实现的需求是,如果suporgcode数据为null 的情况下,表示在一级节点 "请选择" 的二级节点,然后是如:3和36 是1的子节点,一步一步的节点延 ...
- Jquery ui datepicker 设置日期范围,如只能隔3天
最近的后台项目前端使用了jquery ui 日历控件自然就使用了jquery ui 的 datepicker 后台数据比较好大,一般是千万级的和百万级的关联,查询会很慢,所以后加想多加些过滤条件, ...
随机推荐
- 炉石ZZ操作 [20161224]
昨天吃完晚饭,开了一盘炉石.选的龙牧,遇到对面马克扎尔战士. 中途,我场上3个较大随从,他突然先拍下一个铜须,菊花一紧,然后果然拍下了大工匠(之前用龙人侦察者看到他牌库有这张牌),逗比的一幕开始了,首 ...
- 评论Beta版本发布
1. 新蜂:俄罗斯方块 俄罗斯方块在完成了核心的游戏部分基础上增加了两个小功能,后续的内容还一些没完成,所以界面空出来很多板块,当前版本加入了下一个方块的预览功能,还加入了本地磁盘的排行榜.但是比起 ...
- (Collection)347. Top K Frequent Elements
Given a non-empty array of integers, return the k most frequent elements. For example,Given [1,1,1,2 ...
- Spring注解学习
参考链接 http://blog.csdn.net/xyh820/article/details/7303330/
- 将Web站点由IIS6迁移至IIS7
最近开始着手逐步将所有的Web站点由Win2003+IIS6迁移至64位Win2008+IIS7,基本还算顺利.这里就把相关内容整理总结一下.首先自然是要安装基本运行环境,包括iis,.net fra ...
- 从头开始学算法--NUM operation in MIX
从前往后,按照课本顺序刚刚看到MIX这部分.NUM是一个转换操作符,可以把字符编码转换为数字.它把registerA & registerX的值转换为数字并赋值给registerA.转换过程是 ...
- win7远程桌面恢复全屏状态快捷键
不同的电脑可能有不同的快捷键(有些笔记本电脑甚至没有相应的键值):①台式机:ctrl+alt+break 组合键.②CTRL+ALT+PAGEDOWN 组合键.③有的笔记本没有break键,可以尝试加 ...
- android需知小细节
1. 布局文件命名不能包含大写字母,特殊字符.MyImageView.xml错误. 2. simpleAdapter适配器参数的含义: 3. gridview gridview的三个重要的属性: 4 ...
- asp.net忘记密码功能
//调用接口 post public string GetResponseByPost(string mobile, string messcode, string values, string ut ...
- 【SSM 8】spring集成Mybatis通用Mapper
上篇博客中介绍了关于Mybatis底层封装的思路问题,那么这篇博客,就介绍一下怎么引入通用的mapper插件. 备注:本项目通过maven管理 关键版本说明: spring:4.1.3.RELEASE ...