jQuery插件datepicker 日期连续选择


Posted in Javascript onJune 12, 2015

先上效果:

jQuery插件datepicker 日期连续选择

代码:

<!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; } },

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
jqTransform form表单美化插件使用方法
Jul 05 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
Dec 28 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
javascript实现的简单计时器
Jul 19 Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 Javascript
Angular实现form自动布局
Jan 28 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
javascript设计模式之单体模式学习笔记
Feb 15 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
vue中导出Excel表格的实现代码
Oct 18 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 #Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 #Javascript
JavaScript中string对象
Jun 12 #Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 #Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 #Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 #Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 #Javascript
You might like
用PHP实现登陆验证码(类似条行码状)
2006/10/09 PHP
PHP使用header()输出图片缓存实例
2014/12/09 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
python回调函数的使用方法
2014/01/23 Python
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
python判断字符串是否包含子字符串的方法
2015/03/24 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
Python常用的json标准库
2019/02/19 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
创建省级文明单位实施方案
2014/02/27 职场文书
2014年电工工作总结
2014/11/20 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
python游戏开发之pygame实现接球小游戏
2022/04/22 Python
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers