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 相关文章推荐
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 Javascript
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
vue实现循环滚动列表
Jun 30 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
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
php sybase_fetch_array使用方法
2014/04/15 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
浅谈JavaScript中面向对象技术的模拟
2006/09/25 Javascript
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python新手经常遇到的17个错误分析
2014/07/30 Python
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
Java及python正则表达式详解
2017/12/27 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
python实现音乐下载的统计
2018/06/20 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
美国电视购物:QVC
2017/02/06 全球购物
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
机电专业个人求职信范文
2013/12/30 职场文书
鲜果饮品店创业计划书
2014/01/21 职场文书
青年文明号服务承诺
2014/03/31 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
2014年司机工作总结
2014/11/21 职场文书
2014年节能工作总结
2014/12/18 职场文书
主持人开幕词
2015/01/29 职场文书
高三生物教学反思
2016/02/22 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL
Python编写冷笑话生成器
2022/04/20 Python