技术思绪摘录旅行
控件提供了简单的实现,少量的api,主要还是以使用的时候自主扩展为主,也是因为业务需要对前端开发的一种尝试,欢迎大家留言交流。

少废话先看东西

image.png

开源是程序员的基本美德

html:
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>PC端日历</title>
    <link rel="stylesheet" type="text/css" href="jquery-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="pc.css" />
    <style></style>
</head>

<body>
<div id="calendar">
<div class="months">
<span class="monthbtn monthleft" onclick="monthleft()">《</span>
<span class="monthbox" data-dt=""></span>
<span class="monthbtn monthright" onclick="monthright()">》</span>
</div>
<div class="weeks">
<span>日</span>
<span>一</span>
<span>二</span>
<span>三</span>
<span>四</span>
<span>五</span>
<span>六</span>
</div>
<div class="days"></div>
</div>

    <div style="width:600px;margin:0 auto;">
        <button onclick="javascript:alert('内容如下:' + getseldata());">获取选中日期</button>
        <button onclick="javascript:alert('内容如下:' + setseldata());">存储选中日期</button>
        <button onclick="javascript:alert('内容如下:' + getdata());">获取存储的日期</button>
        <button onclick="javascript:alert('内容如下:' + clearsel());">清除当前选中</button>
        <button onclick="javascript:alert('内容如下:' + clearselall());">清空所有选中</button>
    </div>
    <script src="jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="jquery-ui.min.js" type="text/javascript"></script>
    <script src="pc.js" type="text/javascript"></script>
    <script>
        $(function () {
            initmonths();
            initdays();
            $("#calendar .days").selectable();
        });

    </script>
</body>

</html>

CSS:
* {
	padding: 0px;
	margin: 0px;
}
/*日历box*/
#calendar {
	width: 600px;
	color: #666;
	-moz-user-select: none;
 /*支持Firefox浏览器*/
	-webkit-user-select: none;
 /*支持Chrome,Opera,Safari等浏览器*/
	-ms-user-select: none;
 /*支持IE浏览器*/
	user-select: none;
	box-sizing: border-box;
}

#calendar .months .ui-disable {
	cursor: not-allowed !important;
	color: #cdcdcd;
	cursor: not-allowed !important;
}

#calendar .days .ui-disable,
#calendar .days .ui-disable * {
	cursor: not-allowed !important;
	color: #aaaaaa !important;
	cursor: not-allowed !important;
	background-color: #ffffff !important;
}
/*月份*/
#calendar .months {
	background: #fffbeb;
	text-align: center;
	display: flex;
	line-height: 45px;
	border: 1px solid #f1f1f1;
	box-sizing: border-box;
}

#calendar .months .monthbox {
	flex: 1;
}

#calendar .months .monthbtn {
	width: 60px;
	cursor: pointer;
}
/*星期*/
#calendar .weeks {
	border-left: 1px solid #f1f1f1;
	border-bottom: 1px solid #f1f1f1;
	display: flex;
	text-align: center;
	line-height: 25px;
	font-weight: 700;
	font-size: 14px;
}

#calendar .weeks span {
	border-right: 1px solid #f1f1f1;
	flex: 1;
	box-sizing: border-box;
}

#calendar .weeks span:last-child,
#calendar .weeks span:first-child {
	color: #17c3ac;
}
/*天*/
#calendar .days .ui-selecting {
	background: #feca40;
}

#calendar .days .ui-selected,#calendar .days .ui-selected * {
	background: #f39814;
	color: white;
}

#calendar .days span {
	float: left;
	width: 85.58px;
	min-height: 85.58px;
	border-left: 1px solid #f1f1f1;
	border-bottom: 1px solid #f1f1f1;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

#calendar .days span:nth-child(7n) {
	border-right: 1px solid #f1f1f1;
	width: 86.5px;
}

#calendar .days span small {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0px 5px;
	line-height: 1.7;
}

#calendar .days span .sm1 {
	font-size: 1.2em;
}

#calendar .days span .sm1 b {
	float: right;
	color: #ff0000;
	font-size: 14px;
}

#calendar .days span .sm2 {
	color: #FF6600;
	text-align: center;
}

#calendar .days span .sm3 {
	color: #0000FF;
	text-align: center;
}

#calendar .days .ui-selected .sm1 b,#calendar .days .ui-selected .sm2,#calendar .days .ui-selected .sm3 {
	color: #fff;
}

Js:
var calendarDict = {}; //存储日历价格数据
var tokenkey = "PriceData"; //本地存储key
//设置月份
var setmonths = function(year, month) {
    $("#calendar  .monthbox").html(year + "年" + month + "月");
    $("#calendar  .monthbox").attr("data-dt", year + "-" + month + "-01");
};
//初始化月份
var initmonths = function() {
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    if (month < 10) {
        month = "0" + month;
    }
    setmonths(year, month);
};
//上一月
var monthleft = function() {
    var datesel = new Date($("#calendar .monthbox").attr("data-dt"));
    var year = datesel.getFullYear();
    var month = datesel.getMonth();
    var datenow = new Date();
    var oDate1 = new Date(datenow.getFullYear() + "-" + (datenow.getMonth() + 1) + "-01");
    var oDate2 = new Date(datesel);
    if (oDate1.getTime() >= oDate2.getTime()) {
        return;
    }
    if (month < 1) {
        month = "12";
        year = year - 1;
    }
    if (month < 10) {
        month = "0" + month;
    }
    setseldata();
    setmonths(year, month);
    initdays();
}
//下一月
var monthright = function() {
    var datesel = new Date($("#calendar .monthbox").attr("data-dt"));
    var year = datesel.getFullYear();
    var month = datesel.getMonth() + 2;
    if (month > 12) {
        month = 1;
        year = year + 1;
    }
    if (month < 10) {
        month = "0" + month;
    }
    setseldata();
    setmonths(year, month);
    initdays();
}
//初始化天数
var initdays = function() {
    var datesel = new Date($("#calendar .monthbox").attr("data-dt"));
    var date = new Date(datesel);
    var year = date.getFullYear();
    var month = date.getMonth();
    var minday = new Date(year, month, 01); //取当年当月中的第一天
    var maxday = new Date(new Date(year, month + 1, 01).getTime() - 1000 * 60 * 60 * 24).getDate(); //获取当月最后一天日期
    var minweek = minday.getDay();
    var maxweek = new Date(year, month, maxday).getDay();
    $("#calendar  .days").html("");
    var html = "";
    for (var i = 0; i < minweek; i++) {
        html += '<span class="ui-disable" data-dt=""></span>';
    }
    //获取存储数据
    var priceinfo = JSON.parse(localStorage.getItem(tokenkey));
    for (var i = 1; i <= maxday; i++) {
        var itemdt = year + "-" + (month + 1 < 10 ? "0" + (month + 1) : month + 1) + "-" + (i < 10 ? "0" + i: i);
        var datenow = new Date();
        var oDate1 = new Date(datenow.getFullYear() + "-" + (datenow.getMonth() + 1) + "-" + datenow.getDate());
        var oDate2 = new Date(itemdt);
        var dis = "";
        var selclass = "";
        //TODO 内容待定
        if (oDate1.getTime() > oDate2.getTime()) {
            dis = "ui-disable";
        }
        if (priceinfo != undefined && dis == "" && priceinfo[itemdt] != null && priceinfo[itemdt] != undefined) {
            selclass = "ui-selectee ui-selected";
        }
        html += '<span class="' + dis + "   " + selclass + '" data-dt="' + itemdt + '">';
        html += '<small class="sm1">' + i + "<b>增</b></small>";
        html += '<small class="sm2">B:¥556.00</small>';
        html += '<small class="sm3">库存:20</small>';
        html += " </span>";
    }
    for (var i = 0; i < 6 - maxweek; i++) {
        html += '<span class="ui-disable" data-dt=""></span>';
    }
    $("#calendar  .days").append(html);
};
//存储当月选中
var setseldata = function() {
    var priceinfo = JSON.parse(localStorage.getItem(tokenkey));
    if (priceinfo == null) {
        priceinfo = {};
    }
    var datesel = new Date($("#calendar .monthbox").attr("data-dt"));
    var date = new Date(datesel);
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var maxday = new Date(new Date(year, month, 01).getTime() - 1000 * 60 * 60 * 24).getDate(); //获取当月最后一天日期
    for (var i = 1; i <= maxday; i++) {
        var day = i;
        if (month < 10) {
            month = "0" + month;
        }
        if (day < 10) {
            day = "0" + day;
        }
        var key = year + "-" + month + "-" + day;
        delete(priceinfo[key]);
    }
    //先获取当前月选中的
    $("#calendar .days span.ui-selected:not(.ui-disable)").each(function(i, item) {
        //TODO 内容待定
        priceinfo[$(item).attr("data-dt")] = {
            'kid': 11,
            'name': 22,
            'user': 33,
        };
    });
    localStorage.setItem(tokenkey, JSON.stringify(priceinfo));
    return true;
}
//获取存储内容
var getdata = function() {
    //TODO 内容待定 可能会进行转换返回需要个格式
    return localStorage.getItem(tokenkey);
}
//获取当前选中
var getseldata = function() {
    var info = [];
    $("#calendar .days span.ui-selected:not(.ui-disable)").each(function(i, item) {
        info.push($(item).attr("data-dt"));
    });
    //TODO 内容待定 可能会进行转换返回需要个格式
    return JSON.stringify(info);
}
//清除当前选中
var clearsel = function() {
    $("#calendar .days span").each(function(i, item) {
        $(item).removeClass("ui-selectee");
        $(item).removeClass("ui-selected");
        $(item).find("small").removeClass("ui-selectee");
        $(item).find("small").removeClass("ui-selected");
    });
    return true;
}
//清除所有选中
var clearselall = function() {
    localStorage.clear(tokenkey);
    clearsel();
    return true;
}

Demo.rar


CarsonIT 微信扫码关注公众号 策略、创意、技术

留下您的脚步

 

最近评论

查看更多>>

精选推荐

阅读排行

友情打赏

请打开您的微信,扫一扫