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>
/* 日历图标颜色修改、替换 */
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打开控制台，找到目标元素审查设置颜色的类即可。修改日历的主题不仅要修改背景色，还要修改前后切换的按钮。F12审查发现，这个图标用的是背景图，不能通过修改css颜色的方式直接覆盖，那只能换目标图片的颜色了。怎么换呢？再设计一张不同颜色的图片吗？当然不用。我们可以直接用原来的图片，在此基础上重新设计颜色，替换上即可。下面我来讲具体步骤：。
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里的内容 右键点击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
接下来，再打开另一个神器：图片转换Base64：http://imgbase64.duoshitong.com/
打开刚才修改后的svg图片：
3F8B0224-EE72-45f8-98F3-ABDFA7C9D4C4.png
会显示该图片的base64编码，复制这个编码替换掉默认的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编码，觉得修改图片颜色无从下手，经过同事的指导才知道，特此记录下来希望能给新手有效的借鉴。
