vanillajs-datepicker
Version:
A vanilla JavaScript remake of bootstrap-datepicker for Bulma and other CSS frameworks
680 lines (632 loc) • 24.2 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vanilla JS Datepicker Demo</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bulma-tooltip@3.0.2/dist/css/bulma-tooltip.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/github.min.css">
<link rel="stylesheet" type="text/css" href="../dist/css/datepicker.css">
<style type="text/css">
pre {
background-color: #f5f5f5;
padding: 1rem;
overflow-x: auto;
}
.section {
padding: 1.5rem;
}
.field {
margin-bottom: 1em;
}
.has-addons {
display: flex;
}
.has-addons .control a {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.label {
font-weight: 600;
}
.is-flex {
display: flex;
}
.is-flex-wrap-wrap {
flex-wrap: wrap;
}
.mt-2 {
margin-top: 0.5rem;
}
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
aside {
position: fixed;
top: 0;
bottom: 0;
right: -300px;
width: 300px;
overflow: auto;
background-color: #fff;
box-shadow: inset 1px 1px rgba(0, 0, 0, 10%);
transition: right 0.3s;
}
.open aside {
right: 0;
}
aside hr {
margin-top: 0.5rem;
}
.code-wrap {
position: relative;
}
.code-wrap pre {
max-height: 320px;
overflow-y: auto;
}
.code-wrap pre:not(.is-active) {
height: 0;
overflow: hidden;
opacity: 0.5;
}
.code-wrap .collapse-button {
position: absolute;
top: 0;
right: 0;
left: auto;
cursor: pointer;
background-color: #f6f6f6cc;
padding: 0.125rem 0.25rem;
font-size: 0.75rem;
}
.code-wrap pre:not(.is-active) + .collapse-button {
background-color: transparent;
}
.code-wrap pre code.hljs {
display: initial;
overflow: initial;
background: initial;
padding: initial;
}
.option-type-selector > label:first-of-type {
margin: 0 0.25rem;
}
.is-hidden {
display: none;
}
label.checkbox {
display: inline-block;
}
.help {
margin: 0;
}
.help.is-danger {
color: #f14668;
}
.toggle-button {
position: fixed;
top: 0.75rem;
right: 0.75rem;
width: 1.5rem;
background-color: #fff;
line-height: 1.5rem;
border: 1px solid rgba(0, 0, 0, 10%);
border-radius: 2px;
box-shadow: 1px 1px rgba(0, 0, 0, 10%);
cursor: pointer;
}
.toggle-button::before {
content: '\25c0';
padding-left: 0.25rem;
}
.open .toggle-button::before {
content: '\25b6';
}
.has-background-info {
background-color: cyan;
}
.has-text-success {
color: green;
}
.has-text-weight-bold {
font-weight: bold;
}
.is-italic {
font-style: italic;
}
.is-underlined {
text-decoration: underline;
}
@media (min-width: 481px) {
main {
margin-right: 38.1966%;
}
aside {
right: 0;
width: 38.1966%;
}
.toggle-button {
display: none;
}
}
@media (min-width: 1024px) {
.code-wrap pre {
max-height: calc(39vw - 7.5rem);
}
}
</style>
</head>
<body>
<main>
<section class="section container is-fluid">
<div class="columns">
<div class="column">
<p>Vanilla JS Datepicker</p>
<h1 class="title">Demo</h1>
<div id="sandbox">
<div class="control"><input type="text" class="input date"></div>
</div>
<div id="elem-attribs" class="is-flex is-flex-wrap-wrap mt-2">
<label>Attribute:</label>
<div class="px-1">
<label class="checkbox mx-1">
<input type="checkbox" data-target="input" name="readonly" value="">
readonly
</label>
<label class="checkbox mx-1">
<input type="checkbox" data-target="input" name="disabled" value="">
disabled
</label>
<label class="checkbox mx-1" style="display: none;">
<input type="checkbox" data-target=".date" name="tabindex" value="0">
tabindex="0"
</label>
</div>
</div>
</div>
</div>
<div class="columns">
<div class="column">
<p><small>Style: <a href="index.html">Bulma</a> | <a href="bs5.html">Bootstrap</a> | <a href="foundation.html">Foundation</a> | <em>Plain CSS</em></small></p>
<p><small>* This page uses <a href="https://wikiki.github.io/elements/tooltip/" target="_blank">bulma-tooltip</a> for tooltips.</small></p>
</div>
</div>
</section>
</main>
<aside>
<section class="section">
<div class="tile is-parent is-vertical">
<div class="tile is-child">
<h4 class="subtitle">Type</h4>
<form id="types">
<div class="field">
<div class="control">
<label class="radio">
<input type="radio" name="type" value="input" checked>
Input
</label>
<label class="radio">
<input type="radio" name="type" value="inline">
Inline
</label>
<label class="radio">
<input type="radio" name="type" value="range">
Range
</label>
</div>
</div>
</form>
</div>
<hr>
<div class="tile is-child">
<h4 class="subtitle">Options</h4>
<form id="options">
<div class="field">
<div class="control tooltip" data-tooltip="Only effective in range picker">
<label class="label checkbox">
<input type="checkbox" name="allowOneSidedRange" value="true">
allowOneSidedRange
</label>
</div>
</div>
<div class="field">
<div class="control">
<label class="label checkbox">
<input type="checkbox" name="autohide" value="true">
autohide
</label>
</div>
</div>
<div class="field">
<div class="control">
<label class="label checkbox">
<input type="checkbox" name="beforeShowDay" value="true">
beforeShowDay
</label>
</div>
<div class="code-wrap">
<pre id="code-beforeShowDay"><code class="language-javascript"></code></pre>
<div class="collapse-button" data-target="code-beforeShowDay">show/hide</div>
</div>
</div>
<div class="field">
<div class="control">
<label class="label checkbox">
<input type="checkbox" name="beforeShowMonth" value="true">
beforeShowMonth
</label>
</div>
<div class="code-wrap">
<pre id="code-beforeShowMonth"><code class="language-javascript"></code></pre>
<div class="collapse-button" data-target="code-beforeShowMonth">show/hide</div>
</div>
</div>
<div class="field">
<div class="control">
<label class="label checkbox">
<input type="checkbox" name="beforeShowYear" value="true">
beforeShowYear
</label>
</div>
<div class="code-wrap">
<pre id="code-beforeShowYear"><code class="language-javascript"></code></pre>
<div class="collapse-button" data-target="code-beforeShowYear">show/hide</div>
</div>
</div>
<div class="field">
<div class="control">
<label class="label checkbox">
<input type="checkbox" name="beforeShowDecade" value="true">
beforeShowDecade
</label>
</div>
<div class="code-wrap">
<pre id="code-beforeShowDecade"><code class="language-javascript"></code></pre>
<div class="collapse-button" data-target="code-beforeShowDecade">show/hide</div>
</div>
</div>
<div class="field">
<div class="control">
<label class="label checkbox">
<input type="checkbox" name="clearButton" value="true">
clearButton
</label>
</div>
</div>
<div class="field">
<label class="label">dateDelimiter</label>
<div class="control">
<input type="text" class="input" name="dateDelimiter" placeholder=",">
</div>
</div>
<div class="field">
<label class="label">datesDisabled</label>
<div class="option-type-selector">
use
<label class="radio">
<input type="radio" name="datesDisabledFn" value="" checked>
array
</label>
<label class="radio">
<input type="radio" name="datesDisabledFn" value="1">
function
</label>
</div>
<div id="datesDisabled-arr" class="control tooltip" data-tooltip="enter in JSON format">
<textarea class="input" name="datesDisabled" placeholder="[]"></textarea>
</div>
<div id="datesDisabled-fn" class="code-wrap is-hidden">
<pre id="code-datesDisabled"><code class="language-javascript"></code></pre>
<div class="collapse-button" data-target="code-datesDisabled">show/hide</div>
</div>
</div>
<div class="field">
<label class="label">daysOfWeekDisabled</label>
<div class="control">
<label class="checkbox">
<input type="checkbox" name="daysOfWeekDisabled" value="0"> 0
</label>
<label class="checkbox">
<input type="checkbox" name="daysOfWeekDisabled" value="1"> 1
</label>
<label class="checkbox">
<input type="checkbox" name="daysOfWeekDisabled" value="2"> 2
</label>
<label class="checkbox">
<input type="checkbox" name="daysOfWeekDisabled" value="3"> 3
</label>
<label class="checkbox">
<input type="checkbox" name="daysOfWeekDisabled" value="4"> 4
</label>
<label class="checkbox">
<input type="checkbox" name="daysOfWeekDisabled" value="5"> 5
</label>
<label class="checkbox">
<input type="checkbox" name="daysOfWeekDisabled" value="6"> 6
</label>
</div>
</div>
<div class="field">
<label class="label">daysOfWeekHighlighted</label>
<div class="control">
<label class="checkbox">
<input type="checkbox" name="daysOfWeekHighlighted" value="0"> 0
</label>
<label class="checkbox">
<input type="checkbox" name="daysOfWeekHighlighted" value="1"> 1
</label>
<label class="checkbox">
<input type="checkbox" name="daysOfWeekHighlighted" value="2"> 2
</label>
<label class="checkbox">
<input type="checkbox" name="daysOfWeekHighlighted" value="3"> 3
</label>
<label class="checkbox">
<input type="checkbox" name="daysOfWeekHighlighted" value="4"> 4
</label>
<label class="checkbox">
<input type="checkbox" name="daysOfWeekHighlighted" value="5"> 5
</label>
<label class="checkbox">
<input type="checkbox" name="daysOfWeekHighlighted" value="6"> 6
</label>
</div>
</div>
<div class="field">
<label class="label">defaultViewDate</label>
<div class="control">
<input type="text" class="input" name="defaultViewDate" placeholder="today">
</div>
</div>
<div class="field">
<div class="control">
<label class="label checkbox">
<input type="checkbox" name="enableOnReadonly" value="true" checked>
enableOnReadonly
</label>
</div>
</div>
<div class="field">
<label class="label">format</label>
<div class="control">
<input type="text" class="input" name="format" placeholder="mm/dd/yyyy">
</div>
</div>
<div class="field">
<label class="label">language</label>
<div class="control">
<div class="select">
<select name="language" >
<option value="en">en – English (US)</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="label">maxDate</label>
<div class="control">
<input type="text" class="input" name="maxDate" placeholder="null">
</div>
</div>
<div class="field">
<label class="label">maxNumberOfDates</label>
<div class="control tooltip" data-tooltip="Not effective in range picker">
<input type="text" class="input" name="maxNumberOfDates" placeholder="1">
</div>
</div>
<div class="field">
<label class="label">maxView</label>
<div class="control">
<div class="select">
<select name="maxView">
<option value="0">0 – days</option>
<option value="1">1 – months</option>
<option value="2">2 – years</option>
<option value="3" selected>3 – decades</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="label">minDate</label>
<div class="control">
<input type="text" class="input" name="minDate" placeholder="null">
</div>
</div>
<div class="field">
<label class="label">nextArrow</label>
<div class="control">
<textarea class="input" name="nextArrow" placeholder="»"></textarea>
</div>
</div>
<div class="field">
<label class="label">orientation</label>
<div class="control">
<div class="select">
<select name="orientation" >
<option value="auto">auto</option>
<option value="top auto">top auto</option>
<option value="bottom auto">bottom auto</option>
<option value="auto left">auto left</option>
<option value="top left">top left</option>
<option value="bottom left">bottom left</option>
<option value="auto right">auto right</option>
<option value="top right">top right</option>
<option value="bottom right">bottom right</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="label">pickLevel</label>
<div class="control">
<div class="select">
<select name="pickLevel">
<option value="0">0 – date</option>
<option value="1">1 – month</option>
<option value="2">2 – year</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="label">prevArrow</label>
<div class="control">
<textarea class="input" name="prevArrow" placeholder="«"></textarea>
</div>
</div>
<div class="field">
<div class="control">
<label class="label checkbox">
<input type="checkbox" name="showDaysOfWeek" value="true" checked>
showDaysOfWeek
</label>
</div>
</div>
<div class="field">
<div class="control">
<label class="label checkbox">
<input type="checkbox" name="showOnClick" value="true" checked>
showOnClick
</label>
</div>
</div>
<div class="field">
<div class="control">
<label class="label checkbox">
<input type="checkbox" name="showOnFocus" value="true" checked>
showOnFocus
</label>
</div>
</div>
<div class="field">
<label class="label">startView</label>
<div class="control">
<div class="select">
<select name="startView">
<option value="0">0 – days</option>
<option value="1">1 – months</option>
<option value="2">2 – years</option>
<option value="3">3 – decades</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="label">title</label>
<div class="control">
<input type="text" class="input" name="title">
</div>
</div>
<div class="field">
<div class="control">
<label class="label checkbox">
<input type="checkbox" name="todayButton" value="true">
todayButton
</label>
</div>
</div>
<div class="field">
<label class="label">todayButtonMode</label>
<div class="control">
<div class="select">
<select name="todayButtonMode">
<option value="0">0 – focus</option>
<option value="1">1 – select</option>
</select>
</div>
</div>
</div>
<div class="field">
<div class="control">
<label class="label checkbox">
<input type="checkbox" name="todayHighlight" value="true">
todayHighlight
</label>
</div>
</div>
<div class="field">
<div class="control">
<label class="label checkbox">
<input type="checkbox" name="updateOnBlur" value="true" checked>
updateOnBlur
</label>
</div>
</div>
<div class="field">
<label class="label">weekNumbers</label>
<div class="control">
<div class="select">
<select name="weekNumbers">
<option value="0">0 – None</option>
<option value="1">1 – ISO 8601</option>
<option value="2">2 – Western traditional</option>
<option value="3">3 – Middle Eastern</option>
<option value="4">4 – Guess from weekStart</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="label">weekStart</label>
<div class="control">
<input type="text" class="input" name="weekStart" placeholder="0">
</div>
</div>
</form>
</div>
<hr>
<div class="tile is-child">
<h4 class="subtitle">Text direction</h4>
<form id="direction">
<div class="field">
<div class="control">
<label class="radio">
<input type="radio" name="direction" value="ltr" checked>
LTR
</label>
<label class="radio">
<input type="radio" name="direction" value="rtl">
RTL
</label>
</div>
</div>
</form>
</div>
</div>
</section>
</aside>
<div class="toggle-button"></div>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/highlight.min.js"></script>
<script src="../dist/js/datepicker-full.js"></script>
<script src="./live-demo.js"></script>
<script>
/*global initialize onChangeType onChnageDirection onChangeInputOption onChangeInputOption onChangeTextareaOption onClickCheckboxOptions switchPicker */
initialize();
hljs.highlightAll();
document.getElementById('types').querySelectorAll('input').forEach((el) => {
el.addEventListener('change', onChangeType);
});
document.getElementById('direction').querySelectorAll('input').forEach((el) => {
el.addEventListener('change', onChnageDirection);
});
const optsForm = document.getElementById('options');
optsForm.querySelectorAll('input[type=text], input[type=radio], select').forEach((el) => {
el.addEventListener('change', onChangeInputOption);
});
optsForm.querySelectorAll('textarea').forEach((el) => {
el.addEventListener('change', onChangeTextareaOption);
});
optsForm.querySelectorAll('.checkbox').forEach((el) => {
el.addEventListener('click', onClickCheckboxOptions);
});
switchPicker('input');
</script>
</body>
</html>