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

screenshot

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>

Keywords

FAQs

What is tb-datepicker-js?

Is tb-datepicker-js popular?

Is tb-datepicker-js well maintained?

Last updated on 18 Nov 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install