当前位置: 澳门新濠3559 > 服务器运维 > 正文

然后下载datepicker(内含jQuery1.2.6,具体请参考j

时间:2019-12-08 19:30来源:服务器运维
解压jquery.datepick.package-3.5.2.zip,默认是英文的日历,里面有一个jquery.datepick-zh-CN.js,加上这个可以把英文的变以成中文的,演示地址: 您可能感兴趣的文章: jQuery带时间的日期控件代码

解压jquery.datepick.package-3.5.2.zip,默认是英文的日历,里面有一个jquery.datepick-zh-CN.js,加上这个可以把英文的变以成中文的,演示地址:

您可能感兴趣的文章:

  • jQuery带时间的日期控件代码分享
  • jQuery插件datepicker 日期连续选择
  • Jquery日期选择datepicker插件用法实例分析
  • jQuery实现简单的日期输入格式化控件
  • jquery获取当前日期的方法
  • jquery实现在页面加载的时自动为日期插件添加当前日期
  • jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
  • JQuery EasyUI 日期控件如何控制日期选择区间
  • jquery validate 自定义验证方法介绍 日期验证
  • jquery 日期控件datepicker属性详细解析
  • 澳门新濠3559,jQuery之日期选择器的深入解析
  • 获取客户端电脑日期时间js代码(jquery)

本文实例讲述了jQuery获取某天的农历日期并判断是否除夕或新年的方法。...

您可能感兴趣的文章:

  • jquery validator 插件增加日期比较方法
  • 基于jquery的web页面日期格式化插件
  • jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
  • jquery实现在页面加载的时自动为日期插件添加当前日期
  • Jquery日期选择datepicker插件用法实例分析
  • jQuery插件datepicker 日期连续选择
  • 贴近用户体验的Jquery日期、时间选择插件
  • JQuery日历插件My97DatePicker日期范围限制
  • jQuery Mobile开发中日期插件Mobiscroll使用说明

jQuery是一款不可多得的非常优秀的javascript脚本开发库,而基于其上的很多插件也是非常规范和...

希望本文所述对大家jQuery程序设计有所帮助。

jQuery获取某天的农历日期并判断是否除夕或新年的方法,jquery除夕

本文实例讲述了jQuery获取某天的农历日期并判断是否除夕或新年的方法。分享给大家供大家参考,具体如下:

<!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" />
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
  //------------------- Begin ----------------------
  CalendarHelper={};
  CalendarHelper.GetCNDate = function (D) {
    var CalendarData = new Array(100);
    var madd = new Array(12);
    var tgString = "甲乙丙丁戊己庚辛壬癸";
    var dzString = "子丑寅卯辰巳午未申酉戌亥";
    var numString = "一二三四五六七八九十";
    var monString = "正二三四五六七八九十冬腊";
    var weekString = "日一二三四五六";
    var sx = "鼠牛虎兔龙蛇马羊猴鸡狗猪";
    var cYear, cMonth, cDay, TheDate;
    CalendarData = new Array(0xA4B, 0x5164B, 0x6A5, 0x6D4, 0x415B5, 0x2B6, 0x957, 0x2092F, 0x497, 0x60C96, 0xD4A, 0xEA5, 0x50DA9, 0x5AD, 0x2B6, 0x3126E, 0x92E, 0x7192D, 0xC95, 0xD4A, 0x61B4A, 0xB55, 0x56A, 0x4155B, 0x25D, 0x92D, 0x2192B, 0xA95, 0x71695, 0x6CA, 0xB55, 0x50AB5, 0x4DA, 0xA5B, 0x30A57, 0x52B, 0x8152A, 0xE95, 0x6AA, 0x615AA, 0xAB5, 0x4B6, 0x414AE, 0xA57, 0x526, 0x31D26, 0xD95, 0x70B55, 0x56A, 0x96D, 0x5095D, 0x4AD, 0xA4D, 0x41A4D, 0xD25, 0x81AA5, 0xB54, 0xB6A, 0x612DA, 0x95B, 0x49B, 0x41497, 0xA4B, 0xA164B, 0x6A5, 0x6D4, 0x615B4, 0xAB6, 0x957, 0x5092F, 0x497, 0x64B, 0x30D4A, 0xEA5, 0x80D65, 0x5AC, 0xAB6, 0x5126D, 0x92E, 0xC96, 0x41A95, 0xD4A, 0xDA5, 0x20B55, 0x56A, 0x7155B, 0x25D, 0x92D, 0x5192B, 0xA95, 0xB4A, 0x416AA, 0xAD5, 0x90AB5, 0x4BA, 0xA5B, 0x60A57, 0x52B, 0xA93, 0x40E95);
    madd[0] = 0;
    madd[1] = 31;
    madd[2] = 59;
    madd[3] = 90;
    madd[4] = 120;
    madd[5] = 151;
    madd[6] = 181;
    madd[7] = 212;
    madd[8] = 243;
    madd[9] = 273;
    madd[10] = 304;
    madd[11] = 334;
    function GetBit(m, n) {
      return (m >> n) & 1;
    }
    function e2c() {
      TheDate = (arguments.length != 3) ? new Date() : new Date(arguments[0], arguments[1], arguments[2]);
      var total, m, n, k;
      var isEnd = false;
      var tmp = TheDate.getYear();
      if (tmp < 1900) {
        tmp += 1900;
      }
      total = (tmp - 1921) * 365 + Math.floor((tmp - 1921) / 4) + madd[TheDate.getMonth()] + TheDate.getDate() - 38;
      if (TheDate.getYear() % 4 == 0 && TheDate.getMonth() > 1) {
        total++;
      }
      for (m = 0; ; m++) {
        k = (CalendarData[m] < 0xfff) ? 11 : 12;
        for (n = k; n >= 0; n--) {
          if (total <= 29 + GetBit(CalendarData[m], n)) {
            isEnd = true; break;
          }
          total = total - 29 - GetBit(CalendarData[m], n);
        }
        if (isEnd) break;
      }
      cYear = 1921 + m;
      cMonth = k - n + 1;
      cDay = total;
      if (k == 12) {
        if (cMonth == Math.floor(CalendarData[m] / 0x10000) + 1) {
          cMonth = 1 - cMonth;
        }
        if (cMonth > Math.floor(CalendarData[m] / 0x10000) + 1) {
          cMonth--;
        }
      }
    }
    function GetcDateString() {
      var tmp = "";
      tmp += tgString.charAt((cYear - 4) % 10);
      tmp += dzString.charAt((cYear - 4) % 12);
      tmp += "(";
      tmp += sx.charAt((cYear - 4) % 12);
      tmp += ")年 ";
      if (cMonth < 1) {
        tmp += "(闰)";
        tmp += monString.charAt(-cMonth - 1);
      } else {
        tmp += monString.charAt(cMonth - 1);
      }
      tmp += "月";
      tmp += (cDay < 11) ? "初" : ((cDay < 20) ? "十" : ((cDay < 30) ? "廿" : "三十"));
      if (cDay % 10 != 0 || cDay == 10) {
        tmp += numString.charAt((cDay - 1) % 10);
      }
      return tmp;
    }
    function GetLunarDay(solarYear, solarMonth, solarDay) {
      //solarYear = solarYear<1900?(1900+solarYear):solarYear;
      if (solarYear < 1921 || solarYear > 2020) {
        return "";
      } else {
        solarMonth = (parseInt(solarMonth) > 0) ? (solarMonth - 1) : 11;
        e2c(solarYear, solarMonth, solarDay);
        return GetcDateString();
      }
    }
    var yy = D.getFullYear();
    var mm = D.getMonth() + 1;
    var dd = D.getDate();
    var ww = D.getDay();
    var ss = parseInt(D.getTime() / 1000);
    if (yy < 100) yy = "19" + yy;
    return GetLunarDay(yy, mm, dd);
  };
  CalendarHelper.GetAddDay = function (D, v) {
    var LSTR_ndate = D;
    var LSTR_Year = LSTR_ndate.getYear();
    var LSTR_Month = LSTR_ndate.getMonth();
    var LSTR_Date = LSTR_ndate.getDate();
    //处理
    var uom = new Date(LSTR_Year, LSTR_Month, LSTR_Date);
    uom.setDate(uom.getDate() + v); //取得系统时间的前一天,重点在这里,负数是前几天,正数是后几天
    return uom;
  }
  //是否除夕
  CalendarHelper.IsLastDayBeforeNewYearOfCN = function (D) {
    var strCurrDay = CalendarHelper.GetCNDate(D);
    var strNextDay = CalendarHelper.GetCNDate(CalendarHelper.GetAddDay(D, 1));
    //alert(strCurrDay+","+strNextDay);
    return strCurrDay.split('年')[0] != strNextDay.split('年')[0];
  };
  //是否春节
  CalendarHelper.IsNewYearOfCN = function (D) {
    var strCurrDay = CalendarHelper.GetCNDate(D);
    var strPrevDay = CalendarHelper.GetCNDate(CalendarHelper.GetAddDay(D, -1));
    //alert(strCurrDay+","+strPrevDay);
    return strCurrDay.split('年')[0] != strPrevDay.split('年')[0];
  };
  //------------------- End ----------------------
  var d1 = new Date();
  var d2 = new Date(2013, 1, 9); //注:此处相当于2013年2月9号
  var d3 = new Date(2013, 1, 10);
  var result = GetResult(d1) + GetResult(d2) + GetResult(d3);
  alert(result);
  function GetResult(D) {
    var y = D.getFullYear();
    var m = D.getMonth() + 1;
    var dd = D.getDate();
    var str = y + "年" + m + "月" + dd + "日";
    var isR = CalendarHelper.IsLastDayBeforeNewYearOfCN(D);
    var isN = CalendarHelper.IsNewYearOfCN(D);
    return "日期:"+str+","+ (isR?"是":"不是") + "除夕" + "," + (isN?"是":"不是") + "春节nn" ;
  }
</script>
</head>
<body>
</body>
</html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery日期与时间操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery日历插件datepicker用法详解,jquerydatepicker

 jQuery是一款不可多得的非常优秀的javascript脚本开发库,而基于其上的很多插件也是非常规范和卓越的,如果错过这番美景真是太可惜了,比如datepicker这个插件。

一般MIS系统的前端,尤其是用户注册页面,都会有诸如“出身年月”的日期输入框,最简单的做法就是使用一个<input type="text"/>标签,这样做的弊端有很多:首先是与数据库字段类型的匹配、其次是输入日期的合法性如“13月”或者闰年等等问题,如果深入下去还有非常多的地方值得推敲。当前比较流行的做法是使用下拉菜单<select><option></option></select>来构造,但是这样做无论交互性、复杂度和可移植性都不尽如人意,因为至少需要构建3个联动的下拉菜单,需要自己编写大量的脚本处理日期合法性。

datepicker带来了美好的春天,先看看使用默认样式时它的样子:

澳门新濠3559 1

完全GUI般的用户体验,炫目的动态展现效果,精确的日期控制和高度的灵活的参数配置,这一切使得datepicker受到众多开发者的青睐,其中包括大名鼎鼎的google,在其google calendar项目中就使用了这个脚本,有兴趣可以去看看。顺便啰嗦一句,上图的默认效果,在javascript中,用户只需写一句话就可以实现了,怎么样,心动了吧,follow me:

1.下载jQuery核心文件就不用说了吧,datepicker是轻量级插件,只需jQuery的min版本就行了,然后下载datepicker(内含jQuery1.2.6_min),您也可以到官方网站下载:

2.在HTML中引用下载下来的两个js:

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript" src="js/ui.datepicker.js"></script>

3.在HTML中引入默认样式表文件,这个文件也在刚刚的压缩包中,如果在官网下载,首页就有这个CSS文件下载,也可选择其他皮肤的CSS:

<link rel="stylesheet" href="js/ui.datepicker.css" type="text/css" media="screen" title="core css file" charset="utf-8" />

4.在HTML中插入文本域,最好设置成只读,不接受用户的手动输入,防止格式混乱,以id标记好。

<input id="dateinput" type="text" readonly="readonly"/>

5.编写js代码,实现最终效果。

<script language="javascript">
$(document).ready(function() { 
 $('#dateinput').datepicker(); 
 }); 
</script>

这样就基本完成一个日期输入文本域了,但是是英文的,根据不同的MIS系统,有的目标人群是上了年级的用户,建议将界面改成中文,可以如此操作,稍微改动一下刚刚的函数,like this:

<script language="javascript">
$(document).ready(function() { 
 $('#dateinput').datepicker({ 
  dateFormat: 'yy-mm-dd', //日期格式,自己设置
  buttonImage: 'calendar.gif', //按钮的图片路径,自己设置
  buttonImageOnly: true, //Show an image trigger without any button.
  showOn: 'both',//触发条件,both表示点击文本域和图片按钮都生效
 yearRange: '1990:2008',//年份范围
 clearText:'清除',//下面的就不用详细写注释了吧,呵呵,都是些文本设置
 closeText:'关闭',
 prevText:'前一月',
 nextText:'后一月',
 currentText:' ',
 monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
 }); 
 }); 
</script>

OK,大功告成,我根据自己的要求,写的页面的代码如下,仅供参考,自己尝试一下吧:

<!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="js/ui.datepicker.css" type="text/css" media="screen" title="core css file" charset="utf-8" />
<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript" src="js/ui.datepicker.js"></script>
<script language="javascript">
$(document).ready(function() { 
 var yearFrom=new Date().getYear()-60+1900;
 var yearTo=new Date().getYear()-18+1900; 
 $('#dateinput').datepicker({ 
 dateFormat: 'yy-mm-dd', 
 buttonImage: 'calendar.gif', 
 buttonImageOnly: true, 
 showOn: 'both',
 yearRange: yearFrom+':'+yearTo,
 clearText:'清除',
 closeText:'关闭',
 prevText:'前一月',
 nextText:'后一月',
 currentText:' ',
 monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
 }); 
 }); 
</script>
</head>
<body>
<input id="dateinput" type="text" readonly="readonly"/>
</body>
</html>

以上就是关于jQuery日历插件datepicker用法详细介绍,希望对大家的学习有所帮助。

本文实例讲述了jquery日历插件datepicker用法。分享给大家供大家参考,具体如下:

jQuery Datepicker$ {var nowdays = new Date();var dateConfig = { showOn: 'both', //&#20108;&#20010;&#37117;&#26174;&#31034; buttonImage: 'calendar.gif', //&#21152;&#36733;&#22270;&#29255; buttonImageOnly: true, //&#26174;&#31034;&#22270;&#29255;&#30340;&#22320;&#26041;&#26377;&#19968;&#20010;&#31361;&#20986;&#37096;&#20998;&#65292;&#36825;&#20010;&#23601;&#26159;&#38544;&#34255;&#37027;&#29609;&#24847;&#30340; changeFirstDay: false, //&#36825;&#20010;&#21442;&#25968;&#24178;&#20160;&#20040;&#30340;&#21602;&#65292;&#26143;&#26399;&#19968;&#26159;&#26085;&#21382;&#30340;&#31532;&#19968;&#20010;&#65292;&#19981;&#21487;&#20197;&#25913;&#21160;&#30340; numberOfMonths: 2, //&#26174;&#31034;&#20108;&#20010;&#26376;&#65292;&#40664;&#35748;&#19968;&#20010;&#26376; minDate: nowdays, //&#26174;&#31034;&#26368;&#23567;&#26102;&#38388;&#26159;&#20170;&#22825; dateFormat: 'yy-mm-dd', //&#26085;&#26399;&#26684;&#24335; yearRange: '-20:+20' //&#21069;&#21518;20&#24180;&#65292;&#19981;&#36807;&#36825;&#26681;minDate&#26159;&#20170;&#22825;&#26377;&#20914;&#31361;&#65292;&#33258;&#24049;&#21435;&#35797;&#21543;&#12290;}; $.datepick; $.datepick;jquery 日历插件举例
样式1
样式2
样式3




左边直接显示,右边要点击

更多关于jQuery插件相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》

这里给出本站下载地址://www.jb51.net/jiaoben/19622.html

我用过好几种日历插件,有的太花哨,有的太简单,有的浏览器不兼容等等,没有一个能让我感到满意的,后来同事给我推荐了jquery.datepick这个插件,我从官方网站下了一个,亲自做了一下,感觉相当的不错,逻辑和样式可以完全分开,并且非常的灵活,支持30个国家的语言,基本能满足我的要求。

说明:datepick插件里面有好多参数要设置,这个要根据个人的需要了。具体请参考jquery的官方网址

编辑:服务器运维 本文来源:然后下载datepicker(内含jQuery1.2.6,具体请参考j

关键词: