jquery日历datepicker的使用方法

找了很久,终于找到了。现在分享。

1.下载jquery,链接css文件。

2.新建一个<div>,如下:

<div id=‘cal‘ ></div>


3.然后就是javascript的代码了,如下:

<script>
        $(document).ready(function() {
            $("#cal").datepicker({dateFormat:‘yy-mm-dd‘});
        });
    </script>


4.ok!现在日历就已经显示出来了!

5.如果希望text文本框也可以弹出日历来让我们选择,那么可以这么做,如下:

<input  type="text" id="cal"  readonly="readonly" >

6.其实,我们可以发现,就是将id改了一下。这就是jquery日历的好用之处啊!

 

datepicker的一些常用属性:

1.numberOfMonths、showCurrentAtPos显示多个日历

numberOfMonths用于指定一次显示几个日历,showCurrentAtPos则用于指定当前的日历在第几个显示(一般放在中间),效果如下:

注:实现中文显示只需要将jquery.ui.datepicker-zh-CN.js这个js文件导入就可以了,jquery下载时就有。

2.defaultDate设置日历的初始时间

就是默认选中的一个(不是当前时间,当前时间一直和其他日期外观不一样)

例:defaultDate:‘2012-11-11"

3.dateFormat格式化输出字符

dateFormat:‘yy-mm-dd‘

则会输出,例如:2012-11-11   这种样式

 

最后给个今天做的例子吧!

<script>
        $(document).ready(function() {
            var time=$(‘#datetime‘).val()
                $("#cal").datepicker({showCurrentAtPos:1,defaultDate:‘{{ datetime }}‘, dateFormat:‘yy-mm-dd‘,numberOfMonths:3,onSelect:function(dateText,inst){
                $(‘#datetime‘).attr(‘value‘,dateText);
                thisURl=window.location.host
                location.replace("http://"+thisURl+"/?depart=all&date="+dateText)
            }});

        });
    </script>

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。