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的更多相关文章

  1. 浅析jquery ui的datepicker组件

    今天计划在博客上添加一个日历,方便用户查看日期.Google了一圈,最终决定使用jquery ui的datepicker部件实现.原因有三:Datepicker使用配置比较简洁,几行代码就可以得到一个 ...

  2. jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)

    这篇文章主要介绍了jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate),需要的朋友可以参考下 使用jQuery ui首先需要引入jQuery类库 ...

  3. 5-15 bootcss 之 modal 以及 jquery ui 之datepicker 小记

    最近公司在用bootstrap和Jquery UI做项目,类似与OA的东西前两天碰到点问题,记录一下.希望读者不要在遇到和我一样的问题. 1 datepicker.不知道怎么自己下载的bootcss里 ...

  4. Jquery UI的datepicker插件使用方法

    原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,并且UI的各部分插件可以独自分离出来使用,这是其他很多Jquery插件没有的 ...

  5. Jquery UI的datepicker插件使用

    原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,而且UI的各部分插件能够独自分离出来使用.这是其它非常多Jquery插件没有 ...

  6. jQuery UI的datepicker日期控件如何让他显示中文

    首先是引入UI的JS文件和模板文件,如下: <link rel=”stylesheet” href=”./ui/themes/le-frog/jquery.ui.all.css”> < ...

  7. jQuery UI的datepicker()与变更格式

    继续MVC应用程序的练习,刚刚练习了jQuery的UI中的datepicker()的方法,它是为了让用户能在文本框中快捷输入日期. 代码简洁与简单. 打开以前练习的一个视图Views\Home\Ind ...

  8. [转]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 ...

  9. Jquery ui datepicker 设置日期范围，如只能隔3天

    最近的后台项目前端使用了jquery ui 日历控件自然就使用了jquery ui 的   datepicker 后台数据比较好大,一般是千万级的和百万级的关联,查询会很慢,所以后加想多加些过滤条件, ...

  10. jquery UI datepicker汉化

    由于近期工作需要,jquery ui的datepicker需要汉化,特此把代码贴在这$(function() { $.datepicker.regional["zh-CN"] = ...

随机推荐

  1. VMware-克隆机，网卡修改

    1.克隆 2.修改网卡eth1为eth0 -persistent-net.rules 3.配置ip vim /etc/sysconfig/network-scripts/ifcfg-etho 4.修改 ...

  2. SpringBoot配置文件YML 注意事项

    YML读取注意事项 使用YML时遇到的坑: 最近在做项目时,遇到了一些在读取YML配置时发生的问题,在这里写一并写下来,希望给自己以及大家一个提示,能尽量避免在读取配置文件时发生这些错误,给开发带来不 ...

  3. sysbench——服务器cpu性能测试

    一.前言 最近在工作中需要测试cpu占用率.内存占用率,我想要寻找一种合适的能提高cpu占用率的工具及方法.先尝试了使用 echo "scale=5000; 4*a(1)" | b ...

  4. Python vars() 函数

    Python vars() 函数  Python 内置函数 描述 vars() 函数返回对象object的属性和属性值的字典对象. 语法 vars() 函数语法: vars([object]) 参数 ...

  5. word2003设置页码不从第一页开始的方法

    问题描述:如果你想设置页码从第三四页开始,前边不要页码,或者前边的页码是不同类型的.那么这个时候就要用到:插入->分隔符模式. 如果你的页面中的各个标题是从样式和格式中选择的,既是你先设置好各种 ...

  6. Vmware迁移以后eth0消失,无法上网

    一个再普通不过的大神帮助小菜做虚拟机镜像的事情: 小张:帮我做个Vmware下的Ubuntu镜像吧,大神. 小黄:好啊,等我一下,下午发给你. 经过一番操作,小黄顺利的做出了一个虚拟机操作系统 小黄: ...

  7. Extended Backus–Naur Form

    From Wikipedia, the free encyclopedia In computer science, Extended Backus–Naur Form (EBNF) is a fam ...

  8. db2表空间及日志文件调整

    1.SQLState '57011' and errorCode '-964'  原因:数据库的日志文件已满  解决方法:修改日志文件大小(加大),增加日志文件个数,增加辅助日志文件个数(三个修改参数 ...

  9. 面向对象 Java练习

    package xin.bao; public class Pingguo { private String Zhonglei;// 种类 public String getZhonglei() { ...

  10. Vue.js2 + Laravel5 采用 CORS 方式解决 AJAX 跨域的问题

    一.建立中间件 php artisan make:middleware CorsAjax 二.编写中间件 CorsAjax <?phpnamespace App\Http\Middleware; ...