second commit
This commit is contained in:
582
node_modules/flowbite-datepicker/demo/index.html
generated
vendored
Normal file
582
node_modules/flowbite-datepicker/demo/index.html
generated
vendored
Normal file
@ -0,0 +1,582 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="dark">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Vanilla JS Datepicker Demo</title>
|
||||
<link rel="stylesheet" href="./../tailwind.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;
|
||||
}
|
||||
|
||||
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:not(.is-active) {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.code-wrap .collapse-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: auto;
|
||||
cursor: pointer;
|
||||
padding: 0.125rem 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
label.checkbox {
|
||||
display: inline-block;
|
||||
}
|
||||
.help {
|
||||
margin: 0;
|
||||
}
|
||||
.help.is-danger {
|
||||
color: #f14668;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
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-btn::before {
|
||||
content: '\25c0';
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
.open .toggle-btn::before {
|
||||
content: '\25b6';
|
||||
}
|
||||
|
||||
.has-background-info {
|
||||
background-color: cyan;
|
||||
}
|
||||
.has-text-success {
|
||||
color: green;
|
||||
}
|
||||
|
||||
@media (min-width: 481px) {
|
||||
main {
|
||||
margin-right: 38.1966%;
|
||||
}
|
||||
aside {
|
||||
right: 0;
|
||||
width: 38.1966%;
|
||||
}
|
||||
.toggle-btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="dark:bg-gray-900">
|
||||
<main>
|
||||
<section class="container section is-fluid">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>Vanilla JS Datepicker</p>
|
||||
<h1 class="title">Demo</h1>
|
||||
<div id="sandbox"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p><small>Style: <a href="index.html">Bulma</a> | <a href="bs4.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"></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"></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"></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"></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="calendarWeeks" value="true">
|
||||
calendarWeeks
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label class="label checkbox">
|
||||
<input type="checkbox" name="clearBtn" value="true">
|
||||
clearBtn
|
||||
</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="control tooltip" data-tooltip="enter in JSON format">
|
||||
<textarea class="input" name="datesDisabled" placeholder="[]"></textarea>
|
||||
</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="disableTouchKeyboard" value="true">
|
||||
disableTouchKeyboard
|
||||
</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="todayBtn" value="true">
|
||||
todayBtn
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">todayBtnMode</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select name="todayBtnMode">
|
||||
<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">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-btn"></div>
|
||||
<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();
|
||||
|
||||
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>
|
||||
469
node_modules/flowbite-datepicker/demo/live-demo.js
generated
vendored
Normal file
469
node_modules/flowbite-datepicker/demo/live-demo.js
generated
vendored
Normal file
@ -0,0 +1,469 @@
|
||||
/*eslint no-unused-vars: ["error", { "varsIgnorePattern": "initialize|on[A-Z]*" }]*/
|
||||
var templates = {
|
||||
input: `<div class="field">
|
||||
<div class="control">
|
||||
<input type="text" class="input date">
|
||||
</div>
|
||||
</div>`,
|
||||
inline: `<div class="date"></div>`,
|
||||
range: `<div class="field has-addons date">
|
||||
<div class="control">
|
||||
<input type="text" name="range-start" class="input">
|
||||
</div>
|
||||
<div class="control">
|
||||
<a class="button is-static">to</a>
|
||||
</div>
|
||||
<div class="control">
|
||||
<input type="text" name="range-end" class="input">
|
||||
</div>
|
||||
</div>`,
|
||||
};
|
||||
var beforeShowFns = {
|
||||
beforeShowDay(date) {
|
||||
if (date.getMonth() == new Date().getMonth()) {
|
||||
switch (date.getDate()) {
|
||||
case 4:
|
||||
return {
|
||||
content: '<span class="tooltip" data-tooltip="Example tooltip">4</span>',
|
||||
classes: 'has-background-info'
|
||||
};
|
||||
case 8:
|
||||
return false;
|
||||
case 12:
|
||||
return "has-text-success";
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeShowMonth(date) {
|
||||
switch (date.getMonth()) {
|
||||
case 6:
|
||||
if (date.getFullYear() === new Date().getFullYear()) {
|
||||
return {content: '🎉'};
|
||||
}
|
||||
break;
|
||||
case 8:
|
||||
return false;
|
||||
}
|
||||
},
|
||||
beforeShowYear(date) {
|
||||
switch (date.getFullYear()) {
|
||||
case 2017:
|
||||
return false;
|
||||
case 2020:
|
||||
return {content: '<span class="tooltip is-tooltip-bottom" data-tooltip="Tooltip text">2020</span>'};
|
||||
}
|
||||
},
|
||||
beforeShowDecade(date) {
|
||||
switch (date.getFullYear()) {
|
||||
case 2000:
|
||||
return false;
|
||||
case 2100:
|
||||
return {
|
||||
content: '💯',
|
||||
classes: 'is-background-success',
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
var buttonClass;
|
||||
|
||||
const today = new Date().setHours(0, 0, 0, 0);
|
||||
const defaultOptions = {
|
||||
allowOneSidedRange: false,
|
||||
autohide: false,
|
||||
beforeShowDay: null,
|
||||
beforeShowDecade: null,
|
||||
beforeShowMonth: null,
|
||||
beforeShowYear: null,
|
||||
calendarWeeks: false,
|
||||
clearBtn: false,
|
||||
dateDelimiter: ',',
|
||||
datesDisabled: [],
|
||||
daysOfWeekDisabled: [],
|
||||
daysOfWeekHighlighted: [],
|
||||
defaultViewDate: today,
|
||||
disableTouchKeyboard: false,
|
||||
format: 'mm/dd/yyyy',
|
||||
language: 'en',
|
||||
maxDate: null,
|
||||
maxNumberOfDates: 1,
|
||||
maxView: 3,
|
||||
minDate: null,
|
||||
nextArrow: '»',
|
||||
orientation: 'auto',
|
||||
pickLevel: 0,
|
||||
prevArrow: '«',
|
||||
showDaysOfWeek: true,
|
||||
showOnClick: true,
|
||||
showOnFocus: true,
|
||||
startView: 0,
|
||||
title: '',
|
||||
todayBtn: false,
|
||||
todayHighlight: false,
|
||||
updateOnBlur: true,
|
||||
weekStart: 0,
|
||||
};
|
||||
const languages = {
|
||||
'ar-tn': 'Arabic-Tunisia',
|
||||
ar: 'Arabic',
|
||||
az: 'Azerbaijani',
|
||||
bg: 'Bulgarian',
|
||||
bm: 'Bamanankan',
|
||||
bn: 'Bengali (Bangla)',
|
||||
br: 'Breton',
|
||||
bs: 'Bosnian',
|
||||
ca: 'Catalan',
|
||||
cs: 'Czech',
|
||||
cy: 'Welsh',
|
||||
da: 'Danish',
|
||||
de: 'German',
|
||||
el: 'Greek',
|
||||
'en-AU': 'Australian English',
|
||||
'en-CA': 'Canadian English',
|
||||
'en-GB': 'British English',
|
||||
'en-IE': 'Irish English',
|
||||
'en-NZ': 'New Zealand English',
|
||||
'en-ZA': 'South African English',
|
||||
eo: 'Esperanto',
|
||||
es: 'Spanish',
|
||||
et: 'Estonian',
|
||||
eu: 'Basque',
|
||||
fa: 'Persian',
|
||||
fi: 'Finnish',
|
||||
fo: 'Faroese',
|
||||
'fr-CH': 'French (Switzerland)',
|
||||
fr: 'French',
|
||||
gl: 'Galician',
|
||||
he: 'Hebrew',
|
||||
hi: 'Hindi',
|
||||
hr: 'Croatian',
|
||||
hu: 'Hungarian',
|
||||
hy: 'Armenian',
|
||||
id: 'Bahasa',
|
||||
is: 'Icelandic',
|
||||
'it-CH': 'Italian (Switzerland)',
|
||||
it: 'Italian',
|
||||
ja: 'Japanese',
|
||||
ka: 'Georgian',
|
||||
kk: 'Kazakh',
|
||||
km: 'Khmer',
|
||||
ko: 'Korean',
|
||||
lt: 'Lithuanian',
|
||||
lv: 'Latvian',
|
||||
me: 'Montenegrin',
|
||||
mk: 'Macedonian',
|
||||
mn: 'Mongolian',
|
||||
mr: 'Marathi',
|
||||
ms: 'Malay',
|
||||
'nl-BE': 'Belgium-Dutch',
|
||||
nl: 'Dutch',
|
||||
no: 'Norwegian',
|
||||
oc: 'Occitan',
|
||||
pl: 'Polish',
|
||||
'pt-BR': 'Brazilian',
|
||||
pt: 'Portuguese',
|
||||
ro: 'Romanian',
|
||||
ru: 'Russian',
|
||||
si: 'Sinhala',
|
||||
sk: 'Slovak',
|
||||
sl: 'Slovene',
|
||||
sq: 'Albanian',
|
||||
'sr-latn': 'Serbian latin',
|
||||
sr: 'Serbian cyrillic',
|
||||
sv: 'Swedish',
|
||||
sw: 'Swahili',
|
||||
ta: 'Tamil',
|
||||
tg: 'Tajik',
|
||||
th: 'Thai',
|
||||
tk: 'Turkmen',
|
||||
tr: 'Turkish',
|
||||
uk: 'Ukrainian',
|
||||
'uz-cyrl': 'Uzbek cyrillic',
|
||||
'uz-latn': 'Uzbek latin',
|
||||
vi: 'Vietnamese',
|
||||
'zh-CN': 'Simplified Chinese',
|
||||
'zh-TW': 'Traditional Chinese',
|
||||
};
|
||||
const range = document.createRange();
|
||||
const sandbox = document.getElementById('sandbox');
|
||||
const options = document.getElementById('options');
|
||||
const jsonFields = ['datesDisabled'];
|
||||
|
||||
function parseHTML(html) {
|
||||
return range.createContextualFragment(html);
|
||||
}
|
||||
|
||||
function getBeforeShowFnSrc(name) {
|
||||
return beforeShowFns[name].toString();
|
||||
}
|
||||
|
||||
function switchPicker(type) {
|
||||
const options = buttonClass ? {buttonClass} : {};
|
||||
if (window.demoPicker) {
|
||||
const currentOpts = window.demoPicker instanceof DateRangePicker
|
||||
? window.demoPicker.datepickers[0]._options
|
||||
: window.demoPicker._options;
|
||||
Object.keys(defaultOptions).reduce((opts, key) => {
|
||||
if (key in currentOpts && String(currentOpts[key] !== String(defaultOptions[key]))) {
|
||||
opts[key] = currentOpts[key];
|
||||
}
|
||||
return opts;
|
||||
}, options);
|
||||
|
||||
window.demoPicker.destroy();
|
||||
sandbox.removeChild(sandbox.firstChild);
|
||||
}
|
||||
sandbox.appendChild(parseHTML(templates[type]));
|
||||
|
||||
const el = sandbox.querySelector('.date');
|
||||
window.demoPicker = type === 'range'
|
||||
? new DateRangePicker(el, options)
|
||||
: new Datepicker(el, options);
|
||||
}
|
||||
|
||||
const setOptions = function setOptions(name, value) {
|
||||
window.demoPicker.setOptions({[name]: value});
|
||||
refreshOptionForm();
|
||||
};
|
||||
const refreshOptionForm = function refreshOptionForm() {
|
||||
const demoPicker = window.demoPicker;
|
||||
const rangePicker = demoPicker instanceof DateRangePicker;
|
||||
const datepicker = rangePicker ? demoPicker.datepickers[0] : demoPicker;
|
||||
const optsForm = document.getElementById('options');
|
||||
const {config, _options} = datepicker;
|
||||
const configDefaults = {
|
||||
minDate: new Date(today).setFullYear(0, 0, 1),
|
||||
maxDate: undefined,
|
||||
};
|
||||
const formElemByName = name => optsForm.querySelector(`[name="${name}"]`);
|
||||
const formatDate = val => Datepicker.formatDate(val, config.format, config.lang);
|
||||
|
||||
if (!rangePicker) {
|
||||
const allowOneSided = formElemByName('allowOneSidedRange');
|
||||
if (allowOneSided.checked) {
|
||||
allowOneSided.checked = false;
|
||||
}
|
||||
}
|
||||
Object.entries(datepicker.config).forEach(entry => {
|
||||
const [key, val] = entry;
|
||||
let el;
|
||||
switch (key) {
|
||||
case 'format':
|
||||
case 'weekStart':
|
||||
el = formElemByName(key);
|
||||
if (el.value || val !== defaultOptions[key]) {
|
||||
el.value = val;
|
||||
}
|
||||
break;
|
||||
case 'minDate':
|
||||
case 'maxDate':
|
||||
el = formElemByName(key);
|
||||
if (val === configDefaults[key]) {
|
||||
if (!el.value || el.value === 'null') {
|
||||
break;
|
||||
}
|
||||
if (_options[key] === null) {
|
||||
el.value = '';
|
||||
break;
|
||||
}
|
||||
}
|
||||
el.value = formatDate(val);
|
||||
break;
|
||||
case 'datesDisabled':
|
||||
el = formElemByName(key);
|
||||
if (val.length === 0) {
|
||||
if (!el.value || el.value === '[]') {
|
||||
break;
|
||||
}
|
||||
if (String(_options.datesDisabled) === '[]') {
|
||||
el.value = '';
|
||||
break;
|
||||
}
|
||||
}
|
||||
el.value = JSON.stringify(val.map(item => formatDate(item)));
|
||||
break;
|
||||
case 'daysOfWeekDisabled':
|
||||
case 'daysOfWeekHighlighted':
|
||||
optsForm.querySelectorAll(`[name=${key}`).forEach(chkbox => {
|
||||
chkbox.checked = val.includes(Number.parseInt(chkbox.value, 10));
|
||||
});
|
||||
break;
|
||||
case 'defaultViewDate':
|
||||
el = formElemByName(key);
|
||||
if (val === defaultOptions[key]) {
|
||||
if (!el.value || el.value === 'today') {
|
||||
break;
|
||||
}
|
||||
if (_options[key] === 'today') {
|
||||
el.value = '';
|
||||
break;
|
||||
}
|
||||
}
|
||||
el.value = formatDate(val);
|
||||
break;
|
||||
case 'maxView':
|
||||
case 'pickLevel':
|
||||
case 'startView':
|
||||
formElemByName(key).value = val;
|
||||
break;
|
||||
case 'maxNumberOfDates':
|
||||
el = formElemByName(key);
|
||||
if (rangePicker) {
|
||||
if (el.value) {
|
||||
el.value = '';
|
||||
}
|
||||
break;
|
||||
}
|
||||
if (el.value || val !== defaultOptions[key]) {
|
||||
el.value = val;
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
};
|
||||
const handleArrayOption = function handleArrayOption(name) {
|
||||
const checkedInputs = options.querySelectorAll(`input[name=${name}]:checked`);
|
||||
setOptions(name, Array.from(checkedInputs).map(el => Number(el.value)));
|
||||
};
|
||||
|
||||
function updateOption(name, value) {
|
||||
switch (name) {
|
||||
case 'beforeShowDay':
|
||||
case 'beforeShowMonth':
|
||||
case 'beforeShowYear':
|
||||
case 'beforeShowDecade':
|
||||
setOptions(name, value ? beforeShowFns[name] : null);
|
||||
return;
|
||||
case 'daysOfWeekDisabled':
|
||||
case 'daysOfWeekHighlighted':
|
||||
handleArrayOption(name, value);
|
||||
return;
|
||||
}
|
||||
|
||||
let newValue;
|
||||
if (typeof value === 'string') {
|
||||
switch (value) {
|
||||
case '':
|
||||
newValue = defaultOptions[name];
|
||||
break;
|
||||
case 'null':
|
||||
newValue = null;
|
||||
break;
|
||||
case 'false':
|
||||
newValue = false;
|
||||
break;
|
||||
case 'true':
|
||||
newValue = true;
|
||||
break;
|
||||
default:
|
||||
newValue = Number(value);
|
||||
if (isNaN(newValue)) {
|
||||
newValue = value;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
newValue = value;
|
||||
}
|
||||
setOptions(name, newValue);
|
||||
}
|
||||
|
||||
function addError(el, message) {
|
||||
const field = el.parentElement.parentElement;
|
||||
field.appendChild(parseHTML(`<p class="help is-danger">${message}</p>`));
|
||||
el.classList.add('is-danger');
|
||||
}
|
||||
|
||||
function removeErrors(el) {
|
||||
const field = el.parentElement.parentElement;
|
||||
field.querySelectorAll('.help.is-danger').forEach((errMsg) => {
|
||||
field.removeChild(errMsg);
|
||||
});
|
||||
el.classList.remove('is-danger');
|
||||
}
|
||||
|
||||
function onChangeType(ev) {
|
||||
switchPicker(ev.target.value);
|
||||
refreshOptionForm();
|
||||
}
|
||||
|
||||
function onChnageDirection(ev) {
|
||||
const defaultDir = window.getComputedStyle(document.body).direction;
|
||||
const dir = ev.target.value;
|
||||
const mainElem = document.querySelector('main');
|
||||
|
||||
if (dir !== defaultDir) {
|
||||
mainElem.dir = dir;
|
||||
} else {
|
||||
mainElem.removeAttribute('dir');
|
||||
}
|
||||
}
|
||||
|
||||
function onChangeInputOption(ev) {
|
||||
updateOption(ev.target.name, ev.target.value);
|
||||
}
|
||||
|
||||
function onChangeTextareaOption(ev) {
|
||||
let {value, name} = ev.target;
|
||||
if (jsonFields.includes(name)) {
|
||||
removeErrors(ev.target);
|
||||
if (value.length > 0) {
|
||||
try {
|
||||
value = JSON.parse(value);
|
||||
} catch (err) {
|
||||
addError(ev.target, 'Invalid JSON string');
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (name === 'datesDisabled') {
|
||||
if (value && !Array.isArray(value)) {
|
||||
addError(ev.target, 'This option must be an array');
|
||||
return;
|
||||
}
|
||||
}
|
||||
updateOption(name, value);
|
||||
}
|
||||
|
||||
function onClickCheckboxOptions(ev) {
|
||||
ev.stopPropagation();
|
||||
|
||||
let checkbox;
|
||||
let checked;
|
||||
if (ev.target.tagName === 'INPUT') {
|
||||
checkbox = ev.target;
|
||||
checked = checkbox.checked;
|
||||
} else {
|
||||
ev.preventDefault();
|
||||
checkbox = ev.currentTarget.querySelector('input');
|
||||
checked = checkbox.checked = !checkbox.checked;
|
||||
}
|
||||
|
||||
const value = checkbox.value === 'true' ? checked : checkbox.value;
|
||||
updateOption(checkbox.name, value);
|
||||
}
|
||||
|
||||
function initialize() {
|
||||
// load languages
|
||||
const selectElem = options.querySelector('select[name=language]');
|
||||
Object.keys(languages).forEach((lang) => {
|
||||
document.body.appendChild(parseHTML(`<script src="../dist/js/locales/${lang}.js"></script>`));
|
||||
selectElem.appendChild(parseHTML(`<option value="${lang}">${lang} – ${languages[lang]}</option>`));
|
||||
});
|
||||
|
||||
document.querySelector('.toggle-btn').addEventListener('click', () => {
|
||||
document.body.classList.toggle('open');
|
||||
});
|
||||
|
||||
document.querySelectorAll('.code-wrap pre').forEach((el) => {
|
||||
el.textContent = getBeforeShowFnSrc(el.id.replace('code-', ''));
|
||||
});
|
||||
|
||||
// collapsibles
|
||||
document.querySelectorAll('.collapse-button').forEach((el) => {
|
||||
el.addEventListener('click', () => {
|
||||
const target = document.getElementById(el.dataset.target);
|
||||
el.classList.toggle('is-active');
|
||||
target.classList.toggle('is-active');
|
||||
});
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user