<!DOCTYPE html>
<html>
<head>
? <meta charset="utf-8">
? <title>layui時間組件周和季度切換渲染</title>
? <meta name="renderer" content="webkit">
? <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
? <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
? <link rel="stylesheet" href="layui/css/layui.css" media="all">
? <!-- 注意：如果你直接復(fù)制所有代碼到本地，上述css路徑需要改成你本地的 -->
</head>
<body>
? <div class="layui-form-item" style="margin-left: 10px">
? ? <div class="layui-inline layui-form">
? ? ? <label class="layui-inline" id="layDateBox" style="width:400px; height:30px">
? ? ? ? <input id="myDateBox" type="text" class="layui-input laydate-test" data-type="date" autocomplete="off">
? ? ? </label>
? ? ? <div class="layui-input-inline" style="width: 100px; height:30px">
? ? ? ? <select name="type" id="selectedOption" lay-filter="college">
? ? ? ? ? <option value="week" selected="selected">按周</option>
? ? ? ? ? <option value="quarter">按季度</option>
? ? ? ? </select>
? ? ? </div>
? ? </div>
? </div>
? <script src="layui/layui.js" charset="utf-8"></script>
? <script src="/js/jquery-2.1.4.min.js" charset="utf-8"></script>
? <script>
? ? $(document).ready(function () {
? ? ? layui.use(['form', 'upload', 'layer', 'laydate', 'jquery'], function () {
? ? ? ? let form = layui.form;
? ? ? ? let layer = layui.layer;
? ? ? ? let laydate = layui.laydate;
? ? ? ? laydate.render({
? ? ? ? ? elem: '#myDateBox',
? ? ? ? ? max: genTime('day'),
? ? ? ? ? value: genTime('day'),
? ? ? ? ? type: 'date'
? ? ? ? });
? ? ? ? form.on('select(college)', function (data) {
? ? ? ? ? let opt = $("#selectedOption").val();
? ? ? ? ? let ele = $("#selectedOption");
? ? ? ? ? $("#myDateBox").remove();
? ? ? ? ? $("#layDateBox").html('<input id="myDateBox" type="text" class="layui-input laydate-test" data-type="date" autocomplete="off">');
? ? ? ? ? // 周
? ? ? ? ? if (opt == "week") {
? ? ? ? ? ? renderWeekDate('#myDateBox', '');
? ? ? ? ? }// 季度
? ? ? ? ? else if (opt == "quarter") {
? ? ? ? ? ? renderSeasonDate('#myDateBox', '');
? ? ? ? ? }
? ? ? ? });
? ? ? ? // 周
? ? ? ? function renderWeekDate(ohd, sgl) {
? ? ? ? ? let ele = $(ohd);
? ? ? ? ? laydate.render({
? ? ? ? ? ? elem: ohd,
? ? ? ? ? ? type: 'date',
? ? ? ? ? ? max: genTime('day'),
? ? ? ? ? ? format: "yyyy-MM-dd~yyyy-MM-dd",
? ? ? ? ? ? btns: ['clear', 'confirm'],
? ? ? ? ? ? done: function (value, date, endDate) {
? ? ? ? ? ? ? if (value != "" && value.length > 0) {
? ? ? ? ? ? ? ? let today = new Date(value.substring(0, 10));
? ? ? ? ? ? ? ? let weekday = today.getDay();
? ? ? ? ? ? ? ? let monday;
? ? ? ? ? ? ? ? let sunday;
? ? ? ? ? ? ? ? if (weekday == 0) {
? ? ? ? ? ? ? ? ? monday = new Date(1000 * 60 * 60 * 24 * (weekday - 6) + today.getTime());
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? monday = new Date(1000 * 60 * 60 * 24 * (1 - weekday) + today.getTime());
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if (weekday == 0) {
? ? ? ? ? ? ? ? ? sunday = today;
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? sunday = new Date(1000 * 60 * 60 * 24 * (7 - weekday) + today.getTime());
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? let month = monday.getMonth() + 1;
? ? ? ? ? ? ? ? if (month < 10) {
? ? ? ? ? ? ? ? ? month = "0" + month;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? let day1 = monday.getDate();
? ? ? ? ? ? ? ? if (day1 < 10) {
? ? ? ? ? ? ? ? ? day1 = "0" + day1;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? let start = "" + monday.getFullYear() + "-" + month + "-" + day1;
? ? ? ? ? ? ? ? let month2 = sunday.getMonth() + 1;
? ? ? ? ? ? ? ? if (month2 < 10) {
? ? ? ? ? ? ? ? ? month2 = "0" + month2;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? let day2 = sunday.getDate();
? ? ? ? ? ? ? ? if (day2 < 10) {
? ? ? ? ? ? ? ? ? day2 = "0" + day2;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? let end = "" + sunday.getFullYear() + "-" + month2 + "-" + day2;
? ? ? ? ? ? ? ? ele.val(start + "~" + end);
? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ele.val('');
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? });
? ? ? ? }
? ? ? ? // 季度
? ? ? ? function renderSeasonDate(ohd, sgl) {
? ? ? ? ? let ele = $(ohd);
? ? ? ? ? laydate.render({
? ? ? ? ? ? elem: ohd,
? ? ? ? ? ? type: 'month',
? ? ? ? ? ? format: 'yyyy-M',
? ? ? ? ? ? btns: ['clear', 'confirm'],
? ? ? ? ? ? ready: function (value, date, endDate) {
? ? ? ? ? ? ? let hd = $("#layui-laydate" + ele.attr("lay-key"));
? ? ? ? ? ? ? if (hd.length > 0) {
? ? ? ? ? ? ? ? hd.click(function () {
? ? ? ? ? ? ? ? ? quarter($(this));
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? }
? ? ? ? ? ? ? quarter(hd);
? ? ? ? ? ? },
? ? ? ? ? ? done: function (value, date, endDate) {
? ? ? ? ? ? ? if (!isNull(date) && date.month > 0 && date.month < 5) {
? ? ? ? ? ? ? ? ele.attr("startDate", date.year + "-" + date.month);
? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ele.attr("startDate", "");
? ? ? ? ? ? ? }
? ? ? ? ? ? ? if (!isNull(endDate) && endDate.month > 0 && endDate.month < 5) {
? ? ? ? ? ? ? ? ele.attr("endDate", endDate.year + "-" + endDate.month)
? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ele.attr("endDate", "");
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? });
? ? ? ? }
? ? ? });
? ? ? function genTime(opt) {
? ? ? ? let now = new Date();
? ? ? ? let year = now.getFullYear();
? ? ? ? let mth = now.getMonth();
? ? ? ? let day = now.getDate();
? ? ? ? let month = mth + 1;
? ? ? ? if (month < 10) {
? ? ? ? ? month = '0' + month
? ? ? ? }
? ? ? ? if (day < 10) {
? ? ? ? ? day = '0' + day
? ? ? ? }
? ? ? ? let str;
? ? ? ? if (opt == 'day') {
? ? ? ? ? str = year + '-' + month + '-' + day;
? ? ? ? } else if (opt == 'month') {
? ? ? ? ? str = year + '-' + month;
? ? ? ? }
? ? ? ? return str;
? ? ? }
? ? ? function quarter(thiz) {
? ? ? ? let mls = thiz.find(".laydate-month-list");
? ? ? ? mls.each(function (i, e) {
? ? ? ? ? $(this).find("li").each(function (inx, ele) {
? ? ? ? ? ? let cx = ele.innerHTML;
? ? ? ? ? ? if (inx < 4) {
? ? ? ? ? ? ? ele.innerHTML = cx.replace(/月/g, "季度");
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ele.style.display = "none";
? ? ? ? ? ? }
? ? ? ? ? });
? ? ? ? });
? ? ? }
? ? ? function isNull(quarter) {
? ? ? ? if (quarter == null || typeof (quarter) == "undefined" || quarter == "") return true;
? ? ? ? return false;
? ? ? }
? ? ? /**
? ? ? ?* 日期轉(zhuǎn)為周 格式2020-07-14
? ? ? ?* @param {String} dateString 日期
? ? ? */
? ? ? function getYearWeek(dateString) {
? ? ? ? let da = dateString;//日期格式2015-12-30
? ? ? ? //當(dāng)前日期
? ? ? ? let date1 = new Date(da.substring(0, 4), parseInt(da.substring(5, 7)) - 1, da.substring(8, 10));
? ? ? ? //1月1號
? ? ? ? let date2 = new Date(da.substring(0, 4), 0, 1);
? ? ? ? //獲取1月1號星期（以周一為第一天，0周一~6周日）
? ? ? ? let dateWeekNum = date2.getDay() - 1;
? ? ? ? if (dateWeekNum < 0) { dateWeekNum = 6; }
? ? ? ? if (dateWeekNum < 4) {
? ? ? ? ? //前移日期
? ? ? ? ? date2.setDate(date2.getDate() - dateWeekNum);
? ? ? ? } else {
? ? ? ? ? //后移日期
? ? ? ? ? date2.setDate(date2.getDate() + 7 - dateWeekNum);
? ? ? ? }
? ? ? ? let d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000);
? ? ? ? if (d < 0) {
? ? ? ? ? let date3 = (date1.getFullYear() - 1) + "-12-31";
? ? ? ? ? return getYearWeek(date3);
? ? ? ? } else {
? ? ? ? ? //得到年數(shù)周數(shù)
? ? ? ? ? let year = date1.getFullYear();
? ? ? ? ? let week = Math.ceil((d + 1) / 7);
? ? ? ? ? return year + "-" + week;
? ? ? ? }
? ? ? }
? ? })
? </script>
</body>
</html>
