jquery-weui calendar日歷的使用缠捌、樣式的修改
參考官方文檔
下面附上代碼锄贷，以供參考
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>圖片上傳</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="assets/css/jquery-weui.css">
<link rel="stylesheet" href="assets/css/weui.css">
<style>
/* 日歷圖標(biāo)顏色修改、替換 */
i.icon.icon-prev{
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxnIGlkPSJzdmdfMSI+CiAgIDxwYXRoIGlkPSJzdmdfMiIgZD0ibTE0LDEuNmwwLDExLjhsLTExLjgsLTUuOGwxMS44LC02bTEsLTEuNmwtMTUsNy42bDE1LDcuNGwwLC0xNWwwLDB6IiBmaWxsPSIjNDQ4YWZmIi8+CiAgPC9nPgogPC9nPgo8L3N2Zz4=);
}
i.icon.icon-next {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxnIGlkPSJzdmdfMSI+CiAgIDxwYXRoIGlkPSJzdmdfMiIgZD0ibTEsMS42bDExLjgsNS44bC0xMS44LDZsMCwtMTEuOG0tMSwtMS42bDAsMTVsMTUsLTcuNmwtMTUsLTcuNGwwLDB6IiBmaWxsPSIjNDQ4YWZmIi8+CiAgPC9nPgogPC9nPgo8L3N2Zz4=);
}
/*calendar主題顏色修改*/
.picker-calendar-day.picker-calendar-day-selected span {
background: #4c97ff;
color: #fff;
}
</style>
</head>
<body>
<div class="g-container">
<div class="weui-cells weui-cells_form weui-cells-custom">
<div class="weui-cell">
<div class="weui-cell__hd"><label for="" class="weui-label">申請日期</label></div>
<div class="weui-cell__bd"><input class="weui-input" type="text" id="date" data-toggle='date' placeholder="請選擇日期"/></div>
</div>
</div>
</div>
<script src="assets/js/jquery-2.1.4.js"></script>
<script src="assets/js/jquery-weui.js"></script>
<script>
$("#date").calendar();
</script>
</body>
</html>
原來樣式：
615F19D6-080C-46b8-B1B1-B542E07AC591.png
修改日歷背景顏色很簡單曼月， F12打開控制臺谊却，找到目標(biāo)元素審查設(shè)置顏色的類即可。修改日歷的主題不僅要修改背景色哑芹，還要修改前后切換的按鈕炎辨。F12審查發(fā)現(xiàn)，這個圖標(biāo)用的是背景圖聪姿，不能通過修改css顏色的方式直接覆蓋碴萧，那只能換目標(biāo)圖片的顏色了乙嘀。怎么換呢？再設(shè)計一張不同顏色的圖片嗎破喻？當(dāng)然不用虎谢。我們可以直接用原來的圖片，在此基礎(chǔ)上重新設(shè)計顏色曹质，替換上即可婴噩。下面我來講具體步驟：。
i.icon.icon-prev {
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%…L14%2C1.6%20M15%2C0L0%2C7.6L15%2C15V0L15%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
}
上面是從控制臺拷過來的代碼羽德，可以看出圖片是base64編碼几莽。怎么做呢？選中url里的內(nèi)容 右鍵點擊open in newTab,然后另存為宅静，保存下來章蚣。接著打開svg在線編輯器https://c.runoob.com/more/svgeditor/
，如下圖：
svg在線編輯器.png
然后打開之前保存的svg圖片坏为，點擊放大鏡放大圖片究驴，選中圖片
5360C9FD-2605-4718-AFE7-85935868CE5D.png
點擊拾色器修改顏色，確定匀伏，然后ctr+s保存到某一位置洒忧。
268E265F-E980-42eb-BBBC-B5D46A94A1EA.png
修改后的svg圖片：
D597FB53-1E7E-4d18-A911-CC579944BD21.png
接下來，再打開另一個神器：圖片轉(zhuǎn)換Base64：http://imgbase64.duoshitong.com/
打開剛才修改后的svg圖片：
3F8B0224-EE72-45f8-98F3-ABDFA7C9D4C4.png
會顯示該圖片的base64編碼够颠，復(fù)制這個編碼替換掉默認(rèn)的base64即可熙侍。
i.icon.icon-prev{
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxnIGlkPSJzdmdfMSI+CiAgIDxwYXRoIGlkPSJzdmdfMiIgZD0ibTE0LDEuNmwwLDExLjhsLTExLjgsLTUuOGwxMS44LC02bTEsLTEuNmwtMTUsNy42bDE1LDcuNGwwLC0xNWwwLDB6IiBmaWxsPSIjNDQ4YWZmIi8+CiAgPC9nPgogPC9nPgo8L3N2Zz4=);
}
刷新頁面，就會看到如下效果：
最終修改后的樣式：
66BE3EC7-5552-4bf1-8F86-E028B3BE3D5F.png
最后大功告成履磨。其實這里主要是兩大神器的使用蛉抓，之前不知道可以修改背景圖片的base64編碼，覺得修改圖片顏色無從下手剃诅，經(jīng)過同事的指導(dǎo)才知道巷送，特此記錄下來希望能給新手有效的借鑒。
