该公司的项目使用的插件时间选择,百度很长一段时间。没有找到合适的,而且,他们在看了jqueryUI。自己变成一个更好的集成日期选择器。为了以后遇到相同的问题是可以解决。

以下就贴出部分使用的代码,比較简单,可是非常有用!!!

<!doctype html>
<html lang="en"> <head>
<meta charset="utf-8">
<title>jQuery UI 日期选择器(Datepicker) - 默认功能</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<!-引入jqueryUI的相关文件-->
<style>
#draggable {
width: 150px;
height: 150px;
padding: 0.5px;
border: 1px solid #F00
}
</style>
<script>
$(function() {
$("#datepicker").datepicker({
showOtherMonths: true,
selectOtherMonths: true,
showButtonPanel: true,
/*显示今天的日期的显示。以及关闭时间选择器*/
changeMonth: true,
/*显示选择其它月份*/
changeYear: true,
/*显示选择其它年份*/
dateFormat: "yy - mm - dd" /*设置日期的显示格式*/ ,
showWeek: true,/*显示一年中的第几周*/
firstDay: 1
})
});
</script>
</head>
<body>
<p>日期:
<input type="text" id="datepicker">
</p>
</body> </html>

关于JqueryUI的datepicker选择器的其它部分属性能够通过以下的链接查看:

jQuery UI API - 日期选择器部件


版权声明:本文博主原创文章,博客,未经同意不得转载。

采用jqueryUI创建日期选择器的更多相关文章

  1. Flex 日期选择器控件

    在构建用户界面时,经常用到日期的输入和选择. 输入日期时,用户可以使用键盘输入,也可以在类似于日历的弹出式对话框中,通过鼠标单击所选日期. 在Flex中可以通过日期输入控件实现输入和选择日期.Flex ...

  2. 安卓 Pickers(选择器)

    概述 安卓提供了现成的对话框,让用户选择一个时间或日期.每一个选择器控制时间(小时,分钟,AM/PM)或日期(月,日,年)的每一部分的选择.使用这些选择器帮助 确保用户正确的,格式化的,和适合的选择一 ...

  3. JQuery高性能优化

    使用JQuery时,你可以使用多种选择器,选择同一个元素,各种方法之间的性能是不一样的,有时候差异会特别大. 通常比较常用的选择器有以下几个: ID选择器 $("#id") 标签选 ...

  4. JQuery高性能最佳实践

    [使用最佳选择器] 使用JQuery时,你可以使用多种选择器,选择同一个元素,各种方法之间的性能是不一样的,有时候差异会特别大. 通常比较常用的选择器有以下几个: ID选择器 $("#id& ...

  5. css: hide or dispaly div

    <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content= ...

  6. CSS清除浮动

    今天看到一篇文章关于清除浮动的,突然间脑袋短路了,咦?为什么要清除浮动?原谅我的无知,搜了下原来是这样,又倒腾出原来的笔记,唉,本来就有记录啊,而且也会经常用到,用的久了连原理都忘了.恩,防止自己再犯 ...

  7. php-css外边距

    css 基本语法  selector{declaration1;declaration2;....delecrationN;} (选择器和一条或多条声明)  选择器为需要改变样式的html元素,每条声 ...

  8. jquery 实践总结

    Ready事件 对DOM操作之前需要监听页面加载进度,应当在页面加载完成之后再执行DOM编辑操作. $(document).ready(function(){ ... }); 或者 $(functio ...

  9. iOS开发——UI篇Swift篇&UIDatePicker

    UIDatePicker //返回按钮事件 @IBAction func backButtonClick() { self.navigationController?.popViewControlle ...

随机推荐

  1. [Android]ADT Run时候报错:The connection to adb is down, and a severe error has occured

    The connection to adb is down, and a severe error has occured. 之 ..\sdk\platform-tools\adb.exe and c ...

  2. 百度地图之UI控制

    在本文中主要介绍百度地图UI控制功能,即控制地图是否有缩放.平移.双击放大.旋转.俯视的功能以及控制是否显示内置缩放组件.指南针位置等.在文中采用标签监听使每个控制功能的方法见名知义,代码原型来源百度 ...

  3. UML中类图的符号解释

    在UML的定义中,描写叙述类和对象之间的关系,包含下面几种方式:依赖(Dependency).关联(Association).聚合(Aggregation).组合(Composition).泛化(Ge ...

  4. OCP读书笔记(3) - 使用RMAN恢复目录

    创建恢复目录 在hndx上创建恢复目录:[oracle@oracle admin]$ export ORACLE_SID=hndx[oracle@oracle admin]$ sqlplus / as ...

  5. 【 D3.js 入门系列 --- 8 】 对话操作(事件)

    本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 这一节介绍怎样进行对话的操作,如鼠标单击,鼠标滑过等. 对一个被 ...

  6. Spring3.0官网文档学习笔记(七)--3.4.2

    3.4.2 依赖与配置的细节     3.4.2.1  Straight values (primitives, Strings, and so on)     JavaBeans PropertyE ...

  7. SE 2014年4月4日

    如图OSPF自治系统中有4个区域,要求如图配置使得中所有网络均能够相互访问为了网络安全及优化网络性能: 使用ospf实现全网互通: [RT1]ospf 1 router-id 1.1.1.1 [RT1 ...

  8. Python-方法重载的问题

    定义一个父类,在写一个子类继承他,重载他的foo方法: class Father: def foo(self): print"I am father" class Son(Fath ...

  9. hdu4027(线段树)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=4027 线段树功能:区间修改,区间求和. 分析:因为每个数至多开6次平方就变1了,所以对于每一段全为1的 ...

  10. nginx学习12 ngx_cycle_t 和 ngx_init_cycle

    在nginx在启动过程,ngx_init_cycle这个函数最初始工作.变量的初始化存储在ngx_cycle_t这个结构体中,为了深入了解这个函数都做了那些初始化工作,就化时间研究了一下.并写下来以便 ...