zoukankan      html  css  js  c++  java
  • 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>


     有什么问题,可以给我留言,只要我会!呵呵~~

  • 相关阅读:
    LightOJ 1132 Summing up Powers(矩阵快速幂)
    hdu 3804 Query on a tree (树链剖分+线段树)
    LightOJ 1052 String Growth && uva 12045 Fun with Strings (矩阵快速幂)
    uva 12304 2D Geometry 110 in 1! (Geometry)
    LA 3263 That Nice Euler Circuit (2D Geometry)
    2013 SCAUCPC Summary
    poj 3321 Apple Tree (Binary Index Tree)
    uva 11796 Dog Distance (几何+模拟)
    uva 11178 Morley's Theorem (2D Geometry)
    动手动脑
  • 原文地址:https://www.cnblogs.com/chenjianhong/p/4145100.html
Copyright © 2011-2022 走看看