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 相关文章推荐
JavaScript 数组的 uniq 方法
Jan 23 Javascript
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 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返回json数据函数实例
2014/10/09 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
vue 页面加载进度条组件实例
2018/02/05 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
js new Date()实例测试
2019/10/31 Javascript
pandas string转dataframe的方法
2018/04/11 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
Selenium的使用详解
2018/10/19 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
python递归法解决棋盘分割问题
2019/07/17 Python
django中使用POST方法获取POST数据
2019/08/20 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
淘宝网店营销策划书
2014/01/11 职场文书
人事专员工作职责
2014/02/22 职场文书
化工专业求职信
2014/07/01 职场文书
关于诚信的活动方案
2014/08/18 职场文书
一份文言文检讨书
2014/09/13 职场文书
出国签证在职证明
2014/09/20 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS