一个小小的日历原生JavaScript代码

一个小小的日历原生JavaScript代码源码下载

看看谁在用

查看文件结构

文件大小:0.01M

资源分类: 插件-Canvas动画

更新时间: 2022-07-11

一个小小的日历原生JavaScript代码。为您的网站创建一个漂亮的可定制的日历,使用ISO 8601标准。没有依赖,没有jQuery,没有框架。自定义节日,多个日期选择,内置的语言支持,缩小规体积只有9 kb。

首先定义一个容器
<div class="vanilla-calendar">
  
</div>
js基础调用
const calendar = new VanillaCalendar({
      HTMLElement: document.querySelector('.vanilla-calendar'),
});
calendar.init();
设置今天
const calendar = new VanillaCalendar({
      HTMLElement: document.querySelector('.vanilla-calendar'),
      date: new Date('2023-01-01'),
});
禁用日期选择
const calendar = new VanillaCalendar({
      HTMLElement: document.querySelector('.vanilla-calendar'),
      settings: {
        selecting: false,
      },
});
calendar.init();
设置范围
const calendar = new VanillaCalendar({
      HTMLElement: document.querySelector('.vanilla-calendar'),
      settings: {
        range: {
          min: '2022-05-01',
          max: '2022-05-13',
          values: ['2022-05-16', '2022-05-17'],
        },
      },
});
calendar.init();
指定日期
const calendar = new VanillaCalendar({
      HTMLElement: document.querySelector('.vanilla-calendar'),
      settings: {
        selected: {
         date: '2022-05-14',
         month: 5,
         year: 2022,
         holidays: ['2022-05-01', '2022-05-02', '2022-05-03', '2022-05-04'],
        },
      },
});
calendar.init();
自定义语音,中文需要自行扩展
const calendar = new VanillaCalendar({
      HTMLElement: document.querySelector('.vanilla-calendar'),
      settings: {
        lang: 'en', // or 'ru'
      },
});
calendar.init();

一个小小的日历原生JavaScript代码

正在加载文件目录...

也许你还喜欢

  1. ES6网页版日历JS插件代码
  2. js简单日历插件代码Calendar
  3. 时间和日期选择日历插件datepicker.js
  4. jQuery框弹出日历插件
  5. Calendarize.js日历插件
  6. WdatePicker.js日历插件
大气的法律相关服务网站模板
  • 标签查找|关于我们|用户协议|格式化工具|bootstrapmb.com 版权所有 苏ICP备20015882号-5
  • 背景样式编辑器|按钮样式编辑器|背景动效编辑器|图片布局编辑器