真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

jQuery實(shí)現(xiàn)的簡(jiǎn)單日歷組件定義與用法示例

本文實(shí)例講述了jQuery實(shí)現(xiàn)的簡(jiǎn)單日歷組件定義與用法。分享給大家供大家參考，具體如下：

站在用戶的角度思考問題，與客戶深入溝通，找到成縣網(wǎng)站設(shè)計(jì)與成縣網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋成縣地區(qū)。

說到日歷組件，網(wǎng)上一搜一大堆，各種插件啊、集成框架啊實(shí)在不少。但是插件有的不合需求，框架嘛依賴關(guān)系一大堆，比如jQueryUI、bootstrap等。其實(shí)現(xiàn)在我就是想要一個(gè)輕量級(jí)的日歷組件，功能也不需要很強(qiáng)大，只要能兼容所有瀏覽器，能選擇任意年份日期和星期就可以了。

jQuery實(shí)現(xiàn)的簡(jiǎn)單日歷組件定義與用法示例

jQuery實(shí)現(xiàn)的簡(jiǎn)單日歷組件定義與用法示例

jQuery實(shí)現(xiàn)的簡(jiǎn)單日歷組件定義與用法示例

好了，廢話不多說，直接上代碼：

好了，先引入jQuery庫。（發(fā)表一下感概：angularJS的數(shù)據(jù)雙向綁定著實(shí)讓我對(duì)jQuery的未來擔(dān)憂了一陣子，不過jQuery畢竟存在的時(shí)間很久，API文檔和應(yīng)用方面實(shí)在太廣泛了 * _ *，而且jQuery無可厚非是一款相當(dāng)不錯(cuò)的DOM操作類庫，至少我覺得段時(shí)間內(nèi)這個(gè)地位無可動(dòng)搖。所以大家還是大膽地用吧！）

下面這個(gè)是還沒壓縮的js文件，純手寫哦 ^_^

/*
 * jquery extend: dateField
 * author:jafeney
 * createTime:2015-8-28 （很久之前寫的，拿出來炒下冷飯）
 */
jQuery.fn.extend({
  dateField:function(options,callback){
    var self=this,
      _self=$(this),
      _eventType=options.eventType || 'click',
      _style=options.style || 'default',
      _parent=$(this).parent(),
      _nowDate={
        year:new Date().getFullYear(),
        month:new Date().getMonth()+1
      },
      _switchState=0,
      _monthArray=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
      _daysArray=[31,28,31,30,31,30,31,31,30,31,30,31];
    /*init*/
    _self.on(_eventType,function(){
      /*before use this extend,the '_self' must have a container*/
      _self.parent().css('position','relative');
      /*create element as dateField's container*/
      var _container=$("
");
      var _header=$("
"
          +"
"
          +"«"
          +""+_nowDate.year+"年"+_nowDate.month+"月"
          +"»"
          +"
"
          +"
  • 日
  • 一
  • 二
  • 三
  • 四
  • 五
  • 六
"
          +"
");
      var _body=$("
"+self.getDays(_nowDate.year,_nowDate.month)+"
");
      var _footer=$("");
      _container.append(_header).append(_body).append(_footer);
      _self.parent().append(_container);
      _self.parent().find('.dateField-container').show();
      /*do callback*/
      if(callback) callback();
    });
    /*some functions*/
    /*get any year and any month's days into a list*/
    self.getDays=function(year,month){
      var _monthDay=self.getMonthDays(year,month);
      var _firstDay=new Date(year+'/'+month+'/'+'01').getDay(); //get this month's first day's weekday
      var returnStr='';
      returnStr+="
    ";
      for(var i=1;i<=42;i++){
        if(i<=_monthDay+_firstDay){
          if(i%7===0){
            returnStr+="
  • "+self.filterDay(i-_firstDay)+"
    • ";
          }else{
            returnStr+="
  • "+self.filterDay(i-_firstDay)+"
    • ";
          }
        }else{
          if(i%7===0){
            returnStr+="
  • ";
          }else{
            returnStr+="
  • ";
          }
        }
      }
      returnStr+="
";
      return returnStr;
    }
    /*filter days*/
    self.filterDay=function(day){
      if(day<=0 || day>31) {
        return '';
      }else{
        return day;
      }
    }
    /*judge any year is LeapYear*/
    self.isLeapYear=function(year){
      var bolRet = false;
      if (0===year%4&&((year%100!==0)||(year%400===0))) {
        bolRet = true;
      }
      return bolRet;
    }
    /*get any year and any month's full days*/
    self.getMonthDays=function(year,month){
      var c=_daysArray[month-1];
      if((month===2) && self.isLeapYear(year)) c++;
      return c;
    }
    /*get this year's months*/
    self.getMonths=function(){
      var returnStr="";
      returnStr="
    ";
      for(var i=0;i<12;i++){
        if((i+1)%3===0){
          returnStr+="
  • "+self.switchMonth(i)+"
    • ";
        }else{
          returnStr+="
  • "+self.switchMonth(i)+"
    • ";
        }
      }
      returnStr+='
';
      return returnStr;
    }
    /*get siblings 12 years*/
    self.getYears=function(year){
      var returnStr="";
      returnStr="
    ";
      for(var i=0;i<12;i++){
        if((i+1)%3===0){
          returnStr+="
  • "+(year+i)+"
    • ";
        }else{
          returnStr+="
  • "+(year+i)+"
    • ";
        }
      }
      returnStr+='
';
      return returnStr;
    }
    /*formatDate*/
    self.formatDate=function(date){
      if(date.length===1 || date<10){
        return '0'+date;
      }else{
        return date;
      }
    }
    /*switch month number to chinese*/
    self.switchMonth=function(number){
      return _monthArray[number];
    }
    /*go to prev*/
    _parent.on('click','.dateField-header-btn-left',function(){
      switch(_switchState){
        /*prev month*/
        case 0:
          _nowDate.month--;
          if(_nowDate.month===0){
            _nowDate.year--;
            _nowDate.month=12;
          }
          $(this).siblings('.dateField-header-datePicker').text(_nowDate.year+'年'+_nowDate.month+'月');
          $(this).parent().siblings('ul').show();
          $(this).parent().parent().siblings('.dateField-body').html(self.getDays(_nowDate.year,_nowDate.month));
          break;
        /*next 12 years*/
        case 2:
          _nowDate.year-=12;
          $(this).parent().parent().siblings('.dateField-body').html(self.getYears(_nowDate.year));
          break;
        default:
          break;
      }
    });
    /*go to next*/
    _parent.on('click','.dateField-header-btn-right',function(){
      switch(_switchState){
        /*next month*/
        case 0:
          _nowDate.month++;
          if(_nowDate.month===13){
            _nowDate.year++;
            _nowDate.month=1;
          }
          $(this).siblings('.dateField-header-datePicker').text(_nowDate.year+'年'+_nowDate.month+'月');
          $(this).parent().siblings('ul').show();
          $(this).parent().parent().siblings('.dateField-body').html(self.getDays(_nowDate.year,_nowDate.month));
          break;
        /*next 12 years*/
        case 2:
          _nowDate.year+=12;
          $(this).parent().parent().siblings('.dateField-body').html(self.getYears(_nowDate.year));
          break;
        default:
          break;
      }
    });
    /*switch choose year or month*/
    _parent.on('click','.dateField-header-datePicker',function(){
      switch(_switchState){
        case 0:
          /*switch month select*/
          $(this).parent().siblings('ul').hide();
          $(this).parent().parent().siblings('.dateField-body').html(self.getMonths());
          _switchState=1;
          break;
        case 1:
          /*switch year select*/
          $(this).parent().parent().siblings('.dateField-body').html(self.getYears(_nowDate.year));
          _switchState=2;
          break;
        default:
          break;
      }
    });
    /*select a year*/
    _parent.on('click','.dateField-select.select-year',function(){
      if($(this).text()!==''){
        $(this).parent().children('.dateField-select.select-year').removeClass('active');
        $(this).addClass('active');
        _nowDate.year=$(this).data('year');
        $(this).parent().parent().siblings().find('.dateField-header-datePicker').text(_nowDate.year+'年'+_nowDate.month+'月');
        $(this).parent().parent().parent().find('.dateField-header-week').hide();
        $(this).parent().parent().html(self.getMonths());
        _switchState=1;
      }
    });
    /*select a month*/
    _parent.on('click','.dateField-select.select-month',function(){
      if($(this).text()!==''){
        $(this).parent().children('.dateField-select.select-month').removeClass('active');
        $(this).addClass('active');
        _nowDate.month=$(this).data('month');
        $(this).parent().parent().siblings().find('.dateField-header-datePicker').text(_nowDate.year+'年'+_nowDate.month+'月');
        $(this).parent().parent().parent().find('.dateField-header-week').show();
        $(this).parent().parent().html(self.getDays(_nowDate.year,_nowDate.month));
        _switchState=0;
      }
    });
    /*select a day*/
    _parent.on('click','.dateField-select.select-day',function(){
      if($(this).text()!==''){
        var _day=$(this).text();
        $(this).parent().children('.dateField-select.select-day').removeClass('active');
        $(this).addClass('active');
        var _selectedDate=_nowDate.year+'-'+self.formatDate(_nowDate.month)+'-'+self.formatDate(_day);
        _self.val(_selectedDate).attr('data-Date',_selectedDate);
        _self.parent().find('.dateField-container').remove();
        /*template code： just for this page*/
        $('#check-birthday').removeClass('fail').hide();
      }
    });
    /*close the dateFiled*/
    /*click other field to close the dateField (outclick event)*/
    $(document).on('click',function(e){
      var temp=$(e.target);
      if(temp.hasClass('dateField-container') || temp.hasClass('dateField-header-btn-left') || temp.hasClass('dateField-header-datePicker') || $(e.target).hasClass('dateField-header-btn-right') || $(e.target).hasClass('dateField-select') || $(e.target)[0].id===_self.attr('id')){
        ;
      }else{
        $('.dateField-container').remove();
        _switchState=0;
      }
    });
    return self;
  }
});

下面是我 寫的簡(jiǎn)單的一套樣式風(fēng)格，有點(diǎn)模仿微信的風(fēng)格。

/*dateField styles*/
/*reset*/
ul,li{
  list-style: none;
  padding:0;
  margin:0;
}
/*default*/
.dateField-container{
  position:absolute;
  width:210px;
  border:1px solid rgb(229,229,229);
  z-index:99999;
  background:#fff;
  font-size:13px;
  margin-top:0px;
  cursor: pointer;
  display:none;
}
.dateField-header{
  width:212px;
  position:relative;
  left:-1px;
}
.dateField-header-btns{
  width:100%;
  height:30px;
  text-align:center;
  background:rgb(243,95,143);
}
.btn{
  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
}
.dateField-header-btn-left{
  float: left;
  display:block;
  width:30px;
  height:30px;
  color:#fff;
  line-height:30px;
}
.dateField-header-btn-left:hover{
  background:rgb(238,34,102);
}
.dateField-header-datePicker{
  display:inline-block;
  width:120px;
  text-align:center;
  color:#fff;
  line-height:30px;
}
.dateField-header-datePicker:hover{
  background:rgb(238,34,102);
}
.dateField-header-btn-right{
  float: right;
  width:30px;
  height:30px;
  display:block;
  color:#fff;
  line-height:30px;
}
.dateField-header-btn-right:hover{
  background:rgb(238,34,102);
}
.dateField-header-week{
  clear:both;
  width:100%;
  height:26px;
}
.dateField-header-week li{
  float: left;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
}
.dateField-body{
  width:100%;
}
.dateField-body-days{
  clear: both;
}
.dateField-body-days li{
  float: left;
  width:30px;
  height:30px;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -moz-box-sizing:border-box;
  border-top:1px solid rgb(229,229,229);
  border-right:1px solid rgb(229,229,229);
  line-height:30px;
  text-align:center;
}
.dateField-body-days li:hover{
  color:#fff;
  background:rgb(243,95,143);
}
.dateField-body-days li.active{
  color:#fff;
  background:rgb(243,95,143);
}
.dateField-body-days li.last{
  border-right:0;
}
.dateField-footer{
  border-top:1px solid rgb(229,229,229);
  clear:both;
  width:100%;
  height:26px;
  font-size:12px;
}
.dateField-footer-close{
  margin-top:2px;
  display:inline-block;
  width:100%;
  height:22px;
  background:rgb(245,245,245);
  text-align: center;
  line-height:22px;
}
.dateField-footer-close:hover{
  background:rgb(238,238,238);
}
.dateField-select{
  user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
  -moz-user-select:none;
}
.dateField-body-months{
}
.dateField-body-months li{
  width:70px;
  height:35px;
  line-height:35px;
}
.dateField-body-years li{
  width:70px;
  height: 35px;
  line-height: 35px;
}

到了最關(guān)鍵的時(shí)刻，怎么使用呢？嘿嘿，就2行代碼。

gitHub地址 https://github.com/Jafeney/dateField

感興趣的朋友還可使用如下在線工具測(cè)試上述代碼運(yùn)行效果：

在線HTML/CSS/JavaScript前端代碼調(diào)試運(yùn)行工具：
http://tools.jb51.net/code/WebCodeRun

在線HTML/CSS/JavaScript代碼運(yùn)行工具：
http://tools.jb51.net/code/HtmlJsRun

PS：這里再為大家推薦幾款時(shí)間及日期相關(guān)工具供大家參考：

在線日期/天數(shù)計(jì)算器：
http://tools.jb51.net/jisuanqi/date_jisuanqi

在線日期天數(shù)差計(jì)算器：
http://tools.jb51.net/jisuanqi/onlinedatejsq

Unix時(shí)間戳(timestamp)轉(zhuǎn)換工具：
http://tools.jb51.net/code/unixtime

網(wǎng)頁萬年歷日歷：
http://tools.jb51.net/bianmin/webwannianli

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery日期與時(shí)間操作技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。


分享文章：jQuery實(shí)現(xiàn)的簡(jiǎn)單日歷組件定義與用法示例
本文網(wǎng)址：http://weahome.cn/article/pjidcc.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部