在输入日期的时候我们经常需要日期控件，jQueryUI的datapicker就是一个很好的日期控件。

 

1.简单的datepicker控件

目录结构:(要将images图片放到css目录下面)

代码:

  
         
           
        
日期：
  

 

 

 

结果:

 

 

2.datepicker结合bootstrap的模态框使用

　　在模态框中需要设置z-index，否则会出现日期控件被模态框覆盖

　　如果想不能键盘输入设置readonly属性，但是设置readonly属性之后，bootstrap的样式会将其变为灰色，

 

　　需要修改背景色为白色即可。

 

 

 HTML设置文本框且设为只读，修改背景色为白色

     
  
      购 建 日 期 
                               
     

 JS动态开启日期控件

/* 日期控件* */$(function() {    $(".datepicker").datepicker(            {                // changeMonth : true,                // changeYear : true,                showButtonPanel : true,                monthNamesShort : [ "一月", "二月", "三月", "四月", "五月", "六月", "七月",                        "八月", "九月", "十月", "十月", "十二月" ],                dateFormat : "yy-mm-dd", // 设置日期格式                dayNamesMin : [ "一", "二", "三", "四", "五", "六", "日" ],            // maxDate : "+0M +0d", // 最大日期可设为五个月五天之后            });    });

 

效果: