TheDatepicker - Pure JavaScript Datepicker 📅

The Datepicker

Last update: Dec 16, 2022

Related tags

Date and Time datepicker

Overview

TheDatepicker

Pure JavaScript Datepicker by Slevomat.cz.

Try DEMO

Install:

npm i thedatepicker

Download:

https://github.com/thedatepicker/thedatepicker/releases

Usage:

<html>
    <head>
        <script src="dist/the-datepicker.min.js">script>
        <link rel="stylesheet" href="dist/the-datepicker.css">
    head>
    
    <body>
        <input type="text" id="my-input">
    body>
    
    <script>
        (function () {
            const input = document.getElementById('my-input');
            const datepicker = new TheDatepicker.Datepicker(input);
            datepicker.render();
        })();
    script>
html>

Customize:

TheDatepicker.Datepicker constructor accepts two arguments. First is an instance of input element, second is an instance of container element. Both are optional, but at least one must be present.

For example ...

const container = document.getElementById('my-container'); new TheDatepicker.Datepicker(null, container);">


  

const container = document.getElementById('my-container');
new TheDatepicker.Datepicker(null, container);

... will render datepicker into given

Options:

To see bunch of possible settings, visit https://thedatepicker.github.io/thedatepicker/

For example:

datepicker.options.setMinDate('today');

Enjoy

DEPRECATED: Timezone-enabled JavaScript Date object. Uses Olson zoneinfo files for timezone data.

TimezoneJS.Date A timezone-enabled, drop-in replacement for the stock JavaScript Date. The timezoneJS.Date object is API-compatible with JS Date, with

Nov 20, 2022

lightweight, powerful javascript datetimepicker with no dependencies

flatpickr - javascript datetime picker Motivation Almost every large SPA or project involves date and time input. Browser's native implementations of

Jan 9, 2023

A tiny and fast zero-dependency date-picker built with vanilla Javascript and CSS.

A tiny zero-dependency and framework-agnostic date picker that is incredibly easy to use! Compatible with any web UI framework, vanilla JS projects, and even HTML-only projects!

Jan 22, 2021

Vanillajs-datepicker - A vanilla JavaScript remake of bootstrap-datepicker for Bulma and other CSS frameworks

Vanilla JS Datepicker A vanilla JavaScript remake of bootstrap-datepicker for Bulma and other CSS frameworks This package is written from scratch as E

Dec 30, 2022

A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS

Pikaday A refreshing JavaScript Datepicker Lightweight (less than 5kb minified and gzipped) No dependencies (but plays well with Moment.js) Modular CS

Jan 4, 2023

A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS

Pikaday A refreshing JavaScript Datepicker Lightweight (less than 5kb minified and gzipped) No dependencies (but plays well with Moment.js) Modular CS

Jan 4, 2023

A javascript solar (jalali) datepicker for HTML.

jdatepicker A Javascript solar (jalali) datepicker for HTML. Installation Install via NPM: npm install jdatepicker Install via CDN script src="https:

Sep 15, 2022

An easily internationalizable, mobile-friendly datepicker library for the web

react-dates An easily internationalizable, accessible, mobile-friendly datepicker library for the web. Live Playground For examples of the datepicker

Dec 30, 2022

An easily internationalizable, mobile-friendly datepicker library for the web

react-dates An easily internationalizable, accessible, mobile-friendly datepicker library for the web. Live Playground For examples of the datepicker

Jan 6, 2023

A simple and reusable datepicker component for React

React Date Picker A simple and reusable Datepicker component for React (Demo) Installation The package can be installed via npm: npm install react-dat

Jan 4, 2023

A datepicker for twitter bootstrap (@twbs)

bootstrap-datepicker Versions are incremented according to semver. CDN You can use the CloudFlare powered cdnjs.com on your website. bootstrap-datepic

Jan 7, 2023

A project implementing a datepicker with format dd/MM/yyyy from scratch.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Jan 11, 2022

Pickle tree - Javascript tree component made with pure javascript

Pickle Tree Pickle tree is a tree component written as completely pure javascript. Just send json file to object and have fun :-D Pickle tree does't n

Nov 13, 2022

HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.

HTML Canvas Gauges v2.1 Installation Documentation Add-Ons Special Thanks License This is tiny implementation of highly configurable gauge using pure

Dec 30, 2022

Comments

Bump decode-uri-component from 0.2.0 to 0.2.2
Bumps decode-uri-component from 0.2.0 to 0.2.2.

Release notes

Sourced from decode-uri-component's releases.

v0.2.2

Prevent overwriting previously decoded tokens 980e0bf

https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

v0.2.1

Switch to GitHub workflows 76abc93

Fix issue where decode throws - fixes #6 746ca5d

Update license (#1) 486d7e2

Tidelift tasks a650457

Meta tweaks 66e1c28

https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

Commits

a0eea46 0.2.2

980e0bf Prevent overwriting previously decoded tokens

3c8a373 0.2.1

76abc93 Switch to GitHub workflows

746ca5d Fix issue where decode throws - fixes #6

486d7e2 Update license (#1)

a650457 Tidelift tasks

66e1c28 Meta tweaks

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
how to fix position & request update to change only active date color and today color for calender

hi. this script is so wonderfull. but can anyone help how to fix position of the script? and also how to change only today color and saturday, sunday color only?

opened by liem84 1
How could I set the input date format as 23 Aug 2020?

This is a great library. Thank you for writing it.

How could I get the input date as 23 Aug 2020, instead of 23. 8. 2020. ?

I tried playing with option.setInputFormat but it doesn't seem like this format is available.

opened by dannyvelas 1
Opening picker using button insted of input element
Hi, I have a input element a & button b

& a button

<script> var datepicker = new TheDatepicker.Datepicker(document.getElementById('a')); datepicker.options.setFirstDayOfWeek(0); datepicker.options.setInputFormat('m/d/Y'); datepicker.render(); document.getElementById('b').onclick=function(){datepicker.open()}; </script> This works perfectly fine, but my requirement is that when i click on element a the date picker must not show. How can i achieve this. Thanks in advance for helping me out.
opened by lifecracker87 1