先上效果：

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>日期选择</title>

<link rel="stylesheet" href="reset-jquery-ui.min.css" />

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="jquery-ui.js"></script>

<script type="text/javascript">

//日期选择

$.datepicker.regional['zh-CN'] = {

    clearText: '清除',

    clearStatus: '清除已选日期',

    closeText: '关闭',

    closeStatus: '不改变当前选择',

    prevText: '<上月',

    prevStatus: '显示上月',

    prevBigText: '<<',

    prevBigStatus: '显示上一年',

    nextText: '下月>',

    nextStatus: '显示下月',

    nextBigText: '>>',

    nextBigStatus: '显示下一年',

    currentText: '今天',

    currentStatus: '显示本月',

    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],

    monthNamesShort: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'],

    monthStatus: '选择月份',

    yearStatus: '选择年份',

    weekHeader: '周',

    weekStatus: '年内周次',

    dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],

    dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],

    dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],

    dayStatus: '设置 DD 为一周起始',

    dateStatus: '选择 m月 d日, DD',

    dateFormat: 'yy-mm-dd',

    firstDay: 1,

    initStatus: '请选择日期',

    isRTL: false

};

$.datepicker.setDefaults($.datepicker.regional['zh-CN']);

var a = 0;

var tmpdate = "";

/**

  * 实例化日期控件，并绑定回调函数，传入相应参数

  * tagId 日期控件实例化的标签id

  * ajaxMethod 回调函数

  * ajaxMethod 函数需要用到的额外参数

  **/

function datePickerById(tagId){

    $(tagId).datepicker( {

        isDataChecked:true,

        autoClose:true,

        showOtherMonths: true,

        changeYear: true,

        //showStatus: true,

        //showOn: "both",

        numberOfMonths:2,//显示几个月

        showMonthAfterYear:true,

        onSelect: function(dateText,inst) {//选择日期后执行的操作

            a++;

            inst.autoClose = true;

            if(a==1){

                inst.settings.isDataChecked = false;

                tmpdate = dateText;

            }

            if(a==2){

                a=0;

                inst.settings.isDataChecked = false;

                inst.autoClose = false;

                var date1 = new Date(tmpdate).getTime();

                var date2 = new Date(dateText).getTime();

                var arg = {time_s:date1,time_e:date2}; //ajax函数要用到的时间参数

                if(date1<date2){

                      $(tagId).val(tmpdate.replace(/-/ig,"-")+"至"+dateText.replace(/-/ig,"-"));

                  }else if(date1 == date2){

                    a = 1;

                    inst.settings.isDataChecked = false;

                    inst.autoClose = true;

                  }else{

                      $(tagId).val(dateText.replace(/-/ig,"-")+"至"+tmpdate.replace(/-/ig,"-"));

                  }

            }

        }

    });

}

</script>

</head>

<body>

时间选择：<input id="div1" style="height:30px;width:190px;"/>

<script type="text/javascript">

datePickerById('#div1');

</script>

</body>

</html>

基于jquery UI 1.11.4修改如下（在源码里面修改）：

/* Hide the date picker from view.

     * @param  input  element - the input field attached to the date picker

     */

    _hideDatepicker: function(input) {

        var showAnim, duration, postProcess, onClose,

            inst = this._curInst;

        if (!inst || (input && inst !== $.data(input, "datepicker"))) {

            return;

        }

        /**

             * 2015.6.11 修改

             * author：link

             * 增加inst.autoClose控制日历面板

             */
// -----------------------------------------------------------------------------------------
 if (this._datepickerShowing||!inst.autoClose) { showAnim = this._get(inst, "showAnim"); duration = this._get(inst, "duration"); postProcess = function() { $.datepicker._tidyDialog(inst); }; // DEPRECATED: after BC for 1.8.x $.effects[ showAnim ] is not needed if(inst.autoClose===true){ // 这里不隐藏 }else{ if ( $.effects && ( $.effects.effect[ showAnim ] || $.effects[ showAnim ] ) ) { inst.dpDiv.hide(showAnim, $.datepicker._get(inst, "showOptions"), duration, postProcess); } else { inst.dpDiv[(showAnim === "slideDown" ? "slideUp" : (showAnim === "fadeIn" ? "fadeOut" : "hide"))]((showAnim ? duration : null), postProcess); } }
// -----------------------------------------------------------------------------------------
if (!showAnim) { postProcess(); } this._datepickerShowing = false; onClose = this._get(inst, "onClose"); if (onClose) { onClose.apply((inst.input ? inst.input[0] : null), [(inst.input ? inst.input.val() : ""), inst]); } this._lastInput = null; if (this._inDialog) { this._dialogInput.css({ position: "absolute", left: "0", top: "-100px" }); if ($.blockUI) { $.unblockUI(); $("body").append(this.dpDiv); } } this._inDialog = false; } },

1.11.4修改后完整源码

链接：http://pan.baidu.com/s/1bnjQycv 密码：hr19

datepicker 日期连续选择（需要改源码）的更多相关文章

  1. 使用Qt5+CMake实现图片的区域选择（附源码）

    近期研发涉及到了图片的区域选择,找来一些资料一直不能很满意,所以自己实现了一个. 实现步骤如下.源码可以点击ImageAOI获取. 如下资料来自源码的README. ImageAOI (XLabel) ...

  2. android电子书App、自定义图表、仿腾讯漫画App、仿淘宝优惠券、3D选择容器等源码

    Android精选源码 仿支付宝记账本功能,饼状图:数字键盘 android一款功能完善的电子书应用源码 Android自定义图标库,使用方便,扩展性强 android 3D立体无限旋转容器源码 an ...

  3. 网页不让用户复制方法总汇,设置html禁止选择，保护源码，js禁止复制文字

    这篇文章主要讲解:右键复制失效方法.菜单"文件"-"另存为"失效方法.防止查看源代码进行复制的方法.防止页面缓存的方法.来达到一定的代码保护效果 右键复制失效方 ...

  4. 避免UE4项目VS中误改源码.h文件导致编译时间长

    最近几天两次触发VS中误改UE4源码头文件,导致需要编译大量源码的情况:再好的习惯也有不可靠的时候,还是需要可靠方案解决这个问题:官方提供了预编译版本(即从Launcher中下载的版本),但是对于程序 ...

  5. 玩转控件：重绘DEVEXPRESS中DateEdit控件 —— 让DateEdit支持只选择年月 (提供源码下载)

      前言 上一篇博文<玩转控件:重绘ComboBox —— 让ComboBox多列显示>中,根据大家的回馈,ComboBox已经支持筛选了,更新见博文最后最后最后面.   奇葩 这两天遇到 ...

  6. Element DatePicker日期范围选择

    前7天后7天 <el-date-picker v-model="value1" type="date" :picker-options="pic ...

  7. python模块-paramiko-修改源码(demo实例)

    在github上下载一个paramiko,找到demos目录,复制到pycharm项目里面 这是因为python3传来得数据是bates数据类型,需要decode()一下就可以,在demos下得int ...

  8. 曹工杂谈：为什么很少需要改Spring源码，因为扩展点太多了，说说Spring的后置处理器

    前言 最近发了好几篇,都是覆盖框架源码,但是spring的代码,我是从没覆盖过,毕竟,如果方便扩展,没谁想去改源码,而spring就是不需要改源码的那个,真的是"对扩展开放,对修改关闭&qu ...

  9. Java日期时间API系列8-----Jdk8中java.time包中的新的日期时间API类的LocalDate源码分析

    目录 0.前言 1.TemporalAccessor源码 2.Temporal源码 3.TemporalAdjuster源码 4.ChronoLocalDate源码 5.LocalDate源码 6.总 ...

随机推荐

  1. Java多线程中start()和run()的区别

    Java的线程是通过java.lang.Thread类来实现的.VM启动时会有一个由主方法所定义的线程.可以通过创建Thread的实例来创建新的线程.每个线程都是通过某个特定Thread对象所对应的方 ...

  2. Ruby on Rails Tutorial 第五章 完善布局

    本章目标:局部视图.Rails路由.Asset Pipeline.Sass1.Bootstrap是Twitter开发的开源Web设计框架mockup是网页构思图,在web领域经常称之为“线框图”,用于 ...

  3. extern的困惑

    摘自:http://blog.csdn.net/fxjtoday/article/details/6021845 如果想明白为什么需要extern, 需要从编译和链接讨论起, 现代编译器一般采用按文件 ...

  4. Windows Azure 微软公有云体验(一) 网站、SQL数据库、虚拟机

    Windows Azure 微软公有云已经登陆中国有一段时间了,现在是处于试用阶段,Windows Azure的使用将会给管理信息系统的开发.运行.维护带来什么样的新体验呢? Windows Azur ...

  5. Linux 修改swap虚拟内存大小

          swap是内存的交换区:换句话说,如果内存不够用了,那么系统会在硬盘上存储一些内存中不常用的数据,之后将这部分数据在存储中析构掉:这样内存就又有剩余空间可以运行东东啦,这个过程也就是所谓的 ...

  6. [改善Java代码]枚举和注解结合使用威力更大

    注解的写法和接口很类似,都采用了关键字interface,而且都不能有实现代码,常量定义默认都是pulbic static final类型的. 他们的主要不同点是:注解在interface前加上@字符 ...

  7. [未完成]关于Maven的使用总结

    什么是maven 翻译为“专家”,“内行” Maven是跨平台的项目管理工具.主要服务于基于Java平台的项目构建,依赖管理和项目信息管理. 什么是理想的项目构建? 高度自动化,跨平台,可重用的组件, ...

  8. 关于windows中的快捷键

    Windows快捷键大全编辑 目录1快捷方式 2IE浏览器 3小键盘 4WIN键 5资源管理器 6对话框7我的电脑 8放大程序 9辅助选项 10XP键盘 11对话框 12自然键盘13辅助键盘 14键盘 ...

  9. Windows Embedded CE 6.0开发环境的搭建

    最近开始在学习嵌入式,在这里首先得安装Windows Embedded CE 6.0,其中遇到了很多问题,电脑的系统以及相关配置都会在安装过程中受到影响,因此笔者就安装中的问题以及环境搭建来介绍一下. ...

  10. hdu 4267 树形DP

    思路:先dfs一下,找出1,n间的路径长度和价值,回溯时将该路径长度和价值清零.那么对剩下的图就可以直接树形dp求解了. #include<iostream> #include<al ...