シンプルな Cal​​endar_jquery を作成するための JQuery カレンダー プラグイン

ページ開発では、ユーザーに日付の入力を要求する操作が頻繁に発生します。通常のアプローチは、ユーザーが入力できるテキスト ボックス (テキスト) を提供し、入力されたデータを検証し、それが日付型であるかどうかを検出するコードを記述することです。これはさらに面倒であると同時に、ユーザーにとって日付を入力するのがあまり不便であり、ユーザーエクスペリエンスに影響を与えます。 jQuery UI の datepicker (カレンダー) プラグインを使用すると、これらの問題は簡単に解決できます。このプラグインによって呼び出される は次のとおりです。

$(“.selector”).datepicker(オプション)

このうち、「.selector」は DOM 要素を表し、一般的にはテキスト ボックスを指します。このプラグインの機能は日付の選択を提供することであるため、テキスト ボックスにバインドされることが多く、選択された日付はテキストボックスに表示されるオプションを選択します。 先ほどのプラグインのオプションと同じオブジェクトです。そのパラメータに対応する値を変更することで、日付ピッカープラグインの機能を変更できます。 -in、オプションを選択するための共通パラメータは次のとおりです

1.changeMonth ブール値を設定します。true の場合、タイトルにドロップダウン選択ボックスが表示され、月を選択できます。デフォルト値は false です。 2.changeyear ブール値を設定します。true の場合、タイトルにドロップダウン選択ボックスが表示され、デフォルトは false です。

3. showButtonPanel ブール値を設定すると、日付の下に 2 つのボタンが表示されます。デフォルト値は false で、表示されません。
が表示されます。 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 ブール値を設定します。 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;}

3 番目のステップはプラグイン コードです

これでプラグインはほぼ完成しました。あとはプラグイン メソッド

 <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>