간단한 Calendar_jquery를 생성하는 Jquery 달력 플러그인-JS 튜토리얼-php.cn

페이지 개발 중에 사용자가 날짜를 입력해야 하는 작업을 자주 접하게 됩니다. 일반적인 접근 방식은 사용자가 입력할 텍스트 상자(텍스트)를 제공한 다음, 입력된 데이터를 확인하고 날짜 유형인지 감지하는 코드를 작성하는 것입니다. 이는 더욱 번거롭고 동시에 사용자가 날짜를 입력하는 것이 그리 편리하지 않아 사용자 경험에 영향을 미칩니다. jQuery UI에서 datepicker(캘린더) 플러그인을 사용하면 이러한 문제를 쉽게 해결할 수 있습니다. 이 플러그인이 호출하는 구문 형식

$(“.selector”).datepicker(옵션)

그 중 ".selector"는 DOM 요소를 나타내며 일반적으로 텍스트 상자를 나타냅니다. 이 플러그인의 기능은 날짜 선택을 제공하는 것이므로 텍스트 상자에 바인딩되는 경우가 많습니다. 텍스트 상자에 표시되는 옵션 선택 이전 플러그인의 옵션과 동일한 객체입니다. 해당 매개변수에 해당하는 값을 변경하면 플러그인 기능을 변경할 수 있습니다. -in, 옵션 선택을 위한 공통 파라미터는 다음과 같습니다

1.changeMonth 부울 값을 설정합니다. true인 경우 제목에 드롭다운 선택 상자가 나타나며 기본값은 false입니다. 2.changeYear 부울 값을 설정합니다. true인 경우 제목에 드롭다운 선택 상자가 나타나며 기본값은 false입니다.

3. showButtonPanel 부울 값을 설정합니다. true인 경우 두 개의 버튼이 있는 패널이 표시됩니다. 하나는 "오늘"이고 다른 하나는 "닫기"입니다.
표시됩니다. 4. closeText 닫기 버튼에 대한 텍스트 정보를 설정합니다. 이 설정의 전제는 showButtonPanel의 값이 true여야 한다는 것입니다. 그렇지 않으면 효과가 표시되지 않습니다
5. dateFormat 텍스트 상자(텍스트)에 표시되는 날짜 형식을 설정합니다. 이는 {dateFormat,'yy-mm-dd'}로 설정할 수 있습니다. 이는 날짜 형식이 2012-10과 같이 연월일임을 의미합니다. -1
6. defaultDate 기본 날짜 값을 설정합니다(예: {defaultDate 7}). 이는 날짜 선택 창이 팝업된 후 기본 날짜가 현재 날짜에 7일을 더한 값임을 의미합니다
7. showAnim 날짜 선택창을 팝업으로 표시할지, 숨길지 설정합니다. 설정할 수 있는 방법에는 "show", "sildeDown", "fadeln" 및 후자의 ""가 있는데, 이는 날짜 선택 창을 팝업할 방법이 없음을 의미합니다
8. showWeek Boolean 값을 설정하면 true일 경우 각 요일에 해당하는 주를 표시할 수 있습니다. 기본값은 false입니다. 9. yearRange 연도 범위를 설정합니다

최근 js 플러그인 개발에 대해 공부하고 있는데, 예전에는 고수님들이 플러그인만 골라서 아무렇게나 가지고 노는 걸 봤는데, 그 수준까지 가면 정말 좋겠다는 생각이 들었어요. 그래서 혼자서 플러그인 개발을 공부하기 시작했어요. 한동안 공부한 후 첫 번째 캘린더 플러그인을 작성하기 시작했습니다. 플러그인 개발의 초보자이기 때문에 코드의 가독성이 다소 떨어질 수 있습니다. 이 플러그인을 더욱 완성도 있게 만들려면 앞으로 코드를 작성하세요.

코드는 아래와 같습니다.

먼저 플러그인에 전체 div 컨테이너를 제공합니다.

저는 컨테이너에 클래스 또는 ID 이름을 지정할 때 고유한 접두사를 추가하는 데 익숙합니다. 이는 내 코드를 식별하고 다른 동료와의 스타일 충돌을 피하는 데 도움이 됩니다.

<div class="y-total"></div>

로그인 후 복사

스타일 작성을 시작하면 필요에 따라 스타일을 조정할 수 있습니다.

 .y-total{height:auto;border:px solid #;}
  .y-total .return-btn{height:px;}
  .y-total .return-btn>div{border-right: px solid #;border-bottom: px solid #;color: #;font-family: "Microsoft Yahei",PMingLiU,Verdana,Arial,Helvetica,sans-serif}
  .y-total .return-btn>div:nth-child(){border-right:px;}
  .y-total .prev-btn{cursor: pointer;width:%;float: left;text-align: center;}
  .y-total .time{cursor: pointer;float:left;width:%;text-align: center;}
  .y-total .next-btn{cursor: pointer;float:right;width:%;text-align: center;}
  .y-total .y-stop{position: absolute;margin-left: px;background-color: red;color: #fff;}
  .y-total #datatab{clear:both;width:%;}
  .y-total #datatab td {height:px;font-family: "Microsoft Yahei",PMingLiU,Verdana,Arial,Helvetica,sans-serif;color: #;border: px solid #DDD;font-size: px;text-align: center;}

로그인 후 복사

세 번째 단계는 플러그인 코드입니다

이제 플러그인이 거의 완성되었습니다. 이제 플러그인 메소드만 호출하면 됩니다

 <script>
  (function($){
   var Beautifier = function(vals,options){
    this.vals = vals;
    this.defaults = {
    "width":"px"
    }
    this.p = $.extend({},this.defaults,options); 
    this.$div = $("<div class='return-btn'></div>");
   this.prev = $("<div class='prev-btn'>前一页</div>");
   this.time = $("<div class='time'></div>");
   this.next = $("<div class='next-btn'>后一页</div>");
   this.tab = $("<table id='datatab'><tr></tr></table>");
   }
 
   Beautifier.prototype = {
   getDate : function(){
    var vals = this.vals;
    var t = this.time.attr("class");
    var tab = this.tab.attr("id");
    this.$div.append(this.prev,this.time,this.next);
    $(this.p.$this).append(this.$div,this.tab).width(this.p.width);
    var i = getInfo(vals);
    $("."+t).text(vals.year+"-" + i[]+"-" + i[]);
    $(".prev-btn,.next-btn").click(function(){returnAction($(this),t,vals,tab)}); 
    setDateInfo(tab);
    init(vals,tab);
   }
   }
   /*加载时将日期放入td中*/
   function init(vals,tab){
    var w = new Date(vals.year+","+vals.month+","+).getDay()//获取本月第一天是星期几
    var l =(w==&#63;:w-) + new Date(vals.year,vals.month,).getDate();//需要铺上td的个数
    var t = Math.ceil(l/);
    for(var i=; i<t; i++){
    $("#"+tab).append("<tr class='y-tr'></tr>");
    }
    $(".y-tr").each(function(){
    for(var i=; i<; i++){
     $(this).append("<td></td>");
    }
    })
    setvalue(vals,new Date(vals.year,vals.month,).getDate(),w);
   }
   function setvalue(val,l,w){
    for(var i=;i<l+;i++){
    var space = w==&#63;i+-+:i+w-+;
    $("td").eq(space).text(i);
    if(i == val.day){
     $("td").eq(space).css("color","red"); 
    }
    }
   }
   function getInfo(vals){
    var info = [];
    info.push(vals.month > &#63; vals.month : "" + vals.month);
    info.push(vals.day > &#63; vals.day : "" + vals.day);
    return info;
   }
 
   function setDateInfo(tab){
   var m = ["","一","二","三","四","五","六","日"];
   for(var i=; i<; i++){
    $("#"+tab).find("tr:eq()").append("<td>星期"+m[i]+"</td>");
   }
   }
   /*上一页，下一页的点击事件*/
   function returnAction($this,t,val,tab){
    if($this.attr("class") == "prev-btn"){
     if(val.month < ){
     val.month =;
     val.year-=;
     }else{
     val.month-=;
     }
    }else if($this.attr("class") == "next-btn"){
     if(val.month > ){
     val.month =;
     val.year+=;
     }else{
     val.month+=;
     }
    } 
    var v = getInfo(val);
    $("."+t).text(val.year+"-"+v[]+"-"+v[]);
    $(".y-tr").remove();
    init(val,tab);
   } 
 
   $.fn.work = function(options){
   var t = new Date();
   var DateVal = {
    "year" : t.getFullYear(),
    "month" : t.getMonth()+,
    "day" : t.getDate()
   }
   var objs = new Beautifier(DateVal,options); 
   objs.getDate();
   }
  })(jQuery)
 </script>

로그인 후 복사

효과는 아래와 같습니다.

 <script>
  $(".y-total").work({
  "$this" : ".y-total",
  "width" : "px",//控制容器的宽度
  });
 </script>

로그인 후 복사