让我来详细讲解一下：
百度用到的JS日历
简介
百度用到的JS日历组件是一个基于原生JavaScript开发的日历组件，通过引入该组件可以方便地在网页中展示日历选择器，供用户选择日期。
该组件具有以下特点：
- 支持多种语言，包括中文、英文、韩文等；
- 支持自定义选中日期后的回调函数；
- 支持配置日历初始时间；
- 支持禁用某些日期的选择；
- CSS样式可定制化。
如何使用
引入组件
在HTML文件的<head>标签中通过<script>标签引入calendar.js文件：
<head>
<script src="./calendar.js"></script>
</head>
初始化日历
在JS文件中调用Calendar.init()方法初始化日历，并通过参数进行配置：
Calendar.init({
lang: 'zh-CN', // 语言为中文，可选 'en-US'、'zh-TW'、'ja-JP' 等
startYear: 2010, // 日历初始年份
endYear: 2022, // 日历结束年份
disabledDates: ['2021-09-09', '2021-09-10'], // 禁用日期，格式为 'yyyy-mm-dd'
callback: function(date) { // 日期选择后的回调函数
console.log(date);
}
});
示例
以下是一个简单的示例，在页面上展示一个日历选择器，用户选择日期后会在控制台输出所选择的日期：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Calendar Demo</title>
<style>
/* 日历组件的样式，可自定义 */
.calendar {
width: 240px;
margin: 20px auto;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0,0,0,.1);
font-size: 14px;
line-height: 1.5;
text-align: center;
background-color: #fff;
}
.calendar .header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
}
.calendar .body {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.calendar .body .day {
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 5px;
border-radius: 50%;
cursor: pointer;
}
.calendar .body .day.current {
background-color: #f7f7f7;
}
.calendar .body .day.disabled {
color: #ccc;
cursor: not-allowed;
}
.calendar .body .day.selected {
color: #fff;
background-color: #00bcd4;
}
</style>
</head>
<body>
<div id="calendar"></div>
<script src="./calendar.js"></script>
<script>
Calendar.init({
lang: 'zh-CN',
startYear: 2010,
endYear: 2022,
disabledDates: ['2021-09-14'],
callback: function(date) {
console.log(date);
}
});
var container = document.getElementById('calendar');
container.innerHTML = Calendar.render();
var days = container.querySelectorAll('.day');
for (var i = 0; i < days.length; i++) {
days[i].addEventListener('click', function() {
var date = this.getAttribute('data-date');
Calendar.select(date);
});
}
</script>
</body>
</html>
在上面的示例中，调用Calendar.render()方法动态生成日历HTML，将生成的HTML插入到页面中的<div>标签中。同时给每个日期单元格绑定click事件，用户点击日期时调用Calendar.select()方法选择日期，并触发回调函数。
另外一个示例是在React项目中使用该组件，通过组件的props传入参数配置，并将选择的日期通过回调函数传递给父组件：
import React, { useState } from 'react';
import Calendar from './Calendar';
function App() {
const [selected, setSelected] = useState('');
const handleSelect = (date) => {
setSelected(date);
};
return (
<div className="App">
<Calendar
lang="en-US"
startYear={2020}
endYear={2025}
disabledDates={['2021-12-25', '2022-01-01']}
onSelect={handleSelect}
/>
<div>Selected date: {selected}</div>
</div>
);
}
export default App;
在上面的示例中，将组件的props传入Calendar组件中，用户选择日期时调用传入的onSelect回调函数，将所选择的日期传递给父组件并更新状态。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：百度用到的Js日历 大家可以看看 - Python技术站
微信扫一扫 
支付宝扫一扫 