calender textbox without ajax

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了calender textbox without ajax，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

1.在工程文件下面新建文件夹"js",然后向其中添加JavaScript.js新建项，重命名为calendar.js。

2.向calendar.js中写入代码，

  1. var cal;
  2. var isFocus=false; //是否为焦点
  3. //function SelectDate(obj,strFormat) //两个参数改为只传一个
  4. function SelectDate(obj)
  5. {
  6.     var date = new Date();
  7.     var by = date.getFullYear()-80; //最小值 → 80 年前
  8.     var ey = date.getFullYear()+20; //最大值 → 20 年后
  9.     cal = (cal==null) ? new Calendar(by,ey,0) : cal;    //初始化为中文版，1为英文版
  10.     //cal.dateFormatStyle = strFormat; // 默认显示格式为:yyyy-MM-dd,还可显示 yyyy/MM/dd
  11.     cal.show(obj);
  12. }
  13. /**//* 返回日期 */
  14. String.prototype.toDate = function(style){
  15. var y = this.substring(style.indexOf('y'),style.lastIndexOf('y')+1);//年
  16. var m = this.substring(style.indexOf('M'),style.lastIndexOf('M')+1);//月
  17. var d = this.substring(style.indexOf('d'),style.lastIndexOf('d')+1);//日
  18. if(isNaN(y)) y = new Date().getFullYear();
  19. if(isNaN(m)) m = new Date().getMonth();
  20. if(isNaN(d)) d = new Date().getDate();
  21. var dt ;
  22. eval ("dt = new Date('"+ y+"','"+(m-1)+"','"+ d +"')");
  23. return dt;
  24. }
  25. /**//* 格式化日期 */
  26. Date.prototype.format = function(style){
  27. var o = {
  28.     "M+" : this.getMonth() + 1,//month
  29.     "d+" : this.getDate(),//day
  30.     "h+" : this.getHours(),//hour
  31.     "m+" : this.getMinutes(),//minute
  32.     "s+" : this.getSeconds(),//second
  33.     "w+" : "天一二三四五六".charAt(this.getDay()),//week
  34.     "q+" : Math.floor((this.getMonth() + 3) / 3),//quarter
  35.     "S" : this.getMilliseconds() //millisecond
  36. }
  37. if(/(y+)/.test(style)){
  38.     style = style.replace(RegExp.$1,(this.getFullYear() + "").substr(4 - RegExp.$1.length));
  39. }
  40. for(var k in o){
  41.     if(new RegExp("("+ k +")").test(style)){
  42.       style = style.replace(RegExp.$1,RegExp.$1.length == 1 ? o[k] :
  43.         ("00" + o[k]).substr(("" + o[k]).length));
  44.     }
  45. }
  46. return style;
  47. };
  48.  
  49. /**//*
  50. * 日历类
  51. * @param   beginYear 2009
  52. * @param   endYear   2015
  53. * @param   lang      0(中文)|1(英语) 可自由扩充
  54. * @param   dateFormatStyle "yyyy-MM-dd";
  55. */
  56. function Calendar(beginYear,endYear,lang,dateFormatStyle){
  57. this.beginYear = 2009;
  58. this.endYear = 2015;
  59. this.lang = 0;            //0(中文) | 1(英文)
  60. this.dateFormatStyle = "yyyy-MM-dd";
  61.  
  62. if (beginYear != null && endYear != null){
  63.     this.beginYear = beginYear;
  64.     this.endYear = endYear;
  65. }
  66. if (lang != null){
  67.     this.lang = lang
  68. }
  69.  
  70. if (dateFormatStyle != null){
  71.     this.dateFormatStyle = dateFormatStyle
  72. }
  73.  
  74. this.dateControl = null;
  75. this.panel = this.getElementById("calendarPanel");
  76. this.container = this.getElementById("ContainerPanel");
  77. this.form = null;
  78.  
  79. this.date = new Date();
  80. this.year = this.date.getFullYear();
  81. this.month = this.date.getMonth();
  82.  
  83.  
  84. this.colors = {
  85. "cur_word"      : "#FFFFFF",//当日日期文字颜色
  86. "cur_bg"        : "#83A6F4",//当日日期单元格背影色
  87. "sel_bg"        : "#FFCCCC",//已被选择的日期单元格背影色
  88. "sun_word"      : "#FF0000",//星期天文字颜色
  89. "sat_word"      : "#0000FF",//星期六文字颜色
  90. "td_word_light" : "#333333",//单元格文字颜色
  91. "td_word_dark" : "#CCCCCC",//单元格文字暗色
  92. "td_bg_out"     : "#EFEFEF",//单元格背影色
  93. "td_bg_over"    : "#FFCC00",//单元格背影色
  94. "tr_word"       : "#FFFFFF",//日历头文字颜色
  95. "tr_bg"         : "#666666",//日历头背影色
  96. "input_border" : "#CCCCCC",//input控件的边框颜色
  97. "input_bg"      : "#EFEFEF"   //input控件的背影色
  98. }
  99.  
  100. this.draw();
  101. this.bindYear();
  102. this.bindMonth();
  103. this.changeSelect();
  104. this.bindData();
  105. }
  106.  
  107. /**//*
  108. * 日历类属性（语言包，可自由扩展）
  109. */
  110. Calendar.language ={
  111. "year"   : [[""],[""]],"months" : [["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"]
  112.          ],"weeks" : [["日","一","二","三","四","五","六"],["SUN","MON","TUR","WED","THU","FRI","SAT"]
  113.          ],"clear" : [["清空"],["CLS"]],"today" : [["今天"],["TODAY"]],"close" : [["关闭"],["CLOSE"]]
  114. }
  115.  
  116. Calendar.prototype.draw = function(){
  117. calendar = this;
  118.  
  119. var mvAry = [];
  120. mvAry[mvAry.length] = ' <div name="calendarForm" style="margin: 0px;">';
  121. mvAry[mvAry.length] = '    <table width="100%" border="0" cellpadding="0" cellspacing="1">';
  122. mvAry[mvAry.length] = '      <tr>';
  123. mvAry[mvAry.length] = '        <th align="left" width="1%"><input style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:16px;height:20px;" name="prevMonth" type="button" id="prevMonth" value="<" /></th>';
  124. mvAry[mvAry.length] = '        <th align="center"width="98%"><select name="calendarYear" id="calendarYear" style="width:48%;font-size:12px;"></select><select name="calendarMonth" id="calendarMonth" style="font-size:12px;width:48%;"></select></th>';
  125. mvAry[mvAry.length] = '        <th align="right" width="1%"><input style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:16px;height:20px;" name="nextMonth" type="button" id="nextMonth" value=">" /></th>';
  126. mvAry[mvAry.length] = '      </tr>';
  127. mvAry[mvAry.length] = '    </table>';
  128. mvAry[mvAry.length] = '    <table id="calendarTable" width="100%" style="border:0px solid #CCCCCC;background-color:#FFFFFF" border="0" cellpadding="3" cellspacing="1">';
  129. mvAry[mvAry.length] = '      <tr>';
  130. for(var i = 0; i < 7; i++){
  131.     mvAry[mvAry.length] = '      <th style="font-weight:normal;background-color:' + calendar.colors["tr_bg"] + ';color:' + calendar.colors["tr_word"] + ';">' + Calendar.language["weeks"][this.lang][i] + '</th>';
  132. }
  133. mvAry[mvAry.length] = '      </tr>';
  134. for(var i = 0; i < 6;i++){
  135.     mvAry[mvAry.length] = '    <tr align="center">';
  136.     for(var j = 0; j < 7; j++){
  137.       if (j == 0){
  138.         mvAry[mvAry.length] = ' <td style="cursor:default;color:' + calendar.colors["sun_word"] + ';"></td>';
  139.       } else if(j == 6){
  140.         mvAry[mvAry.length] = ' <td style="cursor:default;color:' + calendar.colors["sat_word"] + ';"></td>';
  141.       } else{
  142.         mvAry[mvAry.length] = ' <td style="cursor:default;"></td>';
  143.       }
  144.     }
  145.     mvAry[mvAry.length] = '    </tr>';
  146. }
  147. mvAry[mvAry.length] = '      <tr style="background-color:' + calendar.colors["input_bg"] + ';">';
  148. mvAry[mvAry.length] = '        <th colspan="2"><input name="calendarClear" type="button" id="calendarClear" value="' + Calendar.language["clear"][this.lang] + '" style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:100%;height:20px;font-size:12px;"/></th>';
  149. mvAry[mvAry.length] = '        <th colspan="3"><input name="calendarToday" type="button" id="calendarToday" value="' + Calendar.language["today"][this.lang] + '" style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:100%;height:20px;font-size:12px;"/></th>';
  150. mvAry[mvAry.length] = '        <th colspan="2"><input name="calendarClose" type="button" id="calendarClose" value="' + Calendar.language["close"][this.lang] + '" style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:100%;height:20px;font-size:12px;"/></th>';
  151. mvAry[mvAry.length] = '      </tr>';
  152. mvAry[mvAry.length] = '    </table>';
  153. mvAry[mvAry.length] = ' </div>';
  154. this.panel.innerHTML = mvAry.join("");
  155.  
  156. var obj = this.getElementById("prevMonth");
  157. obj.onclick = function (){calendar.goPrevMonth(calendar);}
  158. obj.onblur = function (){calendar.onblur();}
  159. this.prevMonth= obj;
  160.  
  161. obj = this.getElementById("nextMonth");
  162. obj.onclick = function (){calendar.goNextMonth(calendar);}
  163. obj.onblur = function (){calendar.onblur();}
  164. this.nextMonth= obj;
  165.  
  166.  
  167. obj = this.getElementById("calendarClear");
  168. obj.onclick = function (){calendar.dateControl.value = "";calendar.hide();}
  169. this.calendarClear = obj;
  170.  
  171. obj = this.getElementById("calendarClose");
  172. obj.onclick = function (){calendar.hide();}
  173. this.calendarClose = obj;
  174.  
  175. obj = this.getElementById("calendarYear");
  176. obj.onchange = function (){calendar.update(calendar);}
  177. obj.onblur = function (){calendar.onblur();}
  178. this.calendarYear = obj;
  179.  
  180. obj = this.getElementById("calendarMonth");
  181. with(obj)
  182. {
  183.     onchange = function (){calendar.update(calendar);}
  184.     onblur = function (){calendar.onblur();}
  185. }this.calendarMonth = obj;
  186.  
  187. obj = this.getElementById("calendarToday");
  188. obj.onclick = function (){
  189.     var today = new Date();
  190.     calendar.date = today;
  191.     calendar.year = today.getFullYear();
  192.     calendar.month = today.getMonth();
  193.     calendar.changeSelect();
  194.     calendar.bindData();
  195.     calendar.dateControl.value = today.format(calendar.dateFormatStyle);
  196.     calendar.hide();
  197. }
  198. this.calendarToday = obj;
  199. }
  200.  
  201. //年份下拉框绑定数据
  202. Calendar.prototype.bindYear = function(){
  203. var cy = this.calendarYear;
  204. cy.length = 0;
  205. for (var i = this.beginYear; i <= this.endYear; i++){
  206.     cy.options[cy.length] = new Option(i + Calendar.language["year"][this.lang],i);
  207. }
  208. }
  209.  
  210. //月份下拉框绑定数据
  211. Calendar.prototype.bindMonth = function(){
  212. var cm = this.calendarMonth;
  213. cm.length = 0;
  214. for (var i = 0; i < 12; i++){
  215.     cm.options[cm.length] = new Option(Calendar.language["months"][this.lang][i],i);
  216. }
  217. }
  218.  
  219. //向前一月
  220. Calendar.prototype.goPrevMonth = function(e){
  221. if (this.year == this.beginYear && this.month == 0){return;}
  222. this.month--;
  223. if (this.month == -1){
  224.     this.year--;
  225.     this.month = 11;
  226. }
  227. this.date = new Date(this.year,this.month,1);
  228. this.changeSelect();
  229. this.bindData();
  230. }
  231.  
  232. //向后一月
  233. Calendar.prototype.goNextMonth = function(e){
  234. if (this.year == this.endYear && this.month == 11){return;}
  235. this.month++;
  236. if (this.month == 12){
  237.     this.year++;
  238.     this.month = 0;
  239. }
  240. this.date = new Date(this.year,1);
  241. this.changeSelect();
  242. this.bindData();
  243. }
  244.  
  245. //改变SELECT选中状态
  246. Calendar.prototype.changeSelect = function(){
  247. var cy = this.calendarYear;
  248. var cm = this.calendarMonth;
  249. for (var i= 0; i < cy.length; i++){
  250.     if (cy.options[i].value == this.date.getFullYear()){
  251.       cy[i].selected = true;
  252.       break;
  253.     }
  254. }
  255. for (var i= 0; i < cm.length; i++){
  256.     if (cm.options[i].value == this.date.getMonth()){
  257.       cm[i].selected = true;
  258.       break;
  259.     }
  260. }
  261. }
  262.  
  263. //更新年、月
  264. Calendar.prototype.update = function (e){
  265. this.year = e.calendarYear.options[e.calendarYear.selectedIndex].value;
  266. this.month = e.calendarMonth.options[e.calendarMonth.selectedIndex].value;
  267. this.date = new Date(this.year,1);
  268. this.changeSelect();
  269. this.bindData();
  270. }
  271.  
  272. //绑定数据到月视图
  273. Calendar.prototype.bindData = function (){
  274. var calendar = this;
  275. var dateArray = this.getMonthViewArray(this.date.getFullYear(),this.date.getMonth());
  276. var tds = this.getElementById("calendarTable").getElementsByTagName("td");
  277. for(var i = 0; i < tds.length; i++){
  278. tds[i].style.backgroundColor = calendar.colors["td_bg_out"];
  279.     tds[i].onclick = function () {return;}
  280.     tds[i].onmouSEOver = function () {return;}
  281.     tds[i].onmouSEOut = function () {return;}
  282.     if (i > dateArray.length - 1) break;
  283.     tds[i].innerHTML = dateArray[i];
  284.     if (dateArray[i] != ""){
  285.       tds[i].onclick = function () {
  286.         if (calendar.dateControl != null){
  287.           calendar.dateControl.value = new Date(calendar.date.getFullYear(),calendar.date.getMonth(),this.innerHTML).format(calendar.dateFormatStyle);
  288.         }
  289.         calendar.hide();
  290.       }
  291.       tds[i].onmouSEOver = function () {
  292.         this.style.backgroundColor = calendar.colors["td_bg_over"];
  293.       }
  294.       tds[i].onmouSEOut = function () {
  295.         this.style.backgroundColor = calendar.colors["td_bg_out"];
  296.       }
  297.       if (new Date().format(calendar.dateFormatStyle) ==
  298.           new Date(calendar.date.getFullYear(),dateArray[i]).format(calendar.dateFormatStyle)) {
  299.         tds[i].style.backgroundColor = calendar.colors["cur_bg"];
  300.         tds[i].onmouSEOver = function () {
  301.           this.style.backgroundColor = calendar.colors["td_bg_over"];
  302.         }
  303.         tds[i].onmouSEOut = function () {
  304.           this.style.backgroundColor = calendar.colors["cur_bg"];
  305.         }
  306.       }//end if
  307.       
  308.       //设置已被选择的日期单元格背影色
  309.       if (calendar.dateControl != null && calendar.dateControl.value == new Date(calendar.date.getFullYear(),dateArray[i]).format(calendar.dateFormatStyle)) {
  310.         tds[i].style.backgroundColor = calendar.colors["sel_bg"];
  311.         tds[i].onmouSEOver = function () {
  312.           this.style.backgroundColor = calendar.colors["td_bg_over"];
  313.         }
  314.         tds[i].onmouSEOut = function () {
  315.           this.style.backgroundColor = calendar.colors["sel_bg"];
  316.         }
  317.       }
  318.     }
  319. }
  320. }
  321.  
  322. //根据年、月得到月视图数据(数组形式)
  323. Calendar.prototype.getMonthViewArray = function (y,m) {
  324. var mvArray = [];
  325. var dayOfFirstDay = new Date(y,m,1).getDay();
  326. var daysOfMonth = new Date(y,m + 1,0).getDate();
  327. for (var i = 0; i < 42; i++) {
  328.     mvArray[i] = "";
  329. }
  330. for (var i = 0; i < daysOfMonth; i++){
  331.     mvArray[i + dayOfFirstDay] = i + 1;
  332. }
  333. return mvArray;
  334. }
  335.  
  336. //扩展 document.getElementById(id) 多浏览器兼容性 from meizz tree source
  337. Calendar.prototype.getElementById = function(id){
  338. if (typeof(id) != "string" || id == "") return null;
  339. if (document.getElementById) return document.getElementById(id);
  340. if (document.all) return document.all(id);
  341. try {return eval(id);} catch(e){ return null;}
  342. }
  343.  
  344. //扩展 object.getElementsByTagName(tagName)
  345. Calendar.prototype.getElementsByTagName = function(object,tagName){
  346. if (document.getElementsByTagName) return document.getElementsByTagName(tagName);
  347. if (document.all) return document.all.tags(tagName);
  348. }
  349.  
  350. //取得HTML控件绝对位置
  351. Calendar.prototype.getAbsPoint = function (e){
  352. var x = e.offsetLeft;
  353. var y = e.offsetTop;
  354. while(e = e.offsetParent){
  355.     x += e.offsetLeft;
  356.     y += e.offsetTop;
  357. }
  358. return {"x": x,"y": y};
  359. }
  360.  
  361. //显示日历
  362. Calendar.prototype.show = function (dateObj,popControl) {
  363. if (dateObj == null){
  364.     throw new Error("arguments[0] is necessary")
  365. }
  366. this.dateControl = dateObj;
  367.  
  368. this.date = (dateObj.value.length > 0) ? new Date(dateObj.value.toDate(this.dateFormatStyle)) : new Date() ;//若为空则显示当前月份
  369. this.year = this.date.getFullYear();
  370. this.month = this.date.getMonth();
  371. this.changeSelect();
  372. this.bindData();
  373. if (popControl == null){
  374.     popControl = dateObj;
  375. }
  376. var xy = this.getAbsPoint(popControl);
  377. this.panel.style.left = xy.x -25 + "px";
  378. this.panel.style.top = (xy.y + dateObj.offsetHeight) + "px";
  379.  
  380. this.panel.style.display = "";
  381. this.container.style.display = "";
  382.  
  383. dateObj.onblur = function(){calendar.onblur();}
  384. this.container.onmouSEOver = function(){isFocus=true;}
  385. this.container.onmouSEOut = function(){isFocus=false;}
  386. }
  387.  
  388. //隐藏日历
  389. Calendar.prototype.hide = function() {
  390. this.panel.style.display = "none";
  391. this.container.style.display = "none";
  392. isFocus=false;
  393. }
  394.  
  395. //焦点转移时隐藏日历
  396. Calendar.prototype.onblur = function() {
  397.     if(!isFocus){this.hide();}
  398. }
  399. document.write('<div id="ContainerPanel" style="display:none;"><div id="calendarPanel" style="position: absolute;display: none;z-index: 9999;');
  400. document.write('background-color: #FFFFFF;border: 1px solid #CCCCCC;width:175px;font-size:12px;margin-left:25px;"></div>');
  401. if(document.all)
  402. {
  403. document.write('<iframe style="position:absolute;z-index:2000;width:expression(this.prevIoUsSibling.offsetWidth);');
  404. document.write('height:expression(this.prevIoUsSibling.offsetHeight);');
  405. document.write('left:expression(this.prevIoUsSibling.offsetLeft);top:expression(this.prevIoUsSibling.offsetTop);');
  406. document.write('display:expression(this.prevIoUsSibling.style.display);" scrolling="no" frameborder="no"></iframe>');
  407. }
  408. document.write('</div>');

3.保存文件后，即完成了js日历控件的编写。

4.在相应需要日历控件的源处写在head标签下面写
<script type="text/javascript" src="../js/calendar.js"></script>
其中，src是你JavaScript的位置

5.所有填写日期的TextBox，加这两个属性：ReadOnly="True" onclick="SelectDate(this)"

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作