TB Datepicker JS
Install
npm install tb-datepicker-js
Changelog
v2.0.0 Bug Fixes that were in Version 1 fixed
v2.1.0 Accessibility Added
v2.1.1 Show Day Buttons Option Added To Change Day + Or - 1 Day
v2.2.0 CSS Media Width Breaks Added
v2.2.1 CSS Media Width Breaks changed For Laptops And Desktops
v2.2.2 CSS Media Width Breaks changed For Laptops And Desktops
v2.3.0 Babel To Convert ES6 into ES5
v2.3.1 Babel To Convert ES6 into ES5 And Minify
v2.4.0 CSS media Query, CSS z-index On The datepicker And The Way The Date Format Is Passed
v2.4.1 CSS Media Width Breaks Added
v2.5.0 Accesibilty Changed, show or hide clear and close buttons, close on mouseleave
Accessibility
When Focused On A Datepicker
ctrl And c = Clear The Date
ctrl And x = Close The DatePicker
Arrow Left = Previous Month
Arrow Right = Next Month
Arrow Up = Next Day
Arrow Down = Previous Day
Options
showDayChangeButtons: true
close: true
clear: true
format: 'dd/mm/yyyy' or 'yyyy-mm-dd' required
Setup
Copy The Installed dist directory in your node_modules folder for this package to your public directory
<script src="/dist/js/tb-datepicker.js"></script>
<link rel="stylesheet" href='/dist/css/tb-datepicker.css'>
Tests
How It Works
By Adding A Unique id To An Input
If A date picker Has No Value Then Todays Month And Year Will Be Selected When Opened
See Examples Below In The JS section
The datepicker JavaScript Uses My Package
https://www.npmjs.com/package/tb-no-more-get-document-by-id
This Means You Don't Have To Keep Writing document.getElementById('id1');
You Can Then Concat A datepicker Function That Is Prototyped
HTML
<link rel="stylesheet" href="/dist/css/datepicker.css">
<script src="/dist/js/tb-datepicker.js"></script>
<input type="text" class="tb-datepicker" style="margin-right: 100px" id="id1" value="12/11/2021">
<input type="text" class="tb-datepicker" style="margin-right: 100px" id="id2" value="12/10/2021">
<input type="text" class="tb-datepicker" style="margin-right: 100px" id="id3" value="12/09/2021">
<input type="text" class="tb-datepicker" style="margin-right: 100px" id="id4" value="12/10/2021">
<input type="text" class="tb-datepicker" style="margin-right: 100px" id="id5">
JS
//create the datepickers
$tb('#id1').datepicker({format: 'dd/mm/yyyy'});
$tb('#id2').datepicker({format: 'dd/mm/yyyy'});
$tb('#id3').datepicker({format: 'dd/mm/yyyy'});
$tb('#id4').datepicker({format: 'dd/mm/yyyy'});
$tb('#id5').datepicker({format: 'dd/mm/yyyy'});
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TB Datepicker</title>
<script src="/dist/js/tb-datepicker.js"></script>
<link rel="stylesheet" href="/dist/css/tb-datepicker.css">
</head>
<body>
<input type="text" class="tb-datepicker" style="margin-right: 100px" id="id1" value="12/11/2021">
<input type="text" class="tb-datepicker" style="margin-right: 100px" id="id2" value="01/02/2020">
<input type="text" class="tb-datepicker" style="margin-right: 100px" id="id3" value="01/04/2021">
<input type="text" class="tb-datepicker" style="margin-right: 100px" id="id4" value="12/10/2021">
<input type="text" class="tb-datepicker" style="margin-right: 100px" id="id5">
<script>
//create the datepickers
$tb('#id1').datepicker({ format: 'dd/mm/yyyy'});
$tb('#id2').datepicker({ format: 'dd/mm/yyyy'});
$tb('#id3').datepicker({ format: 'dd/mm/yyyy'});
$tb('#id4').datepicker({ format: 'dd/mm/yyyy'});
$tb('#id5').datepicker({ format: 'dd/mm/yyyy'});
</script>
</body>
</html>