1.html
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.txzlLi {
margin-top: 20px;
height: 40px;
border: 1px solid #c6c6c6;
border-radius: 40px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
width: 690px;
font-size: 18px;
}
.txzlUl .txzlLi .txzlLiL {
height: 40px;
line-height: 40px;
padding-left: 40px;
width: 100px;
float: left;
}
.txzlUl .txzlLi .txzlLiR {
height: 40px;
width: 550px;
float: left;
}
.txzlUl .txzlLi .txzlLiR #txzlLiR_date {
width: 470px;
height: 38px;
line-height: 36px;
padding-right: 78px;
border: 0;
background-position: 478px center;
background-color: transparent;
cursor: pointer;
font-size: 18px;
margin-top: 2px;
}
</style>
</head>
<body>
<ul class="txzlUl">
<li class="txzlLi clearfix">
<div class="txzlLiL">
收货日期：
</div>
<div class="txzlLiR clearfix">
<div id="txzlLiR_date" class="inline laydate-icon"></div>
</div>
</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/laydatejs/laydate.js"></script>
<script type="text/javascript">
// 日历及地址
// http://www.bootstrapmb.com/item/2328
// http://www.bootstrapmb.com/item/2328/preview
//自定义日期格式
laydate.skin('molv');
laydate({
elem: '#txzlLiR_date',
format: 'YYYY-MM-DD',
festival: true, //显示节日
choose: function(datas) { //选择日期完毕的回调
console.log('得到：' + datas);
}
});
</script>
</body>
</html>2.效果
3.说明：
3.1可以去网盘下载：
链接：https://pan.baidu.com/s/1vViQbF6VTPCpETrWNVWJOA
提取码：1tzw
3.2网站地址：