javascript 달력 플러그 인

javascript 달력 플러그 인
      최근 자 바스 크 립 트 달력 플러그 인 을 써 보 려 고 시도 하고 있 습 니 다. 그래서 github 에서 외국 사람들의 달력 원본 코드 를 보 거나 국내 사람들 이 잘 쓴 것 도 연구 하고 있 습 니 다. 인터넷 에 달력 컨트롤 이 많이 있 는 것 을 보 았 지만 원 하 는 것 이 별로 없습니다. 효 과 는 실현 되 었 지만 그들의 소스 코드 를 보면 머리 가 커서 자신 도 이 방면 의 것 을 연구 하고 있 습 니 다.주말 에 2 일 동안 다른 사람 이 쓴 코드 를 연구 하고 자신 도 demo 를 만들어 보 았 습 니 다. 오늘 은 마침 기본 기능 이 완성 되 었 습 니 다. 그래서 이 기 회 를 틈 타 공유 하 겠 습 니 다. 우 리 는 먼저 효 과 를 볼 수 있 습 니 다. JSpid dler 주 소 는 다음 과 같 습 니 다.
demo 링크 클릭 해 주세요.
기본 설정 은 다음 과 같 습 니 다.
   targetCls
'',    입력 상자 dom 노드 는 기본적으로 빈 필수 항목 입 니 다.
 beginyear
1978,     시작 연도
 endyear
 2050,    연말 연시
 date
 new Date(),  기본 날짜
 type
 "yyyy-mm-dd" ,      날짜 형식 (현재 이것 만 지원)
separator
 '-' ,             날짜 링크 문자
wday
 0 ,             주 첫날
language
{year: "년", month: "월", monthList: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"], weekList: ["일", "하나", "둘", "셋", "넷", "다섯", "여섯"]} / / 기본 값 은 중국어
방법 은 다음 과 같다.
 1. show():  달력 패 널 보이 기.
 2. hide (): 달력 패 널 을 숨 깁 니 다.
 3. clear () 입력 상자 의 날 짜 를 지 웁 니 다.
 4. getValue () 에서 현재 선택 한 날 짜 를 가 져 옵 니 다.
 5. 콜백 리 셋 을 제공 합 니 다.매개 변 수 를 되 돌려 줍 니 다.
모든 JS 코드 는 다음 과 같 습 니 다.

/**
 * javascript    
 */

 function Calendar(options,callback){
    var self = this;
    self.options = $.extend({},defaults,options || {});
    self.targetCls = $(self.options.targetCls);
    if(self.targetCls.length < 1) {return;}
    self.language = self.options.language;
    self.flag = false;
    self.callback = callback;

    self._init();
    self._bindEnv();
    
 };
 $.extend(Calendar.prototype,{
    
    _init: function(){
        var self = this;
        //        
        self._renderCalendarPanel();
    },
    _renderCalendarPanel: function(){
        var self = this,
            options = self.options;
        //   input         
        if(self.targetCls.val().length > 0) {
            self.date = self._dateParse(self.targetCls.val());
        }
        self.date = new Date(self.date);
        if(isNaN(self.date.getFullYear())){
            self.date = new Date();
        }
        var defYear = self.date.getFullYear(),
            defMonth = self.date.getMonth() + 1,
            defDay = self.date.getDate();

        //        
        self.month_day = new Array(31,28+self._leapYear(defYear),31,30,31,30,31,31,30,31,30,31);

        //        
        self.date_name_week = self.language.weekList;

        //     
        var saturday = 6 - options.wdays,
            sunday = (7-options.wdays >= 7) ? 0 : (7-options.wday);
        
        //       dom  
        var date_pane = $('
'),
            date_hd = $('
').appendTo(date_pane),
            date_table = $('

').appendTo(date_pane); date_hd.html("<>"); var date_txt = $(''; // 遍历一周7天for(var i = 0; i < 7; i++) { html += ""; }; html +=""; html +=""; date_table.html(html); // 面板及背景遮挡层插入到页面中 date_pane.appendTo("body"); // 创建遮罩层的目地是：只显示一个日历面板var block_bg=$(""; for(var j = 0; j < 7; j++) { td_num=i*7+j; day_num=td_num-firstDay+1; if(day_num<=0) { if(day_num == 0) { day_num = prevDay - day_num text_m = prevMonth }else { day_num = prevDay + day_num; text_m = prevMonth } }elseif(day_num > self.month_day[m]){ day_num = day_num - curDay; text_m = nextMonth }else { text_m = cur_m; } temp_html+=""); } temp_html+=""; } $(self.dateTable).find("tbody").html(temp_html); $(self.dateTxt).html(""+y+""+options.language.year+""+options.language.monthList[m]+""+options.language.month); $(self.yearList).val(y); $(self.monthList).val(m+1); returnthis; }, _dateParse: function(date){ var newdate = date; newdate=newdate.replace(/\./g,"/"); newdate=newdate.replace(/-/g,"/"); newdate=newdate.replace(/\//g,"/"); newdate=Date.parse(newdate); return newdate; }, /* * 判断是否是闰年 * @param y 年份 * 1.能被4整除且不能被100整除 2.能被100整除且能被400整除 */ _leapYear: function(y) { return ((y%4==0 && y%100!=0) || y%400==0) ? 1 : 0; }, _bindEnv: function(){ var self = this; $(self.targetCls).unbind('click').bind('click',function(){ self.show(); }); // 关闭面板事件 self.blockBg.unbind('click').bind("click",function(){ self.hide(); }); // 点击上一页 下一页事件 self.datePane.delegate('a','click',function(){ if(!this.rel){return}; var _rel = this.rel; if(_rel == 'prev') { self._renderBody(self.yearList.val(),parseInt(self.monthList.val(),10) -1); return; }elseif(_rel == 'next') { self._renderBody(self.yearList.val(),parseInt(self.monthList.val(),10) +1); return; } }); // 选择日期事件 self.datePane.delegate('td','click',function(){ var _this = $(this); if(_this.hasClass('num') && !_this.hasClass('disabled')) { self.dateTable.find("td").removeClass("selected"); _this.addClass("selected"); var day = _this.attr("data-day"); self._selectDay(day); } }); // 显示年月选择 self.dateTxt.unbind('click').bind("click",function(){ self.dateTxt.hide(); self.dateSet.show(); }); //更改年月事件 self.yearList.unbind('change').bind("change",function(){ self._renderBody(self.yearList.val(),self.monthList.val()); }); self.monthList.unbind('change').bind("change",function(){ self._renderBody(self.yearList.val(),self.monthList.val()); }); }, /* * 选择某一天的时候 把值存入输入框里 且面板隐藏 * @_selectDay {private} */ _selectDay: function(d) { var self = this; var year, month; month = self.monthList.val(); day = d; var options = self.options; if(options.type == 'yyyy-mm-dd') { month="0" + self.monthList.val(); day= "0" + d; month=month.substr((month.length-2),month.length); day=day.substr((day.length-2),day.length); } self.targetCls.val(self.yearList.val()+options.separator+month+options.separator+day); self.hide(); self.callback && $.isFunction(self.callback) && self.callback(self.yearList.val()+options.separator+month+options.separator+day); returnthis; }, /* * 显示日历面板 * @method show {public} */ show: function(){ var self = this; if(self.flag) { return; } var doc_w = document.body.clientWidth, doc_h = document.body.clientHeight, pane_top = self.targetCls.offset().top, pane_left = self.targetCls.offset().left, obj_w = self.targetCls.outerWidth(), obj_h = self.targetCls.outerHeight(); pane_top= pane_top+obj_h; self.datePane.css({"top":pane_top,"left":pane_left}).show(); self.blockBg.css({width:doc_w,height:doc_h}).show(); self.flag = true; returnthis; }, /* * 清除日期 * @method clear {public} */ clear: function(){ var self = this; self.targetCls.val(''); self._renderBody(self.defYear,self.defMonth); self.hide(); returnthis; }, /* * 获取当前选中的日期 * @method getValue {public} * @return val */ getValue: function(){ var self = this; return self.targetCls.val(); }, /* * 隐藏日历面板 */ hide: function(){ var self = this; if(!self.flag) {return;} self.datePane.hide(); self.blockBg.hide(); self.dateSet.hide(); self.dateTxt.show(); self.flag = false; returnthis; } }); var defaults = { targetCls : '', //渲染日历的class beginyear : 1978, //开始年份 endyear : 2050, //结束年份 date : new Date(), // 默认日期 type : "yyyy-mm-dd", // 日期格式 separator : "-", // 日期链接符 wday : 0, // 周第一天 language : { year:"年", month:"月", monthList:["1","2","3","4","5","6","7","8","9","10","11","12"], weekList:["日","一","二","三","四","五","六"]} };

代码没有什么好解释的 相应的有注释，可以看看源码 不难的。

HTML代码可以这样写：