一个小小的日历原生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代码

正在加载文件目录...

。。。 下载了 此素材
自然 下载了 此素材
abc 收藏了 此素材
emmm 下载了 此素材
一个人的时候 下载了 此素材
病入膏肓 下载了 此素材
你还要我怎样 下载了 此素材
麻雀初夏 下载了 此素材
Kitty 下载了 此素材
f(x☆x)=f(x)*f(x) 下载了 此素材

也许你还喜欢

  1. jQuery框弹出日历插件
  2. jquery日历插件自适用手机端
  3. js点击input出现日历插件
  4. js简单日历插件代码Calendar
  5. js拖拽选择日期范围
  6. input日期时间范围选择器
  7. 弹出式日期选择插件simplepicker.js
  8. 时间和日期选择日历插件datepicker.js
大气的法律相关服务网站模板
  • 标签查找|关于我们|用户协议|格式化工具|bootstrapmb.com 版权所有 苏ICP备20015882号-5
  • 背景样式编辑器|按钮样式编辑器|背景动效编辑器|图片布局编辑器