calendar.js实现日期月份和年份视图切换单选多选范围和星期选择效果代码-html代码-BFW代码库

calendar.js实现日期月份和年份视图切换单选多选范围和星期选择效果代码

代码语言：html

所属分类：选择器

代码描述：calendar.js实现日期月份和年份视图切换单选多选范围和星期选择效果代码，calendar.js是一个简单实用的 JavaScript 日历控件！原生 JavaScript 编写，不依赖任何第三方库。支持日期、月份和年份试图切换；支持单选、多选、范围和星期选择模式；界面简介、配置简单、使用方便。

代码标签： calendar.js 日期月份年份视图切换单选多选范围星期

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Calendar | 一个简单实用的 JavaScript 日历控件！</title>
    <meta name="description" content="一个简单实用的 JavaScript 日历控件！原生 JavaScript 编写，不依赖任何第三方库。支持日期、月份和年份试图切换；支持单选、多选、范围和星期选择模式；界面简介、配置简单、使用方便！">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/calendar.0.4.1.css">
    <style>
        *{margin:0;padding:0;}html,body{font-size:13px;background-color:#fff;}a:link,a:visited,a:hover{color:#34a6f8;text-decoration:none;}a:hover{text-decoration:underline;}.title{margin:0 2em;text-align:center;height:80px;line-height:80px;font-family:Georgia,Arial,sans-serif;overflow:hidden;}.version{font-size:14px;}.calendar{position:relative;z-index:1;margin:0 2em 2em;padding:2em;box-sizing:border-box;box-shadow:0 0 15px #ddd;font-family:'Microsoft YaHei UI',Arial,sans-serif;overflow:hidden;}.feature{margin:0 auto;padding:0 15px;font-weight:500;overflow:hidden;}.demo{position:relative;z-index:1;margin:1.5em auto;height:360px;border-top:1px solid #ddd;border-bottom:1px solid #ddd;overflow:hidden;}.demo-example,.demo-usage{position:relative;z-index:1;float:left;width:50%;padding:15px;height:100%;box-sizing:border-box;overflow:hidden;}.demo-example:after{position:absolute;z-index:2;top:0;right:0;height:100%;width:1px;background-color:#ddd;overflow:hidden;content:' ';}.demo-pre{height:100%;padding:15px;background-color:#f8f8f8;box-sizing:border-box;overflow:auto;}.demo-pre:hover{background-color:#f1f1f1;}.demo-code{line-height:150%;font-size:14px;font-family:'Courier New',Consolas,'Microsoft YaHei UI',Arial,sans-serif;}.copyright{margin:0 auto;line-height:150%;text-align:center;font-size:14px;padding:0 0 1.5em;overflow:hidden;}::-webkit-scrollbar{width:7px;height:7px;-webkit-border-radius:5px;}::-webkit-scrollbar-track-piece{-webkit-border-radius:5px;}::-webkit-scrollbar-thumb:vertical{background-color:rgba(0,0,0,.10);-webkit-border-radius:5px;}::-webkit-scrollbar-thumb:horizontal{background-color:rgba(0,0,0,.10);-webkit-border-radius:5px;}::-webkit-scrollbar:hover{}::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.15);}
    </style>
</head>

<body>
    <h1 class="title">Calendar.js<sup class="version">v0.4.1</sup></h1>
    <div class="calendar">
        <h2 class="feature">日期试图模式</h2>
        <div class="demo">
            <div class="demo-example" id="dates-view"></div>
            <dov class="demo-usage">
                <pre class="demo-pre"><code class.........完整代码请登录后点击上方下载按钮下载查看