js simple date control

<style>

.timediv dl dt span {
line-height: 2rem;
;
height: 2rem;
;
font-weight: bold;
display: inline-block;
letter-spacing: 2px;
}

.timediv dl dt em.left {
background: url(images/42.png) center center no-repeat;
}

.timediv dl dt em.right {
background: url(images/43.png) center center no-repeat;
}

.timediv dl dt em.canclick {
background: url(images/44.png) center center no-repeat;
}

.timediv dl dt em {
line-height: 2rem;
;
height: 2rem;
width: 2rem;
display: inline-block;
;
}

.timediv dl dt {
text-align: center;
}

.timediv dl dd {
width: calc(100% / 7);
float: left;
text-align: center;
padding: .5rem 0;
}

.timediv dl .day dd span {
position: absolute;
width: 80%;
height: 80%;
border-radius: 50%;
padding: 15%;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
}

.timediv dl .day dd.selected span {
background: #F8930D;
color: #fff;
}

.timediv dl .day dd {
padding: 0;
padding-top: calc(100% / 7);
font-size: .8rem;
font-weight: bold;
position: relative;

}

.timediv dl .week dd {
font-size: .5rem;
color: #B3B3B3;
}

</style>

let dateN = new Date();
let resety = dateN.getFullYear();
let resetm = dateN.getMonth() + 1;
let year = dateN.getFullYear();
let month = dateN.getMonth() + 1;
const getDateComp = function(y, m) {
let month = m < 10 ? '0' + m : m
$("#yyyymm").html(y + '/' + month);
let daycount = new Date(y, m, 0).getDate();
let empty = (new Date(y, m - 1, 1).getDay() - 1) >= 0 ? (new Date(y, m - 1, 1).getDay() - 1) : 6;
let html = '';
for (let i = 0; i < empty; i++) {
html += '<dd class="empty"><span></span></dd>';
}
for (let i = 1; i <= daycount; i++) {
html += '<dd class="canclick" id="_' + y + '_' + (m < 10 ? '0' + m : m) + '_' + (i < 10 ? '0' + i : i) + '"><span>' + (i < 10 ? '0' + i : i) +
'</span></dd>';
}
$("div.day").html(html)

if (resety <= year && resetm <= month) {
$("em.right").removeClass("canclick")
} else {
$("em.right").addClass("canclick")
}
}
getDateComp(year, month)

$("#prevM").click(function() {
month--;
year = month == 0 ? year - 1 : year;
month = month == 0 ? 12 : month;
getDateComp(year, month);
})
$("#nextM").click(function() {
if (!$(this).hasClass('canclick'))
return false;
month++;
year = month == 13 ? year + 1 : year;
month = month == 13 ? 1 : month;
getDateComp(year, month);
})

$("body").on('click', 'div.day dd', function() {
if (!$(this).hasClass('canclick'))
return false;
$(this).addClass("selected").siblings().removeClass("selected");
let s = $(this).attr('id');
let str = s.replace(/_/g, "-");
alert(str.substr(1, str.length))
})

</script>

js simple date control

Guess you like