js原生完成日历选择器
2024-01-10 10:32:28
html:
<div class="ivu-date-picker">
<div class="ivu-date-picker-rel">
<div class="ivu-input-wrapper ivu-input-wrapper-default ivu-input-type-text ivu-date-picker-editor">
<span class="ivu-input-suffix">
<i id="input_icon" class="ivu-icon ivu-icon-ios-close-circle"></i>
<!-- <i class="ivu-icon ivu-icon-ios-close-circle"></i> -->
</span>
<i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
<input autocomplete="off" spellcheck="false" type="text" placeholder="请选择日期" class="ivu-input ivu-input-default ivu-input-with-suffix">
</div>
</div>
<div class="ivu-select-dropdown" style="">
<div>
<div class="ivu-picker-panel-body-wrapper" steps="">
<div class="ivu-picker-panel-body">
<div class="ivu-date-picker-header">
<span id="year_prev" class="ivu-picker-panel-icon-btn ivu-date-picker-prev-btn ivu-date-picker-prev-btn-arrow-double"><i class="ivu-icon ivu-icon-ios-arrow-back"></i>
</span>
<span id="month_prev" class="ivu-picker-panel-icon-btn ivu-date-picker-prev-btn ivu-date-picker-prev-btn-arrow"><i class="ivu-icon ivu-icon-ios-arrow-back"></i></span>
<span>
<span class="ivu-date-picker-header-label" id="date_year">2024年</span>
<span class="ivu-date-picker-header-label" id="date_month">01月</span></span>
<span id="year_next" class="ivu-picker-panel-icon-btn ivu-date-picker-next-btn ivu-date-picker-next-btn-arrow-double"><i class="ivu-icon ivu-icon-ios-arrow-forward"></i>
</span>
<span id="month_next" class="ivu-picker-panel-icon-btn ivu-date-picker-next-btn ivu-date-picker-next-btn-arrow"><i class="ivu-icon ivu-icon-ios-arrow-forward"></i>
</span>
</div>
<div class="ivu-picker-panel-content">
<div class="ivu-date-picker-cells">
<div class="ivu-date-picker-cells-header">
<span>
日
</span><span>
一
</span><span>
二
</span><span>
三
</span><span>
四
</span><span>
五
</span><span>
六
</span>
</div>
<div id="Calendar_body" class="date_picket_body"><span class="ivu-date-picker-cells-cell"><em> 01 </em></span> <span class="ivu-date-picker-cells-cell"><em> 02 </em></span> <span class="ivu-date-picker-cells-cell"><em> 03 </em></span> <span class="ivu-date-picker-cells-cell"><em> 04 </em></span> <span class="ivu-date-picker-cells-cell"><em> 05 </em></span> <span class="ivu-date-picker-cells-cell"><em> 06 </em></span> <span class="ivu-date-picker-cells-cell"><em> 07 </em></span> <span class="ivu-date-picker-cells-cell"><em> 08 </em></span> <span class="ivu-date-picker-cells-cell"><em> 09 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-today ivu-date-picker-cells-focused"><em> 10 </em></span> <span class="ivu-date-picker-cells-cell"><em> 11 </em></span> <span class="ivu-date-picker-cells-cell"><em> 12 </em></span> <span class="ivu-date-picker-cells-cell"><em> 13 </em></span> <span class="ivu-date-picker-cells-cell"><em> 14 </em></span> <span class="ivu-date-picker-cells-cell"><em> 15 </em></span> <span class="ivu-date-picker-cells-cell"><em> 16 </em></span> <span class="ivu-date-picker-cells-cell"><em> 17 </em></span> <span class="ivu-date-picker-cells-cell"><em> 18 </em></span> <span class="ivu-date-picker-cells-cell"><em> 19 </em></span> <span class="ivu-date-picker-cells-cell"><em> 20 </em></span> <span class="ivu-date-picker-cells-cell"><em> 21 </em></span> <span class="ivu-date-picker-cells-cell"><em> 22 </em></span> <span class="ivu-date-picker-cells-cell"><em> 23 </em></span> <span class="ivu-date-picker-cells-cell"><em> 24 </em></span> <span class="ivu-date-picker-cells-cell"><em> 25 </em></span> <span class="ivu-date-picker-cells-cell"><em> 26 </em></span> <span class="ivu-date-picker-cells-cell"><em> 27 </em></span> <span class="ivu-date-picker-cells-cell"><em> 28 </em></span> <span class="ivu-date-picker-cells-cell"><em> 29 </em></span> <span class="ivu-date-picker-cells-cell"><em> 30 </em></span> <span class="ivu-date-picker-cells-cell"><em> 31 </em></span> <span class="ivu-date-picker-cells-cell"><em> 01 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 02 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 03 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 04 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 05 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 06 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 07 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 08 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 09 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 10 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 11 </em></span> </div>
</div>
</div>
<div class="ivu-picker-panel-content" style="display: none;">
</div>
</div>
</div>
</div>
</div>
</div>js:
var $timestampToTime = (timestamp, mm) => {
var weeks = ["日", "一", "二", "三", "四", "五", "六"],
time = timestamp.toString().length == 10 ? timestamp * 1000 : timestamp, //时间戳为10位需*1000，时间戳为13位的话不需乘1000
date = new Date(time),
Y = date.getFullYear(),
M =
date.getMonth() + 1 < 10 ?
"0" + (date.getMonth() + 1) :
date.getMonth() + 1,
D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(),
W = date.getDay(),
H = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
I = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
S = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return {
Y,
M,
D,
H,
I,
W: weeks[W],
H_I: H + ":" + I,
Y_M_D: Y + "-" + M + "-" + D,
Y_M_D_H_I: Y + "-" + M + "-" + D + " " + H + ":" + I,
Y_M_D_H_I_S: Y + "-" + M + "-" + D + " " + H + ":" + I + ":" + S,
sort: mm
};
}
class DatePicker {
constructor({
datePicker,
input,
panel
}) {
this.currentDate = $timestampToTime(Date.now());
this.m_arr = this.getMArr(this.currentDate.Y_M_D)
this.init(this.currentDate.Y_M_D)
this.bindingThing({
datePicker,
panel,
input
}) //绑定事件
}
//点击当前某天
changeDay(d) {
if (d.Y_M_D == this.selectDate.Y_M_D) {
this.selectDate = {};
this.parentChangeDay(null)
} else {
this.selectDate = this.selectDate;
this.parentChangeDay(JSON.parse(JSON.stringify(d)))
}
this.isCurrentW()
}
//上月下月
changeMonth(Y_M_D, n) {
this.m_arr = this.getMArr(Y_M_D, n)
this.init(Y_M_D)
}
//获取月份 7*6表格
getMArr(YYYYMMDD, n = 0) {
let date = this.countLastMonth(YYYYMMDD.slice(0, 7), n);
this.days_num = this.getCountDays(date)
var firstDay_date = new Date(date)
var firstDayWeekDay = firstDay_date.getDay()
if (firstDayWeekDay === 0) { //周日
firstDayWeekDay = 7;
}
var prevDays = firstDayWeekDay - 1
firstDay_date.setDate(firstDay_date.getDate() + 1 - firstDayWeekDay);
firstDay_date = firstDay_date.toISOString().split('T')[0];
let start_month_time = Date.parse(firstDay_date);
var sum_num = 6 * 7;
// var nums = this.getCountDays(date);
// let start_month_time = Date.parse(date);
let arr = [];
let date_time = 24 * 60 * 60 * 1000;
//根据当前月的1号的周往前推周一
for (let i = 0; i < sum_num; i++) {
var sort = i - prevDays;
arr.push($timestampToTime(start_month_time + date_time * i, sort));
}
return arr;
}
// 计算每个月 有几天
getCountDays(date) {
let curDate = new Date(date);
curDate.setDate(32);
return 32 - curDate.getDate(); // 返回当前月份的天数
}
checkMonth(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
//计算上个月的日期
// month表示当前月份， n表示要向前推移的月份数。
countLastMonth(month, n) {
if (n == 0) {
var changeM = month.slice(5, 7)
$("#date_month").html(changeM + '月')
return month + "-" + "01";
} else {
let ns = (n = -n);
let beforeMonth = new Date(month);
let lastDate = beforeMonth.setMonth(beforeMonth.getMonth() - ns); // 输出日期格式为毫秒形式1551398400000
lastDate = new Date(lastDate);
let lastYear = lastDate.getFullYear();
let lastMonth = this.checkMonth(lastDate.getMonth() + 1); // 因日期中的月份表示为0-11，所以要显示正确的月份，需要 + 1
$("#date_month").html(lastMonth + '月')
lastDate = lastYear + "-" + lastMonth + "-" + "01";
return lastDate;
}
}
//初始化日期
init(Y_M_D) {
var arr = this.m_arr
var year = Y_M_D.slice(0, 4)
$("#date_year").html(year + '年')
var {
currentDate
} = this
var html = ''
arr.map(item => {
var lableClass = ''
if (item.sort < 0) {
lableClass = ' ivu-date-picker-cells-cell-prev-month'
} else if (item.sort > this.days_num) {
lableClass = ' ivu-date-picker-cells-cell-next-month'
} else if (item.Y_M_D == currentDate.Y_M_D) {
lableClass = ' ivu-date-picker-cells-cell-today ivu-date-picker-cells-focused'
}
html += '<span class= "ivu-date-picker-cells-cell' + lableClass + '"><em> ' + item.D + ' </em></span > '
})
$("#Calendar_body").html(html)
}
bindingThing({
datePicker,
panel,
input
}) {
function padZero(number) {
return number.toString().padStart(2, '0');
}
// 隐藏日期选择面板
panel.hide();
// 点击日期输入框时显示日期选择面板
input.on('click', function () {
panel.show();
});
//聚焦
input.focus(function () {
$("#input_icon").addClass("ivu-icon-ios-calendar-outline").removeClass("ivu-icon-ios-close-circle")
});
input.blur(function () {
$("#input_icon").removeClass("ivu-icon-ios-calendar-outline").addClass("ivu-icon-ios-close-circle")
});
// 点击日期选择面板之外的区域时隐藏日期选择面板
$(document).on('click', function (event) {
if (!$(event.target).closest(datePicker).length) {
panel.hide();
}
});
panel.on('click', '.ivu-date-picker-cells-cell', function () {
var year = panel.find('#date_year').text().split("年")[0];
var month = panel.find('#date_month').text().split("月")[0];
var day = $(this).text().replace(/\s/g, "");
var selclass = "ivu-date-picker-cells-cell-selected ivu-date-picker-cells-focused"
$(this).addClass(selclass).siblings().removeClass(selclass)
// 格式化日期
var date = year + '-' + month + '-' + day;
input.val(date);
panel.hide();
});
// 点击上一个月按钮
panel.on('click', '#month_prev', () => {
// 获取当前显示的年份和月份
var year = parseInt($('#date_year').text());
var month = padZero(parseInt(panel.find('#date_month').text()));
var Y_M_D = String(year) + "-" + String(month) + "-" + "01";
this.changeMonth(Y_M_D, -1)
});
// 点击下一个月按钮
panel.on('click', '#month_next', () => {
// 获取当前显示的年份和月份
var year = parseInt($('#date_year').text());
var month = padZero(parseInt(panel.find('#date_month').text()));
var Y_M_D = String(year) + "-" + String(month) + "-" + "01";
this.changeMonth(Y_M_D, 1)
});
//上一年
panel.on('click', '#year_prev', () => {
// 获取当前显示的年份和月份
var year = parseInt($('#date_year').text());
var month = padZero(parseInt(panel.find('#date_month').text()));
year = year - 1;
var Y_M_D = String(year) + "-" + String(month) + "-" + "01";
this.changeMonth(Y_M_D, 0)
});
//下一年
panel.on('click', '#year_next', () => {
// 获取当前显示的年份和月份
var year = parseInt($('#date_year').text());
var month = padZero(parseInt(panel.find('#date_month').text()));
year = year + 1;
var Y_M_D = String(year) + "-" + String(month) + "-" + "01";
console.log(Y_M_D, "下一年");
this.changeMonth(Y_M_D, 0)
});
datePicker.on('click', '.ivu-icon.ivu-icon-ios-close-circle', () => {
input.val("")
// 隐藏日期选择面板
panel.hide();
this.m_arr = this.getMArr(this.currentDate.Y_M_D)
this.init(this.currentDate.Y_M_D)
})
}
}
$(document).ready(function () {
//日期选择器处理
// 获取日期选择器元素
var datePicker = $('.ivu-date-picker');
// 获取日期输入框元素
var input = datePicker.find('input');
// 获取日期选择面板元素
var panel = datePicker.find('.ivu-select-dropdown');
var datePickerObj = new DatePicker({
datePicker,
panel,
input
})
}结果：
文章来源:https://blog.csdn.net/weixin_48813932/article/details/135494922
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！