jquery ui widgets-datepicker
jquery ui的用法就不在此讲述，直接进入jquery ui的窗体小部件(widgets)——datepicker。
相信很多像我这样子的菜鸟少年，如果同一个页面上有两个input文本输入框是用来输入日期的话，那么我都是直接给这两个input文本输入框一个id，然后使用这两个id来进行datepicker的初始化设置。
一般情况下，我都是按照下面的代码写的，但是慢慢地发现，老是这样子写多麻烦呀！难道就不能只使用一个div来加载一个query ui的datepicker吗？然后两个或者多个input共用这一个日历来获取值。于是，就产生了与这下面代码的另一段代码。我知道我是菜鸟，所以也是写给菜鸟看的，欢迎高手指点,不甚感激!
代码一：
1 <!--加载jquery,jquery ui的css文件以及js文件省略-->
2 <script type="text/javascript">
3 $('#check_in').datepicker({
4 minDate : new Date(),
5 dateFormat : 'yy-mm-dd',
6 onSelect : function(dateText,inst){
7 $('#check_in').val(dateText);
8 }
9 });
10
11 $('#check_out').datepicker({
12 minDate : new Date(),
13 dateFormat : 'yy-mm-dd',
14 onSelect : function(dateText,inst){
15 $('#check_out').val(dateText);
16 }
17 });
18
19 $('#check_in').focusin(function(){
20 ......
21 //具体操作不写
22 });
23
24 $('#check_out').focusin(function(){
25 ......
26 //具体操作不写
27 })
28
29 </script>
30
31 <input type="text" name="check_in" id="check_in" />
32 <input type="text" name="check_out" id="check_out" />
代码二：
一般的使用情况下，我自认为只要有一个datepicker就足够了。除非你的每个输入框要求的日期时间格式要求差异化了，不过相信这种需求很少的。既然这样子的话，那么我们就完全可以使用一个datepicker，配合datepicker的Function option实现动态化的参数配置。例如：当你第一个日期选定之后，那么第二个日期的minDate肯定就是从当前选定日期的下一天开始，2014-03-17[日期1]，那么日期2就当然是从2014-03-18开始了。请看简单的代码：
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
4 <title>jquery-ui-datepicker</title>
5 <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.4.custom.css" />
6 <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
7 <script type="text/javascript" src="js/jquery-ui-1.10.4.custom.js"></script>
8 <script type="text/javascript">
9 $(function(){
10 var obj;
11 $('#check_in').focusin(function(){
12 obj = $(this);
13 })
14
15 $('#check_out').focusin(function(sel_date){
16 obj = $(this);
17 })
18 //the common datepicker widget'code is here.
19 $('#datepicker').datepicker({
20 minDate : new Date(),
21 dateFormat : "yy-mm-dd",
22 onSelect : function(dateText,inst){
23 obj.val(dateText);
24 alert(inst)
25 }
26 });
27
28 })
29 </script>
30 </head>
31 <body>
32 <table>
33 <tr>
34 <td>CHECK IN</td>
35 <td>:</td>
36 <td><input type="text" name="check_in" id="check_in" /></td>
37 </tr>
38 <tr>
39 <td>CHECK OUT</td>
40 <td>:</td>
41 <td><input type="text" name="check_out" id="check_out" /></td>
42 </tr>
43 </table>
44 <div id="datepicker"></div>
45 </body>
46 </html>
比较完善的代码3：
默认输入的框为check_in，即使在用户没有点击check_in input输入框时 -> 当check_in输入框输入之后，自动跳转到check_out输入框 -> 再次点击日历，默认的输入框则变成为check_in。自动乱转。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jquery-ui-datepicker</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.4.custom.css" />
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript">
$(function(){
var obj;
$('#check_in').focusin(function(){
obj = $(this);
}) $('#check_out').focusin(function(sel_date){
obj = $(this);
}) $('#datepicker').datepicker({
minDate : new Date(),
dateFormat : "yy-mm-dd",
onSelect : function(dateText,inst){
if(!obj)
{
obj = $('#check_in');
}
obj.val(dateText);
if(obj.attr("name")=="check_in"){
$('#check_out').focusin();
}else{
$('#check_in').focusin();
}
}
}); })
</script>
</head>
<body>
<table>
<tr>
<td>CHECK IN</td>
<td>:</td>
<td><input type="text" name="check_in" id="check_in" /></td>
</tr>
<tr>
<td>CHECK OUT</td>
<td>:</td>
<td><input type="text" name="check_out" id="check_out" /></td>
</tr>
</table>
<div id="datepicker"></div>
</body>
</html>
代码4：实现check_in和check_out总是间隔一天，check_out不能选择小于check_in的日期。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jquery ui widgets-datepicker</title>
<link type="text/css" rel="stylesheet" href="css/jquery-ui-1.10.3.custom.min.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript">
$(function(){
Array.prototype.in_array = function(e){
for(i=0;i<this.length;i++){
if(this[i] == e)
return true;
}
return false;
}
var no_room_date=new Array();
__(foreach from=$no_room_date key=i item=myday)__
no_room_date[__($i)__]="__($myday)__";
__(/foreach)__
var obj; $('#check_in').focusin(function(){
obj = $(this);
}) $('#check_out').focusin(function(sel_date){
obj = $(this);
}) $('#datepicker').datepicker({
minDate : new Date(),
maxDate : "__($maxdate)__",
dateFormat : "yy-mm-dd",
beforeShowDay:function(date){
var result=new Array();
result[0]="true";
result[1]="";
var nowmonth= parseInt(date.getMonth())+1;
var nowday=date.getDate();
if (nowmonth<10){
nowmonth="0"+nowmonth;
}
if(nowday<10){
nowday="0"+nowday;
}
var nowdate=date.getFullYear()+"-"+ nowmonth+"-"+nowday;
if(no_room_date.in_array(nowdate)){
result[0]=false;
}
if(nowdate==$("#check_in").val()){
result[1]="red"
}
if(nowdate==$("#check_out").val()){
result[1]="red"
}
if(nowdate>$("#check_in").val()&&nowdate<$("#check_out").val()&&(!no_room_date.in_array(nowdate))){
//alert(nowdate+" "+$("#check_in").val()+" "+$("#check_out").val());
result[1]="F06";
}
return result;
},
onSelect : function(dateText,inst){
if(!obj)
{
obj = $('#check_in');
$('#datepicker').datepicker('option','minDate',get_next_date(dateText));
}
obj.val(dateText);
if(obj.attr("name")=="check_in"){
$('#datepicker').datepicker('option','minDate',get_next_date(dateText));
$('#check_out').focusin();
}else{
$('#check_in').focusin();
$('#datepicker').datepicker("minDate" ,get_next_day($('#check_in').val())) }
}
});
})
function get_next_date(str_date){
var d="";
d=new Date(str_date);
d.setDate(d.getDate()+1);
var y=d.getFullYear();
var m=d.getMonth()+1;
var dd=d.getDate() < 10?'0'+parseInt(d.getDate()):parseInt(d.getDate());
return y+"-"+m+"-"+dd;
}
</script>
</head>
<body>
<table>
<tr>
<td>CHECK IN:</td>
<td><input type="text" name="check_in" id="check_in" value="2014-03-18" /></td>
</tr>
<tr>
<td>CHECK OUT:</td>
<td><input type="text" name="check_out" id="check_out" value="2014-03-26" /></td>
</tr>
</table>
<div id="datepicker"></div>
</body>
</html>
jquery ui widgets-datepicker的更多相关文章
- 浅析jquery ui的datepicker组件
今天计划在博客上添加一个日历,方便用户查看日期.Google了一圈,最终决定使用jquery ui的datepicker部件实现.原因有三: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”> < ...
- jQuery UI的datepicker()与变更格式
继续MVC应用程序的练习,刚刚练习了jQuery的UI中的datepicker()的方法,它是为了让用户能在文本框中快捷输入日期. 代码简洁与简单. 打开以前练习的一个视图Views\Home\Ind ...
- [转]Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC - Part 4
本文转自:http://www.asp.net/mvc/overview/older-versions/using-the-html5-and-jquery-ui-datepicker-popup-c ...
- Jquery ui datepicker 设置日期范围，如只能隔3天
最近的后台项目前端使用了jquery ui 日历控件自然就使用了jquery ui 的 datepicker 后台数据比较好大,一般是千万级的和百万级的关联,查询会很慢,所以后加想多加些过滤条件, ...
- jquery UI datepicker汉化
由于近期工作需要,jquery ui的datepicker需要汉化,特此把代码贴在这$(function() { $.datepicker.regional["zh-CN"] = ...
随机推荐
- hive sql split 分隔符
Hive字符串分割函数 split(str, regex) - Splits str around occurances that match regexTime taken: 0.769 secon ...
- 第六章 图（d）深度优先搜索
- 孤岛营救问题(BFS+状压DP)
孤岛营救问题 https://www.luogu.org/problemnew/show/P4011 用状压DP标记拿到钥匙的数量 #include<iostream> #include& ...
- UVa 230 Borrowers(map和set)
I mean your borrowers of books - those mutilators of collections, spoilers of the symmetry of shelve ...
- 【校招面试 之 C/C++】第5题 C++各种构造函数的写法
构造函数 ,是一种特殊的方法 .主要用来在创建对象时初始化对象, 即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中 .特别的一个类可以有多个构造函数 ,可根据其参数个数的不同或参数 ...
- NSThread 在主线操作的三个方法
- (void)createNSThread444{ UIImage *image = [UIImage imageNamed:@"图片名字"]; /** 1 performSel ...
- 实现Quartz的动态增删改查
1. Maven依赖 <dependency> <groupId>org.quartz-scheduler</groupId> <artifactId> ...
- PAT 1010 一元多项式求导 (25)（STL-map+思路）
1010 一元多项式求导 (25)(25 分)提问 设计函数求一元多项式的导数.(注:x^n^(n为整数)的一阶导数为n*x^n-1^.) 输入格式:以指数递降方式输入多项式非零项系数和指数(绝对值均 ...
- ubuntu下常用操作
屏幕截图: 可以用ubuntu自带的截图软件:gnome-screenshot. 该工具截图区域并且复制到剪切板命令为 gnome-screenshot -c -a,可以给该命令添加快捷方式,alt ...
- Java 8 新日期时间 API
Java 8 新日期时间 API 1. LocalDate.LocalTime.LocalDateTime LocalDate.LocalTime.LocalDateTime 实例是不可变的对象,分别 ...