百度用到的Js日历大家可以看看

2023年6月11日上午7:45 • JavaScript

让我来详细讲解一下：

百度用到的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技术站