1.HTML完整代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link rel="stylesheet" href="style.css" />
  7.     <style>
  8.         .datepicker{
  9.             border: 1px solid #ccc;
  10.             border-radius: 4px;
  11.             padding: 5px;
  12.             height: 24px;
  13.             line-height: 24px;
  14.             width: 230px;
  15.             margin: 50px auto;
  16.             display: block;
  17.         }
  18.         .datepicker:focus{
  19.             outline: 0 none;
  20.             border: 1px solid #1abc9c;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <input type="text" class="datepicker" />
  26.     <script src="data.js"></script>
  27.     <script src="main.js"></script>
  28.     <script>
  29.         datepicker.init('.datepicker');
  30.     </script>
  31. </body>
  32. </html>

2.css样式如下：

  1. .ui-datepicker-wrapper{
  2.     width: 240px;
  3.     font-size: 16px;
  4.     color: #666;
  5.     box-shadow: 2px 2px 8px 2px rgba(128, 128, 128, 0.3);
  6.     display: none;
  7.     position: absolute;
  8. }
  9. .ui-datepicker-wrapper-show{
  10.     display: block;
  11. }
  12. .ui-datepicker-wrapper .ui-datepicker-header{
  13.     padding: 0 20px;
  14.     height: 50px;
  15.     line-height: 50px;
  16.     text-align: center;
  17.     background: #f0f0f0;
  18.     border-bottom: 1px solid #ccc;
  19.     font-weight: bold;
  20. }
  21. .ui-datepicker-wrapper .ui-datepicker-btn{
  22.     font-family: serif;
  23.     font-size: 20px;
  24.     width: 20px;
  25.     height: 50px;
  26.     line-height: 50px;
  27.     color: #1abc9c;
  28.     text-align: center;
  29.     cursor: pointer;
  30.     text-decoration: none;
  31. }
  32. .ui-datepicker-wrapper .ui-datepicker-prev-btn{
  33.     float: left;
  34. }
  35. .ui-datepicker-wrapper .ui-datepicker-next-btn{
  36.     float: right;
  37. }
  38. .ui-datepicker-wrapper .ui-datepicker-body table{
  39.     width: 100%;
  40.     border-collapse: collapse;
  41. }
  42. .ui-datepicker-wrapper .ui-datepicker-body th,
  43. .ui-datepicker-wrapper .ui-datepicker-body td{
  44.     text-align: center;
  45.     height: 30px;
  46. }
  47. .ui-datepicker-wrapper .ui-datepicker-body th{
  48.     font-size: 12px;
  49.     height: 40px;
  50.     line-height: 40px;
  51. }
  52. .ui-datepicker-wrapper .ui-datepicker-body td{
  53.     font-size: 10px;
  54.     border: 1px solid #f0f0f0;
  55.     cursor: pointer;
  56. }
  57. .ui-datepicker-wrapper .ui-datepicker-body td.not{
  58.     color: #c0bbbb;
  59.     font-weight: normal;
  60. }
  61. .ui-datepicker-wrapper .ui-datepicker-body td.active{
  62.     background-color: #1abc9c;
  63.     font-weight: normal;
  64.     color: #fff;
  65. }

3.js代码如下：

data.js如下：

  1. (function(){
  2.     var datepicker = {};
  3.     datepicker.getMonthData = function(year, month){
  4.         var ret = [];
  5.         // month  为真实的数据
  6.         if(!year || !month){
  7.         // if(!year && !month){
  8.             var today = new Date();
  9.             year = today.getFullYear();
  10.             month = today.getMonth() + 1;
  11.         }
  12.         // 当月第一天
  13.         var firstDay = new Date(year, month-1, 1);
  14.         // 当月第一天的星期几
  15.         var firstDayWeekDay = firstDay.getDay();
  16.         // 周日处理
  17.         if(firstDayWeekDay === 0){
  18.             firstDayWeekDay = 7;
  19.         }
  20.  
  21.         year = firstDay.getFullYear();
  22.         month = firstDay.getMonth() + 1;
  23.  
  24.         // if(month < 10){
  25.         //     month = "0" + month;
  26.         // }
  27.         //上个月的最后一天 (当月的第0天)
  28.         var lastDayOfLastMonth = new Date(year, month-1, 0);
  29.         //上个月的最后一天的日期
  30.         var lastDateOfLastMonth = lastDayOfLastMonth.getDate();
  31.         //当月第一天前面显示多少上月的数据
  32.         var preMonthDayCount = firstDayWeekDay - 1;
  33.         //当月的最后一天
  34.         var lastDay = new Date(year, month, 0);
  35.         //当月的最后一天的日期
  36.         var lastDate = lastDay.getDate();
  37.         for(var i = 0; i < 7*6; i++){
  38.             //当月对应的日期
  39.             var date = i + 1 - preMonthDayCount;
  40.             var showDate = date; //显示的是哪一天
  41.             var thisMonth = month; //当月
  42.             if(date <= 0){
  43.                 //上一月
  44.                 thisMonth = month - 1;
  45.                 showDate = lastDateOfLastMonth + date;
  46.             }
  47.             else if(date > lastDate){
  48.                 //下一月
  49.                 thisMonth = month + 1;
  50.                 showDate = showDate - lastDate;
  51.             }    
  52.  
  53.             if(thisMonth === 0){
  54.                 thisMonth = 12;
  55.             }
  56.             if(thisMonth === 13){
  57.                 thisMonth = 1;
  58.             }
  59.             ret.push({
  60.                 year: year,
  61.                 month: thisMonth,
  62.                 date: date,
  63.                 showDate: showDate
  64.             })
  65.         }
  66.         return {
  67.             year: year,
  68.             month: month,
  69.             days: ret,
  70.             lastDate: lastDate
  71.         };
  72.     }
  73.     window.datepicker = datepicker;
  74. })();

main.js如下:

  1. (function(){
  2.     var datepicker = window.datepicker;
  3.     var monthData;
  4.     var $wrapper;
  5.     //querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
  6.     datepicker.buildUi = function(year, month){
  7.         monthData = datepicker.getMonthData(year,month);
  8.         var html =  '<div class="ui-datepicker-header">'+
  9.                      '<a href="#" class="ui-datepicker-btn ui-datepicker-prev-btn">&lt;</a>'+
  10.                      '<a href="#" class="ui-datepicker-btn ui-datepicker-next-btn">&gt;</a>'+
  11.                      '<span class="ui-datepicker-curr-month">'+monthData.year+'-'+padding(monthData.month)+'</span>'+
  12.                      '</div>'+
  13.                      '<div class="ui-datepicker-body">'+
  14.                      '<table>'+
  15.                      '<thead>'+
  16.                      '<tr>'+
  17.                      '<th>一</th>'+
  18.                      '<th>二</th>'+
  19.                      '<th>三</th>'+
  20.                      '<th>四</th>'+
  21.                      '<th>五</th>'+
  22.                      '<th>六</th>'+
  23.                      '<th>日</th>'+
  24.                      '</tr>'+
  25.                      '</thead>'+
  26.                      '<tbody>';
  27.         for(var i = 0; i < monthData.days.length; i++ ){
  28.             var date = monthData.days[i];
  29.             if(i%7 === 0){
  30.                 html += "<tr>";
  31.             }
  32.             // html += '<td data-date="'+date.date+'">'+date.showDate+'</td>';
  33.             if(date.date <= 0 || date.date > monthData.lastDate){
  34.                 html +='<td class="not" data-date="'+ date.date +'">'+date.showDate+'</td>';
  35.             }
  36.             else if(date.year === (new Date()).getFullYear() && date.month === ((new Date()).getMonth()+1) && date.date === (new Date()).getDate()){
  37.                 html +='<td class="active" data-date="'+ date.date +'">'+date.showDate+'</td>';
  38.             }
  39.             else{
  40.                 html +='<td data-date="'+ date.date +'">'+date.showDate+'</td>';
  41.             }
  42.             if(i%7 === 6){
  43.                 html += "</tr>";
  44.             }
  45.         };
  46.         html += '</tbody>'+
  47.                 '</table>'+
  48.                 '</div>';
  49.         return html;
  50.     };
  51.     datepicker.render = function(direction){
  52.         var year,month;
  53.         if(monthData){
  54.             year = monthData.year;
  55.             month = monthData.month;
  56.         }
  57.         if(direction === 'prev'){
  58.             month--;
  59.             if(month === 0){
  60.                 month = 12;
  61.                 year--;
  62.             }
  63.         }
  64.         if(direction === 'next'){
  65.             month++;
  66.         }
  67.         // var html = datepicker.buildUi(year, month);
  68.         // $wrapper = document.createElement("div");
  69.         // $wrapper.className = 'ui-datepicker-wrapper';
  70.         // $wrapper.innerHTML = html;
  71.         // document.body.appendChild($wrapper);
  72.         var html = datepicker.buildUi(year, month);
  73.         $wrapper = document.querySelector('.ui-datepicker-wrapper');
  74.         if(!$wrapper){
  75.             $wrapper = document.createElement("div");
  76.             document.body.appendChild($wrapper);
  77.             $wrapper.className = 'ui-datepicker-wrapper';
  78.         }
  79.         $wrapper.innerHTML = html;
  80.     }
  81.     datepicker.init = function(input){
  82.         datepicker.render();
  83.         var $input = document.querySelector(input);
  84.         var isOpen = false;
  85.         $input.value = format(new Date());
  86.         $input.addEventListener('click',function(){
  87.             if(isOpen){
  88.                 $wrapper.classList.remove('ui-datepicker-wrapper-show')
  89.                 isOpen = false;
  90.             }else{
  91.                 $wrapper.classList.add('ui-datepicker-wrapper-show')
  92.                 var left = $input.offsetLeft;
  93.                 var top = $input.offsetTop;
  94.                 var height = $input.offsetHeight;
  95.                 $wrapper.style.top = top + height + 2 + "px";
  96.                 $wrapper.style.left = left + "px";
  97.                 isOpen = true;
  98.             }
  99.         },false);
  100.  
  101.         $wrapper.addEventListener('click',function(e){
  102.             var $target = e.target;
  103.             if(!$target.classList.contains('ui-datepicker-btn')){
  104.                 return;
  105.             }
  106.             // 上一月
  107.             if($target.classList.contains('ui-datepicker-prev-btn')){
  108.                 datepicker.render('prev');
  109.             }
  110.             // 下一月
  111.             else if($target.classList.contains('ui-datepicker-next-btn')){
  112.                 datepicker.render('next');
  113.             }
  114.         }, false);
  115.  
  116.         $wrapper.addEventListener('click',function(e){
  117.             var $target = e.target;
  118.             if($target.tagName.toLowerCase() !== 'td'){
  119.                 return;
  120.             }
  121.             var date = new Date(monthData.year, monthData.month - 1, $target.dataset.date);
  122.             $input.value = format(date);
  123.             $wrapper.classList.remove('ui-datepicker-wrapper-show')
  124.             isOpen = false;
  125.         }, false);
  126.  
  127.     }
  128.  
  129.     var padding = function(num){
  130.         if(num <= 9){
  131.             return "0"+num;
  132.         }
  133.         return num;
  134.     }
  135.     function format(date){
  136.         var ret = '';
  137.         ret += date.getFullYear() + "-";
  138.         ret += padding(date.getMonth() + 1) + "-";
  139.         ret += padding(date.getDate());
  140.         return ret;
  141.     }
  142. })();

4.最终完成效果如下：

js 日历插件开发的更多相关文章

  1. 简洁JS 日历控件 支持日期和月份选择

    原文出处 以下这个JS日历控件是我的闲暇之余自己编写的,所有的代码全部在IE7/IE8/Firefox下面测试通过, 而且可以解决被iframe层遮盖的问题.现在只提供两种风格(简洁版和古典版)和两种 ...

  2. 百度的js日历

    <title>百度的Js日历,值得一看</title> <style> body,td,.p1,.p2,.i{font-family:arial} body{mar ...

  3. JS日历控件优化(增加时分秒)

    JS日历控件优化      在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时只支持 年月日 的日历控件,现在优化如下:      1. 在原基础上 支持 yyyy ...

  4. Js 日期选择，可以的一个页面中重复使用本JS日历，兼容IE及火狐等主流浏览器，而且界面简洁、美观，操作体验也不错。

    <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...

  5. JS日历控件集合----附效果图、源代码

    http://www.cnblogs.com/yank/archive/2008/08/14/1267746.html 在进行开发的过程中,经常需要输入时间,特别是在进行查询.统计的时候,时间限定更为 ...

  6. js日历学习

    <!DOCTYPE html><html><head><title>自己写的JS日历,适合学习</title><script src= ...

  7. 简洁js日历控件的使用

    往Web工程添加纯js日历控件 在网上找到了DatePicker.js(http://www.cnblogs.com/shenyixin/archive/2013/03/11/2954156.html ...

  8. JS日历控件 灵活设置: 精确的时分秒.

     在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时仅仅支持 年月日 的日历控件,如今优化例如以下:      1. 在原基础上 支持 yyyy-mm-dd 的年月 ...

  9. My97DatePicker{js日历插件}

    VS自带了一个日历控件:Calendar,但是它有一个缺陷:即在选择,隐藏,显示的时候都会引起回传 Calendar控件的一些用法:    取值:Calendar1.SelectedDate.ToSh ...

随机推荐

  1. 【SSH网上商城项目实战28】使用Ajax技术局部更新商品数量和总价

         转自: https://blog.csdn.net/eson_15/article/details/51487323 昨天把项目部署了一下,玩了玩,今天完善了一下购物车中修改商品数量就能局部 ...

  2. HDU 4248 A Famous Stone Collector 组合数学dp ****

    A Famous Stone Collector Time Limit: 30000/15000 MS (Java/Others)    Memory Limit: 32768/32768 K (Ja ...

  3. 空间分析开源库GEOS

    History of GEOS GEOS中Geometry的结构 GEOS分析功能简介 1.History of GEOS J​T​S​ ​T​o​p​o​l​o​g​y​ ​S​u​i​t​e是Ma ...

  4. The formal parameters of the method

    package basic.java; public class ParametersOfTheMethod { public static void main(String[] args) { in ...

  5. 使用wm_concat函数导致字符串过长

    场景:使用select wm_concat(xxxxx) from table 的时候 返回的字符串过长 解决方案 :使用to_clob 将字符串转成 clob类型,但是由于使用的前端框架不能解析cl ...

  6. mac安装软件提示没有权限

    Mac 安装软件基本是各种爽,自动更新啥. 但是有一种提示没有权限的错误,很不爽,还要sudo管理员权限 有一个修复 /usr/local目录权限的命令 sudo chown -R 'whoami' ...

  7. apache 配置PHP的支持重写伪静态

    1.开启rwrite模块 LoadModule rewrite_module modules/mod_rewrite. 允许任何目录使用.htaccess AllowOverride None 改成 ...

  8. c# datarow[] 转换成 datatable， List<T> 转datatable

      c# datarow[] 转换成 datatable, List<T> 转datatable DdataRow[]转成Datatable private DataTable ToDat ...

  9. winform ComboBox控件反选

    winform ComboBox控件反选:int index = comboBox1.FindString(textBox2.Text); comboBox1.SelectedIndex = inde ...

  10. VSTO 开发

    http://www.cnblogs.com/yangecnu/category/499866.html http://www.cnblogs.com/brooks-dotnet/category/2 ...