jquery UI datepicker时间控件的使用

参考:

http://api.jqueryui.com/datepicker/#method-show 英文

http://www.helloweba.com/view-blog-168.html  中文

http://jqueryui.com/datepicker/

效果:

常用场合:

  1.输入框

  2.div

使用方法:

1.限制日期

$("#resultDiv").datepicker({
                onSelect: function (dateText, inst) {
                    //代码:选择日期后触发的事件
                },
                minDate: new Date(),//最小日期
                maxDate: new Date($("#DateLimit").val())//最大日期
            });

 2.中文

jQuery(function ($) {
        $.datepicker.regional['zh-CN'] = {
            closeText: '关闭',
            prevText: '<上月',
            nextText: '下月>',
            currentText: '今天',
            monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                '七月', '八月', '九月', '十月', '十一月', '十二月'],
            monthNamesShort: ['一', '二', '三', '四', '五', '六',
                '七', '八', '九', '十', '十一', '十二'],
            dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
            dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
            dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
            weekHeader: '周',
            dateFormat: 'yy-mm-dd',
            firstDay: 1,
            isRTL: false,
            showMonthAfterYear: true,
            yearSuffix: '年'
        };
        $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
    });

 3.时间段查询用法

$(document).ready(function () {
         $('#SearchStartDT').datepicker({
            dateFormat: 'yy-mm-dd',
            onSelect: function (startDate) {
                var $startDate = $("#SearchStartDT");
                var $endDate = $('#SearchEndDT');
                var endDate = $endDate.datepicker('getDate');
                if (endDate < startDate) {
                    $endDate.datepicker('setDate', startDate - 3600 * 1000 * 24);
                }
                $endDate.datepicker("option", "minDate", startDate);
            }
        });
        $('#SearchEndDT').datepicker({
            dateFormat: 'yy-mm-dd',
            onSelect: function (endDate) {
                var $startDate = $("#SearchStartDT");
                var $endDate = $('#SearchEndDT');
                var startDate = $startDate.datepicker("getDate");
                if (endDate < startDate) {
                    $startDate.datepicker('setDate', startDate + 3600 * 1000 * 24);
                }
                $startDate.datepicker("option", "maxDate", endDate);
            }
        });
        $("#SearchStartDT").datepicker("option", "maxDate", new Date());
        $("#SearchEndDT").datepicker("option", "maxDate", new Date());
    });

4.只显示月份

 多种解决方法:http://www.itstrike.cn/Question/c7c3214d-0a6b-4d89-8b4f-f7753763e927.html

 

 

 

 

 

 

时间: 2024-10-11 08:19:27

jquery UI datepicker时间控件的使用的相关文章

jquery UI Datepicker时间控件的使用及问题解决_jquery

本文实例为大家分享了jqueryUI中datepicker的使用,解决与asp.net中的UpdatePanel联合使用时的失效问题. 1.jqueryUI的datepicker的使用 -->首先在jqueryUI官网上根据你的需要下载适合你系统主题的样式,jqueryUI主题:下载地址: -->下载后的文件jquery-ui-1.10.3.custom文件夹:不同的主题的区别在于它们引用的css不同 默认下载的样式如下:   其它样式比如我下载的样式: 下载的jqueryUI中除了css文件

jquery UI Datepicker时间控件的使用方法(加强版)_jquery

先来看看Datepicker插件的属性表: 第一个日历插件的使用实例 首先导入需要的类库文件: <</SPAN>scripttype="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.7.1.min.js"></</SPAN>script> <</SPAN>scripttype="text/javas

jquery UI Datepicker时间控件的使用方法(终结版)_jquery

近期项目中用到日期控件,感觉不错,写出来分享给大家看看,我限制的开始时间和结束时间跨度不超过三天,并配置有清空时间,重选时间等功能,分享给大家: 先给大家看两张效果图 在例子中我控制的开始时间和结束时间为三天,也就是开始时间和结束时间的跨度不能超过三天. 具体是怎么实现的,代码中会附有很详细的解释,请大家继续往下看: 第一步,引入控件js,这里有两个,一个是jquery.js,一个是jquery-ui-datepicker.js,当然还有引入样式文件: <script type="text

jquery UI Datepicker时间控件的使用方法(基础版)_jquery

本文为大家分享jquery ui datepicker时间控件的使用方法,通过实例讲解了解ui datepicker时间控件,先给大家看一看效果图: 效果: 常用场合: 1.输入框 2.div使用方法:1.限制日期 $("#resultDiv").datepicker({ onSelect: function (dateText, inst) { //代码:选择日期后触发的事件 }, minDate: new Date(),//最小日期 maxDate: new Date($(&quo

jquery UI Datepicker时间控件冲突问题解决_jquery

公司里的项目由于发展较快,很多东西都没有好好梳理一下,以至于有很多的潜在的问题. 最近就遇到了一个比较坑的问题.datepicker  有两个插件库中的datepicker插件比较有名.一个是jQuery-UI,一个是bootstrap.两个的api网址分别是 然而在项目中很不巧的两个库都用到了.然后就出现了以下情况:http://jqueryui.com/datepicker/   和  http://bootstrap-datepicker.readthedocs.io/en/latest/

Android开发中DatePicker日期与时间控件实例代码

一.简介 二.方法 最日常的使用方法了 日期控件DatePicker 时间控件TimePicker 月份从0开始 三.代码实例 效果图: 代码: fry.Activity01 package fry; import com.example.DatePicherDemo1.R; import android.app.Activity; import android.os.Bundle; import android.widget.DatePicker; import android.widget.

Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】_jquery

最近的后台项目前端使用了jquery ui 日历控件自然就使用了jquery ui 的 datepicker 后台数据比较好大,一般是千万级的和百万级的关联,查询会很慢,所以后加想多加些过滤条件,其中时间要设置为必选, 产品要叫日历控件做成只能做3天之内的查询,且日历控件要做成这样的要求,如果前一个日历控制选择了2013年9月1号 后面的日历控件只能选择2013年9月1号,2013年9月2号,2013年9月3号,其他的全部要不能选,本来想叫他给提示的,领导非要这么干 真是领导一句话,码工辛苦好几

jquery mobile时间控件赋值问题

问题描述 jquery mobile时间控件赋值问题 这样的时间控件怎么赋值呀? 解决方案 具体看你用的这个插件的api,jquery官网没有这个插件..

jquery 时间控件-关于jquery时间控件位置放在第一个的问题?

问题描述 关于jquery时间控件位置放在第一个的问题? 日期的输入框放在的div里面的第一个,当页面用dialog弹出这个div时,输入框自动获取到焦点,然后就控件就自己跳出来了.如何处理让弹出这个div时,时间控件没有自己弹出来? 解决方案 时间控件的问题 解决方案二: .bind('focus', function(e) {e.preventDefault();}); 试试这个看看 屏蔽默认的获取焦点事件. 解决方案三: 浏览器不会自动给控件设置焦点的,你肯定是用js设置了焦点,将代码去掉