jQueryUI中Datepicker(日历)插件使用

Posted lvxisha

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQueryUI中Datepicker(日历)插件使用相关的知识,希望对你有一定的参考价值。

atepicker插件的属性:

属性 数据类型 默认值 说明
altField string ""

使用备用的输出字段,即将选择的日期

以另一种格式,输出到另一个控件中,

值为选择符,即要输出的控件

altFormat string ""

altField输出的格式,

详细格式见formatDate方法

appendText string "" 指定每个日期字段后面显示的文本
autoSize boolean false

是否自动调整控件大小,

以适应当前的日期格式的输入

buttonImage string ""

指定弹出按钮图像的URL,若设置则

buttonText将成为alt值

buttonImageOnly boolean false 是否将图像放在控件后面,作为触发器
buttonText string "……"

指定触发按钮上显示的文本,showOn

属性应设置为button或both

changeMonth string ""

是否使用下拉列表选择月份

changeYear string "" 是否 下拉列表选择年份
closeText string "Done" 指定关闭链接显示的文本

               技术分享图片

                     技术分享图片

第一个日历插件的使用实例

需要引入的外部文件有:

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.css" rel="stylesheet">
  <script src="jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">

  代码:

<p>日期:<input type="text" id="datepicker" size="30"></p>
<script>
  $(function() {
    $( "#datepicker" ).datepicker();
  
  });
</script>

  运行图:

技术分享图片

通过实例对一些常用属性进行验证:

1、  altField :使用备用的输出字段,即将选择的日期以另一种格式,输出到另一个控件中,值为选择符,即要输出的控件

  altFormat:altField输出的格式

代码:

<p>日期:
<input type="text" id="datepicker" size="30">
<input type="text" id="alternate" size="30">
</p>


<script>
 $( "#datepicker" ).datepicker({
        altField: "#alternate",  
        altFormat: "DD, d MM, yy"
    });
</script>

运行结果:

技术分享图片

 

技术分享图片

2、showAnim :设置日期面板显示或隐藏的动画名

<p>日期:<input type="text" id="datepicker" size="30"></p>
<p>动画:<br>
 <select id="anim">
   <option value="show">Show (默认)</option>
   <option value="slideDown">滑下</option>
   <option value="fadeIn">淡入</option>
   <option value="blind">Blind (UI 百叶窗特效)</option>
   <option value="bounce">Bounce (UI 反弹特效)</option>
   <option value="clip">Clip (UI 剪辑特效)</option>
   <option value="drop">Drop (UI 降落特效)</option>
   <option value="fold">Fold (UI 折叠特效)</option>
   <option value="slide">Slide (UI 滑动特效)</option>
   <option value="">无</option>
 </select>
</p>


//js代码
$(function() {  
  
              $( "#datepicker" ).datepicker();  
  
              $( "#anim" ).change(function() {  
  
                     $( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );  
  
              });  
  
       });

  3、showButtonPanel:是否显示按钮面板

js代码:

<script>
  $(function() {
    $( "#datepicker" ).datepicker({
        showButtonPanel:true
    })
})

  运行效果:

技术分享图片

4、dateFormat:指定显示日期的格式

//js代码
<script>
  $(function() {
    $( "#datepicker" ).datepicker({
       dateFormat:"yy/mm/dd"
    })
})

  技术分享图片

5、showOn:设置触发选择器的事件名称

buttonText:指定触发按钮上显示的文本,showOn属性应设置为button或both

buttonImage:指定弹出按钮图像的URL,若设置则buttonText将成为alt值

buttonImageOnly:是否将图像放在控件后面,作为触发器,如果设置为true那么按钮将只剩下图片作为按钮,是页面更加美观

1)、

$( "#datepicker2" ).datepicker({  
  
           showOn: "both",  
  
           buttonText:"日历按钮"  
  
    });  

  技术分享图片

2)、将按钮设置为图片:

$( "#datepicker2" ).datepicker({  
           showOn: "button",  
  
           buttonImage: "images/calendar.gif",  
  
           buttonImageOnly: true
  
    });      

  技术分享图片

6、 minDate:可以选择的最小日期,null表示无限制

  maxDate:可以选择的最大日期。null表示无限制

  两者都是根据以当天日期为基础的。

$( "#datepicker2" ).datepicker({  
          //表示以当天为准,只有在20天之前和10天之后的日期之间的时间可以选择  
  
                minDate: -20,  
  
                maxDate: "+10D"
  
    }); 

  技术分享图片 

更多日历插件demo在官网了解http://api.jqueryui.com/datepicker

 



以上是关于jQueryUI中Datepicker(日历)插件使用的主要内容,如果未能解决你的问题,请参考以下文章

jqueryUI 日历 datepicker

怎样让jQueryUI 的日历控件显示中文日历

jquery 日历控件在php中怎么使用

如何使用 jqueryui 在表单中使用 datepicker?

使用 jQuery UI datepicker 选择日历更改 URL

简单的类似 DatePicker 的日历 [关闭]