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>


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

  • 相关阅读:
    订阅发布模式概念基础
    HTML与CSS之display:none
    HTML与CSS之导航栏
    微信小程序-笔记
    基于设计模式的用户管理
    微信小程序-开发组件-笔记1
    JavaScript异常处理
    微信小程序开发-笔记
    封装类实现增删改查
    脚本方式实现数据库增删改查
  • 原文地址:https://www.cnblogs.com/chenjianhong/p/4145100.html
Copyright © 2011-2022 走看看