JQuery UI datepicker 经验

范围 时间选择  range date picker

$(function(datepicker) {
    function datePicker(){
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() +1;
        var day = date.getDate();
        var dateStr = ‘‘;

        // 全局设置 datePicker;
        $.datepicker.setDefaults({
            monthNames : [‘一月‘, ‘二月‘, ‘三月‘, ‘四月‘, ‘五月‘, ‘六月‘, ‘七月‘, ‘八月‘, ‘九月‘, ‘十月‘, ‘十一月‘, ‘十二月‘],
            dayNamesMin : [‘周日‘, ‘周一‘, ‘周二‘, ‘周三‘, ‘周四‘, ‘周五‘, ‘周六‘],
            dateFormat: ‘yy-mm-dd‘,
            minDate: date,
            maxDate: ‘+1w‘
        });

        $( "#date_from" ).datepicker({
            defaultDate: "+1",
            changeMonth: true,
            numberOfMonths: 1,
            onClose: function( selectedDate ) {
                if ( selectedDate){ // 如果用户选择日期,才更改日期选择阈值;
                    $( "#date_to" ).datepicker( "option", "minDate", selectedDate );
                }
            }
        });
        $( "#date_to" ).datepicker({
            defaultDate: "+1",
            changeMonth: true,
            numberOfMonths: 1,
            onClose: function( selectedDate ) {
                if ( selectedDate){ // 如果用户选择日期,才更改日期选择阈值;
                    $( "#date_from" ).datepicker( "option", "maxDate", selectedDate );
                }
            }
        });
    }
    datePicker();
});
时间: 2024-11-25 20:42:16

JQuery UI datepicker 经验的相关文章

Adding a Timepicker to jQuery UI Datepicker

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

jquery UI datepicker 添加时间的选择。

仅有日期的原始效果图: 支持时间选择的目标效果图: 第一步:引入几个重要的jquery UI 文件,其中zh-CN.js是支持中文的 <script href="Js/Jquery/jquery.js"/><script/> <script href="Js/jqueryui/jquery.ui.js"/><script/> <script href="Js/jqueryui/i18n/zh-CN.js

jQuery UI datepicker z-index默认为1 怎么处理

最近在维护一个后台系统的时候遇到这样的一个坑:后台系统中日期控件使用的是jQuery UI datepicker. 这个控件生成的日期选择框的z-index = 1.问题来了.页面上有不少z-index比1大的标签.我在网上搜了一下,发现有好多人都遇到了同样的问题.解决方法大体上有两种. 下面我结合demo,一起看一下. 我们先按照jQuery UI datepicker API 文档(地址我就不写了,应该能搜得到)写一个基本的demo,body中的代码如下: 1 <body> 2 3 <

jQuery UI Datepicker使用介绍

本博客使用Markdown编辑器编写 在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件.jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要.本文就主要讨论jQuery UI Datepicker的使用,和中文本地化配置. 1.jQuery UI介绍 jQuery UI是一套基于jQuery控件和动画效果Javascript类库.可以用来构建交互式的互联网应用程序.最新版本1.10.4.基于jQuery 1.6+jQuery UI官方网站 2.jQu

[转]Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC - Part 4

本文转自:http://www.asp.net/mvc/overview/older-versions/using-the-html5-and-jquery-ui-datepicker-popup-calendar-with-aspnet-mvc/using-the-html5-and-jquery-ui-datepicker-popup-calendar-with-aspnet-mvc-part-4 This tutorial will teach you the basics of how

JQuery UI datepicker 使用方法

官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY jQuery UI界面效果的站点http://jqueryui.com/themeroller/ DatePicker基本使用方法: 代码如下: <!DOCTYPE html> <html> <head> <link href="http://ajax.g

jQuery UI Datepicker&amp;Datetimepicker添加 时-分-秒 并且,判断

jQuery UI Datepicker时间(年-月-日) 相关代码: <input type="text" value="" name="adv_start_time" id="adv_start_time" class="txt date"> <script type="text/javascript" src="xxxx路径/jquery.ui.js&q

JQuery UI datepicker 使用方法(转)

官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY jQuery UI界面效果的站点http://jqueryui.com/themeroller/ DatePicker基本使用方法: 代码如下: <!DOCTYPE html> <html> <head> <link href="http://ajax.g

Jquery UI - DatePicker 在Dialog中无法自动隐藏的解决思路

通过Jquery UI Dialog模态展示如下的一个员工编辑页面,但是遇到一个奇怪的问题:点击Start Date的input元素后,其无法失去焦点.从而导致DatePicker控件在选择日期后无法自动隐藏. 解决思路:给DatePicker加上onSelect事件,在该事件中让Start Date的input元素的父元素获取焦点,这样DatePicker控件在选择日期后就自动隐藏.