オリジナルjs日付プラグイン実装

ネット上には日付プラグインを実現する方法がたくさんありますが、プロジェクトの実用的な方法に比べて拡張されています.
html構造とその構成パラメータ
cssを導入してjsを導入すればいいのですが、興奮することは原生jsで書かれているので、レベルの面では小さくなります.もちろん、このプラグインはかっこいいわけではありませんが、確かに実用的です.

    
    
    






    TaoTaodate({
        dateId:"ipt", //input    id
        skin:"red",   //      
        interval:" - " //        
    })
    TaoTaodate({
        dateId:"ipt1",
        interval:" /\ "
    })

CSSコード
このcssはデフォルトのスタイルを処理する必要があります.デフォルトのスタイルはネット上の比較的簡単な標準のスタイル初期化コードを使用します.

body{
    font-family: 'PingFangSC-Regular', 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    /*font-family:"Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "    ", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;*/
}
html,body{
    background-repeat: no-repeat;
    -webkit-text-size-adjust:none;
}
.clearfix:after {
    content: "." ;
    display: block ;
    height: 0 ;
    clear: both ;
    visibility: hidden ;
}
a{
    text-decoration:none;
    outline: none;
}
li{
    list-style-type:none;
}
img{
    width: 100%;
    max-width: 100%;
    /*vertical-align: top;*/
    font-size:0.5rem;
}

html, body, h1, h2, h3, p, span, a, div, ol, ul, li, dl, dt, dd, table, tbody, tfoot, thead, tr, th, td, input, textarea, form, select {
    padding: 0;
    margin: 0;
    /*font-family: "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "    ", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;*/
    box-sizing:border-box;
}
h1, h2, h3 {
    font-size: 100%;
}
button{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    outline:none;
    border:1px solid #ccc;
}
input[type=button],input[type=submit]{
    -webkit-appearance:none;
    outline:none;
}
/**
      
 */
div.date_div_containers{
    width: auto;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}
table.date_table_tables{
    border: 1px solid #eeeeee;
    border-collapse: collapse;

}
table.date_table_tables thead th{
    width: 40px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #eee;
    background: #eee;
    color: #FFFFFF;
}
table.date_table_tables tbody td{
    width: 40px;
    height: 30px;
    color: #333333;
    line-height: 30px;
    text-align: center;
    border: 1px solid #eeeeee;
    background: #fff;
    cursor: pointer;

}
select.date_select_selts{
    width: 25%;
    height: 25px;
    border: 1px solid #eeeeee;
}

JavaScriptコード
これは比較的に人の心を奮い立たせたのではないでしょうか.注釈は詳しく書いてあるので、あまり言わないでください.

/**
 * Created by   on 2017/4/18.
 */
function TaoDate(obj) {
    var _this =this;
    //      
    this.bgColor=obj["skin"]?obj["skin"]:"#eee";
    this.interval=obj["interval"]?obj["interval"]:"-";
    //    ，       
   this.setDateDom(obj["dateId"]);
   //   select  
   this.sElect(obj["dateId"]);
   //      
    this.dateBox(obj["dateId"]);
    //      
    this.dateSkin(this.bgColor,obj["dateId"]);
    //     table    
    this.Tab(obj["dateId"]);
    //          
    this.inputOffset(obj["dateId"]);
    var myDiv =document.getElementById(obj["dateId"]+"_divId");
    var divArray =document.getElementsByClassName("date_div_containers");
    var ipt =document.getElementById(obj["dateId"]);
    ipt.setAttribute("readonly","readonly");
    //        ，       
    var iptVal =new Date();
    ipt.value=iptVal.getFullYear()+this.interval+(iptVal.getMonth()+1)+
        this.interval+iptVal.getDate();
    //============================    =================
    //     
    ipt.onfocus=function(){
        //         input       
        for(var i =0;i"+i+"";
    }
    return str;
}
/**
 *      ，  ！
 */
TaoDate.prototype.sElect=function(id){
    var sel= document.getElementById(id+"_divId").getElementsByClassName("date_select_selts");
    sel[0].innerHTML=this.forVal(1990,2099);
    sel[1].innerHTML=this.forVal(1,12);
    var date =new Date();
    sel[0].value=date.getFullYear();
    sel[1].value=date.getMonth()+1;
}
/**
 *   div id    
 * @param id
 */
TaoDate.prototype.dateBox=function(id){
    var div1 =document.getElementById(id+"_date_table_tables");
    for(var i =0;i<6;i++){
        var aTR = document.createElement("tr");
        div1.tBodies[0].appendChild(aTR);
        for(var j =0;j<7;j++){
            var aTd =document.createElement("td");
            div1.tBodies[0].rows[i].appendChild(aTd);
        }
    }
}
TaoDate.prototype.Tab=function(id){
    var tds = document.getElementById(id+"_date_table_tables")
        .getElementsByTagName("td");
    var date =new Date();
    //      ，           
    for(var j=0;j

まとめ:
プラグインの開発方法はたくさんありますが、実際にはプラグインにデフォルトのパラメータオブジェクトを書くべきです.入力オブジェクトのパラメータで上書きし、デフォルトのパラメータで、documentを単独で抽象化できるなど、抽象的な方法を多くする必要があります.getElementByIdメソッドは、その根本を追って、意図的にjqueryを真似したが、レベル的には小さいに違いない.