【APICloud系列|27】 UICalendar模块（日历）的实现

  导读：UICalendar 是一个日历选择模块；可自界说日历的样式，添加特殊日期标注，切换月份，设置指定日期；用于实现常用的日期选择，日历展示功能
  模块地点

UICalendar 是一个日历选择模块；可自界说日历的样式，添加特殊日期标注，切换月份，设置指定日期；用于实现常用的日期选择，日历展示功能。

UICalendar模块demo分享，项目里新建个页面，把demo的代码放到此页面上，添加上UICalendar模块，编译自界说loader查察效果。 
项目布局：

config.xml

1.    日历    UICalendar 是一个日历选择模块；可自界说日历的样式，添加特殊日期标注，切换月份，设置指定日期；用于实现常用的日期选择，日历展示功能    Developer        [code]    [code]    [code]    [code]    [code]    [code]    [code]    [code]    [code]    [code]    [code]    [code]                                        [code]

复制代码

index.html

1.                                                                         日历                                                        html, body {                                height: 100%;                        }                        .wrap {                                display: -webkit-box;                                -webkit-box-orient: vertical;                                -webkit-flex-flow: column;                        }                        header {                                height: 44px;                                width: 100%;                                text-align: center;                                background-color: #81a9c3;                                color: #fff;                                line-height: 44px;                                font-size: 20px;                        }                        .flex-1 {                                -webkit-box-flex: 1;                                -webkit-flex: 1;                        }                        footer {                                height: 30px;                                width: 100%;                                background-color: #81a9c3;                                color: white;                                line-height: 30px;                                text-align: center;                        }                                                                        APICloud                                                                        Copyright ©                                       

复制代码

api.css

1. html{        font-family: sans-serif;}html,body,header,section,footer,div,ul,ol,li,img,a,span,em,del,legend,center,strong,var,fieldset,form,label,dl,dt,dd,cite,input,hr,time,mark,code,figcaption,figure,textarea,h1,h2,h3,h4,h5,h6,p{        margin:0;        border:0;        padding:0;        font-style:normal;}html,body {        -webkit-touch-callout:none;        -webkit-text-size-adjust:none;        -webkit-tap-highlight-color:rgba(0, 0, 0, 0);        -webkit-user-select:none;        background-color: #fff;}nav,article,aside,details,main,header,footer,section,fieldset,figcaption,figure{        display: block;}img,a,button,em,del,strong,var,label,cite,small,time,mark,code,textarea{        display:inline-block;}header,section,footer {        position:relative;}ol,ul{        list-style:none;}input,button,textarea {        border:0;        margin:0;        padding:0;        font-size:1em;        line-height:1em;        /*-webkit-appearance:none;*/        background-color:rgba(0, 0, 0, 0);}span{        display:inline-block;}a:active, a:hover {  outline: 0;}a, a:visited{        text-decoration:none;}label, .wordWrap{    word-wrap: break-word;    word-break: break-all;}table {  border-collapse: collapse;  border-spacing: 0;}td,th {  padding: 0;}.clearfix:after{        content: ' ';        display: block;        clear: both;        visibility:hidden;        line-height: 0;        height:0;}.loading_more{        display: block;        height: 1.5em;        width: 100%;}.loading_more:before {        display: inline-block; vertical-align: text-bottom;        content: ' '; height: 16px; width: 16px; margin-right: 6px;        background: url(../image/loading_more.gif) no-repeat center;        -webkit-background-size: contain;        background-size: contain;} .loading_more:after {        content: '加载更多';        }

复制代码

uicalendar.html

1.                                                                         日历                                                        html {                                background-color: white;                        }                        span {                                padding: 3px 3px;                                margin: 5px;                                display: inline-block;                                background-color: #e8e8e8;                        }                        .hover {                                opacity: .4;                        }                                                                        setSpecialDates()                        cancelSpecialDates()                        close()                        show()                        hide()                        nextMonth()                        prevMonth()                        nextYear()                        prevYear()                        setDate()                        turnPage()               
2.                        

复制代码

city.json

1. {"list":{  "first": [      {        "name": "山东省",        "id": "1",        "second": [{            "name": "济南市",            "id": "1",                    "third": [                      {                        "name": "历下区",                        "id": "1"                      },                      {                        "name": "章丘市",                        "id": "10"                      },                       {                        "name": "高新区",                        "id": "145"                       },                       {                        "name": "市中区",                        "id": "2"                       },                       {                        "name": "槐荫区",                        "id": "3"                       },                       {                        "name": "天桥区",                        "id": "4"                       },                       {                        "name": "历城区",                        "id": "5"                       },                       {                        "name": "长清区",                         "id": "6"                       },                       {                        "name": "平阴县",                        "id": "7"                       },                       {                        "name": "济阳县",                        "id": "8"                       },                       {                        "name": "商河县",                        "id": "9"                       }                      ]                  }]         },                          {            "name":"黑龙江省",            "id":"11",            "second": [{                "name": "哈尔滨市",                "id": "145",                        "third": [                          {                            "name": "道里区",                            "id": "464"                          },                          {                            "name": "道外区",                            "id": "465"                          },                          {                            "name": "南岗区",                            "id": "466"                              },                              {                                "name": "平房区",                                "id": "467"                              },                              {                                "name": "香坊区",                                "id": "468"                              },                              {                                "name": "松北区",                                "id": "469"                              },                              {                                "name": "动力区",                                "id": "470"                              },                              {                                "name": "开发区",                                "id": "471"                              },                              {                                "name": "依兰县",                                "id": "472"                              },                              {                                "name": "呼兰区",                                "id": "473"                              },                              {                                "name": "方正县",                                "id": "474"                              },                              {                                "name": "宾县",                                "id": "475"                              },                              {                                "name": "延寿县",                                "id": "476"                              },                              {                                "name": "巴彦县",                                "id": "477"                              },                              {                                "name": "阿城区",                                "id": "478"                              },                              {                                "name": "木兰县",                                "id": "479"                              },                              {                                "name": "双都会",                                "id": "480"                              },                              {                                "name": "通河县",                                "id": "481"                              },                              {                                "name": "尚志市",                                "id": "482"                              },                              {                                "name": "五常市",                                "id": "483"                              }                  ]}             ]}          ]}}

复制代码

api.js

1. /* *  * Copyright (c) 2021 https://blog.csdn.net/weixin_41937552 */(function(window){    var u = {};    var isAndroid = (/android/gi).test(navigator.appVersion);    var uzStorage = function(){        var ls = window.localStorage;        if(isAndroid){           ls = os.localStorage();        }        return ls;    };    function parseArguments(url, data, fnSuc, dataType) {        if (typeof(data) == 'function') {            dataType = fnSuc;            fnSuc = data;            data = undefined;        }        if (typeof(fnSuc) != 'function') {            dataType = fnSuc;            fnSuc = undefined;        }        return {            url: url,            data: data,            fnSuc: fnSuc,            dataType: dataType        };    }    u.trim = function(str){        if(String.prototype.trim){            return str == null ? "" : String.prototype.trim.call(str);        }else{            return str.replace(/(^\s*)|(\s*$)/g, "");        }    };    u.trimAll = function(str){        return str.replace(/\s*/g,'');    };    u.isElement = function(obj){        return !!(obj && obj.nodeType == 1);    };    u.isArray = function(obj){        if(Array.isArray){            return Array.isArray(obj);        }else{            return obj instanceof Array;        }    };    u.isEmptyObject = function(obj){        if(JSON.stringify(obj) === '{}'){            return true;        }        return false;    };    u.addEvt = function(el, name, fn, useCapture){        if(!u.isElement(el)){            console.warn('$api.addEvt Function need el param, el param must be DOM Element');            return;        }        useCapture = useCapture || false;        if(el.addEventListener) {            el.addEventListener(name, fn, useCapture);        }    };    u.rmEvt = function(el, name, fn, useCapture){        if(!u.isElement(el)){            console.warn('$api.rmEvt Function need el param, el param must be DOM Element');            return;        }        useCapture = useCapture || false;        if (el.removeEventListener) {            el.removeEventListener(name, fn, useCapture);        }    };    u.one = function(el, name, fn, useCapture){        if(!u.isElement(el)){            console.warn('$api.one Function need el param, el param must be DOM Element');            return;        }        useCapture = useCapture || false;        var that = this;        var cb = function(){            fn && fn();            that.rmEvt(el, name, cb, useCapture);        };        that.addEvt(el, name, cb, useCapture);    };    u.dom = function(el, selector){        if(arguments.length === 1 && typeof arguments[0] == 'string'){            if(document.querySelector){                return document.querySelector(arguments[0]);            }        }else if(arguments.length === 2){            if(el.querySelector){                return el.querySelector(selector);            }        }    };    u.domAll = function(el, selector){        if(arguments.length === 1 && typeof arguments[0] == 'string'){            if(document.querySelectorAll){                return document.querySelectorAll(arguments[0]);            }        }else if(arguments.length === 2){            if(el.querySelectorAll){                return el.querySelectorAll(selector);            }        }    };    u.byId = function(id){        return document.getElementById(id);    };    u.first = function(el, selector){        if(arguments.length === 1){            if(!u.isElement(el)){                console.warn('$api.first Function need el param, el param must be DOM Element');                return;            }            return el.children[0];        }        if(arguments.length === 2){            return this.dom(el, selector+':first-child');        }    };    u.last = function(el, selector){        if(arguments.length === 1){            if(!u.isElement(el)){                console.warn('$api.last Function need el param, el param must be DOM Element');                return;            }            var children = el.children;            return children[children.length - 1];        }        if(arguments.length === 2){            return this.dom(el, selector+':last-child');        }    };    u.eq = function(el, index){        return this.dom(el, ':nth-child('+ index +')');    };    u.not = function(el, selector){        return this.domAll(el, ':not('+ selector +')');    };    u.prev = function(el){        if(!u.isElement(el)){            console.warn('$api.prev Function need el param, el param must be DOM Element');            return;        }        var node = el.previousSibling;        if(node.nodeType && node.nodeType === 3){            node = node.previousSibling;            return node;        }    };    u.next = function(el){        if(!u.isElement(el)){            console.warn('$api.next Function need el param, el param must be DOM Element');            return;        }        var node = el.nextSibling;        if(node.nodeType && node.nodeType === 3){            node = node.nextSibling;            return node;        }    };    u.closest = function(el, selector){        if(!u.isElement(el)){            console.warn('$api.closest Function need el param, el param must be DOM Element');            return;        }        var doms, targetDom;        var isSame = function(doms, el){            var i = 0, len = doms.length;            for(i; i -1){            return true;        }else{            return false;        }    };    u.addCls = function(el, cls){        if(!u.isElement(el)){            console.warn('$api.addCls Function need el param, el param must be DOM Element');            return;        }        if('classList' in el){            el.classList.add(cls);        }else{            var preCls = el.className;            var newCls = preCls +' '+ cls;            el.className = newCls;        }        return el;    };    u.removeCls = function(el, cls){        if(!u.isElement(el)){            console.warn('$api.removeCls Function need el param, el param must be DOM Element');            return;        }        if('classList' in el){            el.classList.remove(cls);        }else{            var preCls = el.className;            var newCls = preCls.replace(cls, '');            el.className = newCls;        }        return el;    };    u.toggleCls = function(el, cls){        if(!u.isElement(el)){            console.warn('$api.toggleCls Function need el param, el param must be DOM Element');            return;        }       if('classList' in el){            el.classList.toggle(cls);        }else{            if(u.hasCls(el, cls)){                u.removeCls(el, cls);            }else{                u.addCls(el, cls);            }        }        return el;    };    u.val = function(el, val){        if(!u.isElement(el)){            console.warn('$api.val Function need el param, el param must be DOM Element');            return;        }        if(arguments.length === 1){            switch(el.tagName){                case 'SELECT':                    var value = el.options[el.selectedIndex].value;                    return value;                    break;                case 'INPUT':                    return el.value;                    break;                case 'TEXTAREA':                    return el.value;                    break;            }        }        if(arguments.length === 2){            switch(el.tagName){                case 'SELECT':                    el.options[el.selectedIndex].value = val;                    return el;                    break;                case 'INPUT':                    el.value = val;                    return el;                    break;                case 'TEXTAREA':                    el.value = val;                    return el;                    break;            }        }            };    u.prepend = function(el, html){        if(!u.isElement(el)){            console.warn('$api.prepend Function need el param, el param must be DOM Element');            return;        }        el.insertAdjacentHTML('afterbegin', html);        return el;    };    u.append = function(el, html){        if(!u.isElement(el)){            console.warn('$api.append Function need el param, el param must be DOM Element');            return;        }        el.insertAdjacentHTML('beforeend', html);        return el;    };    u.before = function(el, html){        if(!u.isElement(el)){            console.warn('$api.before Function need el param, el param must be DOM Element');            return;        }        el.insertAdjacentHTML('beforebegin', html);        return el;    };    u.after = function(el, html){        if(!u.isElement(el)){            console.warn('$api.after Function need el param, el param must be DOM Element');            return;        }        el.insertAdjacentHTML('afterend', html);        return el;    };    u.html = function(el, html){        if(!u.isElement(el)){            console.warn('$api.html Function need el param, el param must be DOM Element');            return;        }        if(arguments.length === 1){            return el.innerHTML;        }else if(arguments.length === 2){            el.innerHTML = html;            return el;        }    };    u.text = function(el, txt){        if(!u.isElement(el)){            console.warn('$api.text Function need el param, el param must be DOM Element');            return;        }        if(arguments.length === 1){            return el.textContent;        }else if(arguments.length === 2){            el.textContent = txt;            return el;        }    };    u.offset = function(el){        if(!u.isElement(el)){            console.warn('$api.offset Function need el param, el param must be DOM Element');            return;        }        var sl = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);        var st = Math.max(document.documentElement.scrollTop, document.body.scrollTop);        var rect = el.getBoundingClientRect();        return {            l: rect.left + sl,            t: rect.top + st,            w: el.offsetWidth,            h: el.offsetHeight        };    };    u.css = function(el, css){        if(!u.isElement(el)){            console.warn('$api.css Function need el param, el param must be DOM Element');            return;        }        if(typeof css == 'string' && css.indexOf(':') > 0){            el.style && (el.style.cssText += ';' + css);        }    };    u.cssVal = function(el, prop){        if(!u.isElement(el)){            console.warn('$api.cssVal Function need el param, el param must be DOM Element');            return;        }        if(arguments.length === 2){            var computedStyle = window.getComputedStyle(el, null);            return computedStyle.getPropertyValue(prop);        }    };    u.jsonToStr = function(json){        if(typeof json === 'object'){            return JSON && JSON.stringify(json);        }    };    u.strToJson = function(str){        if(typeof str === 'string'){            return JSON && JSON.parse(str);        }    };    u.setStorage = function(key, value){        if(arguments.length === 2){            var v = value;            if(typeof v == 'object'){                v = JSON.stringify(v);                v = 'obj-'+ v;            }else{                v = 'str-'+ v;            }            var ls = uzStorage();            if(ls){                ls.setItem(key, v);            }        }    };    u.getStorage = function(key){        var ls = uzStorage();        if(ls){            var v = ls.getItem(key);            if(!v){return;}            if(v.indexOf('obj-') === 0){                v = v.slice(4);                return JSON.parse(v);            }else if(v.indexOf('str-') === 0){                return v.slice(4);            }        }    };    u.rmStorage = function(key){        var ls = uzStorage();        if(ls && key){            ls.removeItem(key);        }    };    u.clearStorage = function(){        var ls = uzStorage();        if(ls){            ls.clear();        }    };    u.fixIos7Bar = function(el){        return u.fixStatusBar(el);    };    u.fixStatusBar = function(el){        if(!u.isElement(el)){            console.warn('$api.fixStatusBar Function need el param, el param must be DOM Element');            return 0;        }        el.style.paddingTop = api.safeArea.top + 'px';        return el.offsetHeight;    };    u.fixTabBar = function(el){        if(!u.isElement(el)){            console.warn('$api.fixTabBar Function need el param, el param must be DOM Element');            return 0;        }        el.style.paddingBottom = api.safeArea.bottom + 'px';        return el.offsetHeight;    };    u.toast = function(title, text, time){        var opts = {};        var show = function(opts, time){            api.showProgress(opts);            setTimeout(function(){                api.hideProgress();            },time);        };        if(arguments.length === 1){            var time = time || 500;            if(typeof title === 'number'){                time = title;            }else{                opts.title = title+'';            }            show(opts, time);        }else if(arguments.length === 2){            var time = time || 500;            var text = text;            if(typeof text === "number"){                var tmp = text;                time = tmp;                text = null;            }            if(title){                opts.title = title;            }            if(text){                opts.text = text;            }            show(opts, time);        }        if(title){            opts.title = title;        }        if(text){            opts.text = text;        }        time = time || 500;        show(opts, time);    };    u.post = function(/*url,data,fnSuc,dataType*/){        var argsToJson = parseArguments.apply(null, arguments);        var json = {};        var fnSuc = argsToJson.fnSuc;        argsToJson.url && (json.url = argsToJson.url);        argsToJson.data && (json.data = argsToJson.data);        if(argsToJson.dataType){            var type = argsToJson.dataType.toLowerCase();            if (type == 'text'||type == 'json') {                json.dataType = type;            }        }else{            json.dataType = 'json';        }        json.method = 'post';        api.ajax(json,            function(ret,err){                if (ret) {                    fnSuc && fnSuc(ret);                }            }        );    };    u.get = function(/*url,fnSuc,dataType*/){        var argsToJson = parseArguments.apply(null, arguments);        var json = {};        var fnSuc = argsToJson.fnSuc;        argsToJson.url && (json.url = argsToJson.url);        //argsToJson.data && (json.data = argsToJson.data);        if(argsToJson.dataType){            var type = argsToJson.dataType.toLowerCase();            if (type == 'text'||type == 'json') {                json.dataType = type;            }        }else{            json.dataType = 'text';        }        json.method = 'get';        api.ajax(json,            function(ret,err){                if (ret) {                    fnSuc && fnSuc(ret);                }            }        );    };/*end*/        window.$api = u;})(window);

复制代码

完整代码下载地点：https://download.csdn.net/download/weixin_41937552/13991075
                                    

                                                孙叫兽                                           

                                       

                CSDN认证博客专家                                        HTTPS                Node.js                JavaScript                            多年的开发经验，开发过APP,小步伐，网站及系统，以前从事java相关系统研发，现在从事保险，证券，金融相关的前端全栈开发工作，微信公众号：电商步伐员.QQ互换群：426360778
来源：https://blog.csdn.net/weixin_41937552/article/details/112004275
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！