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

Related tags

Calendar Pikaday
Overview

Pikaday

NPM version License Downloads

A refreshing JavaScript Datepicker

  • Lightweight (less than 5kb minified and gzipped)
  • No dependencies (but plays well with Moment.js)
  • Modular CSS classes for easy styling

Try Pikaday Demo →

Pikaday Screenshot

Production ready? Since version 1.0.0 Pikaday is stable and used in production. If you do however find bugs or have feature requests please submit them to the GitHub issue tracker. Also see the changelog

Installation

You can install Pikaday as an NPM package:

npm install pikaday

Or link directly to the CDN:

<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>

Styles

You will also need to include Pikaday CSS file. This step depends on how Pikaday was installed. Either import from NPM:

@import './node_modules/pikaday/css/pikaday.css';

Or link to the CDN:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">

Usage

Pikaday can be bound to an input field:

<input type="text" id="datepicker">

Add the JavaScript to the end of your document:

<script src="pikaday.js"></script>
<script>
    var picker = new Pikaday({ field: document.getElementById('datepicker') });
</script>

If you're using jQuery make sure to pass only the first element:

var picker = new Pikaday({ field: $('#datepicker')[0] });

If the Pikaday instance is not bound to a field you can append the element anywhere:

var field = document.getElementById('datepicker');
var picker = new Pikaday({
    onSelect: function(date) {
        field.value = picker.toString();
    }
});
field.parentNode.insertBefore(picker.el, field.nextSibling);

Formatting

By default, dates are formatted and parsed using standard JavaScript Date object. If Moment.js is available in scope, it will be used to format and parse input values. You can pass an additional format option to the configuration which will be passed to the moment constructor. See the moment.js example for a full version.

<input type="text" id="datepicker" value="9 Oct 2014">

<script src="moment.js"></script>
<script src="pikaday.js"></script>
<script>
    var picker = new Pikaday({
        field: document.getElementById('datepicker'),
        format: 'D MMM YYYY',
        onSelect: function() {
            console.log(this.getMoment().format('Do MMMM YYYY'));
        }
    });
</script>

For more advanced and flexible formatting you can pass your own toString function to the configuration which will be used to format the date object. This function has the following signature:

toString(date, format = 'YYYY-MM-DD')

You should return a string from it.

Be careful, though. If the formatted string that you return cannot be correctly parsed by the Date.parse method (or by moment if it is available), then you must provide your own parse function in the config. This function will be passed the formatted string and the format:

parse(dateString, format = 'YYYY-MM-DD')

var picker = new Pikaday({
    field: document.getElementById('datepicker'),
    format: 'D/M/YYYY',
    toString(date, format) {
        // you should do formatting based on the passed format,
        // but we will just return 'D/M/YYYY' for simplicity
        const day = date.getDate();
        const month = date.getMonth() + 1;
        const year = date.getFullYear();
        return `${day}/${month}/${year}`;
    },
    parse(dateString, format) {
        // dateString is the result of `toString` method
        const parts = dateString.split('/');
        const day = parseInt(parts[0], 10);
        const month = parseInt(parts[1], 10) - 1;
        const year = parseInt(parts[2], 10);
        return new Date(year, month, day);
    }
});

Configuration

As the examples demonstrate above Pikaday has many useful options:

  • field bind the datepicker to a form field
  • trigger use a different element to trigger opening the datepicker, see trigger example (default to field)
  • bound automatically show/hide the datepicker on field focus (default true if field is set)
  • ariaLabel data-attribute on the input field with an aria assistance text (only applied when bound is set)
  • position preferred position of the datepicker relative to the form field, e.g.: top right, bottom right Note: automatic adjustment may occur to avoid datepicker from being displayed outside the viewport, see positions example (default to 'bottom left')
  • reposition can be set to false to not reposition datepicker within the viewport, forcing it to take the configured position (default: true)
  • container DOM node to render calendar into, see container example (default: undefined)
  • format the default output format for .toString() and field value (requires Moment.js for custom formatting)
  • formatStrict the default flag for moment's strict date parsing (requires Moment.js for custom formatting)
  • toString(date, format) function which will be used for custom formatting. This function will take precedence over moment.
  • parse(dateString, format) function which will be used for parsing input string and getting a date object from it. This function will take precedence over moment.
  • defaultDate the initial date to view when first opened
  • setDefaultDate Boolean (true/false). make the defaultDate the initial selected value
  • firstDay first day of the week (0: Sunday, 1: Monday, etc)
  • minDate the minimum/earliest date that can be selected (this should be a native Date object - e.g. new Date() or moment().toDate())
  • maxDate the maximum/latest date that can be selected (this should be a native Date object - e.g. new Date() or moment().toDate())
  • disableWeekends disallow selection of Saturdays or Sundays
  • disableDayFn callback function that gets passed a Date object for each day in view. Should return true to disable selection of that day.
  • yearRange number of years either side (e.g. 10) or array of upper/lower range (e.g. [1900,2015])
  • showWeekNumber show the ISO week number at the head of the row (default false)
  • pickWholeWeek select a whole week instead of a day (default false)
  • isRTL reverse the calendar for right-to-left languages
  • i18n language defaults for month and weekday names (see internationalization below)
  • yearSuffix additional text to append to the year in the title
  • showMonthAfterYear render the month after year in the title (default false)
  • showDaysInNextAndPreviousMonths render days of the calendar grid that fall in the next or previous months (default: false)
  • enableSelectionDaysInNextAndPreviousMonths allows user to select date that is in the next or previous months (default: false)
  • numberOfMonths number of visible calendars
  • mainCalendar when numberOfMonths is used, this will help you to choose where the main calendar will be (default left, can be set to right). Only used for the first display or when a selected date is not already visible
  • events array of dates that you would like to differentiate from regular days (e.g. ['Sat Jun 28 2017', 'Sun Jun 29 2017', 'Tue Jul 01 2017',])
  • theme define a classname that can be used as a hook for styling different themes, see theme example (default null)
  • blurFieldOnSelect defines if the field is blurred when a date is selected (default true)
  • onSelect callback function for when a date is selected
  • onOpen callback function for when the picker becomes visible
  • onClose callback function for when the picker is hidden
  • onDraw callback function for when the picker draws a new month
  • keyboardInput enable keyboard input support (default true)

Styling

If the reposition configuration-option is enabled (default), Pikaday will apply CSS-classes to the datepicker according to how it is positioned:

  • top-aligned
  • left-aligned
  • right-aligned
  • bottom-aligned

Note that the DOM element at any time will typically have 2 CSS-classes (eg. top-aligned right-aligned etc).

jQuery Plugin

The normal version of Pikaday does not require jQuery, however there is a jQuery plugin if that floats your boat (see plugins/pikaday.jquery.js in the repository). This version requires jQuery, naturally, and can be used like other plugins: See the jQuery example for a full version.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="pikaday.js"></script>
<script src="plugins/pikaday.jquery.js"></script>
<script>

// activate datepickers for all elements with a class of `datepicker`
$('.datepicker').pikaday({ firstDay: 1 });

// chain a few methods for the first datepicker, jQuery style!
$('.datepicker').eq(0).pikaday('show').pikaday('gotoYear', 2042);

</script>

AMD support

If you use a modular script loader, Pikaday is not bound to the global object and will fit nicely in your build process. You can require Pikaday just like any other module. See the AMD example for a full version.

require(['pikaday'], function(Pikaday) {
    var picker = new Pikaday({ field: document.getElementById('datepicker') });
});

The same applies for the jQuery plugin mentioned above. See the jQuery AMD example for a full version.

require(['jquery', 'pikaday.jquery'], function($) {
    $('#datepicker').pikaday();
});

CommonJS module support

If you use a CommonJS compatible environment you can use the require function to import Pikaday.

var pikaday = require('pikaday');

When you bundle all your required modules with Browserify and you don't use Moment.js specify the ignore option:

browserify main.js -o bundle.js -i moment

Ruby on Rails

If you're using Ruby on Rails, make sure to check out the Pikaday gem.

Methods

You can control the date picker after creation:

var picker = new Pikaday({ field: document.getElementById('datepicker') });

Get and set date

picker.toString('YYYY-MM-DD')

Returns the selected date in a string format. If Moment.js exists (recommended) then Pikaday can return any format that Moment understands. You can also provide your own toString function and do the formatting yourself. Read more in the formatting section.

If neither moment object exists nor toString function is provided, JavaScript's default .toDateString() method will be used.

picker.getDate()

Returns a basic JavaScript Date object of the selected day, or null if no selection.

picker.setDate('2015-01-01')

Set the current selection. This will be restricted within the bounds of minDate and maxDate options if they're specified. You can optionally pass a boolean as the second parameter to prevent triggering of the onSelect callback (true), allowing the date to be set silently.

picker.getMoment()

Returns a Moment.js object for the selected date (Moment must be loaded before Pikaday).

picker.setMoment(moment('14th February 2014', 'DDo MMMM YYYY'))

Set the current selection with a Moment.js object (see setDate for details).

Clear and reset date

picker.clear()

Will clear and reset the input where picker is bound to.

Change current view

picker.gotoDate(new Date(2014, 1))

Change the current view to see a specific date. This example will jump to February 2014 (month is a zero-based index).

picker.gotoToday()

Shortcut for picker.gotoDate(new Date())

picker.gotoMonth(2)

Change the current view by month (0: January, 1: Februrary, etc).

picker.nextMonth() picker.prevMonth()

Go to the next or previous month (this will change year if necessary).

picker.gotoYear()

Change the year being viewed.

picker.setMinDate()

Update the minimum/earliest date that can be selected.

picker.setMaxDate()

Update the maximum/latest date that can be selected.

picker.setStartRange()

Update the range start date. For using two Pikaday instances to select a date range.

picker.setEndRange()

Update the range end date. For using two Pikaday instances to select a date range.

Show and hide datepicker

picker.isVisible()

Returns true or false.

picker.show()

Make the picker visible.

picker.adjustPosition()

Recalculate and change the position of the picker.

picker.hide()

Hide the picker making it invisible.

picker.destroy()

Hide the picker and remove all event listeners — no going back!

Internationalization

The default i18n configuration format looks like this:

i18n: {
    previousMonth : 'Previous Month',
    nextMonth     : 'Next Month',
    months        : ['January','February','March','April','May','June','July','August','September','October','November','December'],
    weekdays      : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
    weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
}

You must provide 12 months and 7 weekdays (with abbreviations). Always specify weekdays in this order with Sunday first. You can change the firstDay option to reorder if necessary (0: Sunday, 1: Monday, etc). You can also set isRTL to true for languages that are read right-to-left.

Extensions

Timepicker

Pikaday is a pure datepicker. It will not support picking a time of day. However, there have been efforts to add time support to Pikaday. See #1 and #18. These reside in their own fork.

You can use the work @owenmead did most recently at owenmead/Pikaday A more simple time selection approach done by @xeeali at xeeali/Pikaday is based on version 1.2.0. Also @stas has a fork stas/Pikaday, but is now quite old

Browser Compatibility

  • IE 7+
  • Chrome 8+
  • Firefox 3.5+
  • Safari 3+
  • Opera 10.6+

browser compatibility


Authors

Thanks to @shoogledesigns for the name.

Copyright © 2014 David Bushell | BSD & MIT license

Comments
  • Support for time picker. See #1

    Support for time picker. See #1

    I have some time to dedicate to time picker functionality.

    This pull request is a WIP mostly to get some people feedback on the look and feel.

    Right now it looks like this:

    Please share some of the timepicker options you consider the best in terms of UI/UX.

    opened by stas 24
  • Add an optional formatter function option

    Add an optional formatter function option

    This is a pull request for https://github.com/dbushell/Pikaday/issues/653

    I decided to give a "formatter" function a higher proriority than formatting with moment: if someone uses this option he might still wish to do custom formatting even if moment is available (and may be even with its help).

    Again, this is the logic (it pretty much preserves the current flow):

    • if current date is not a valid object, return ''
    • if custom formatter is provided, use it and pass current date object to it and a current format string
    • if not, use moment to format date according to format string
    • else use .toDateString()

    If the formatter option is not provided the library behaves the same as before.

    opened by everdimension 21
  • Allow multiple input formats, add onClear callback for better Ember/Knockout/etc integration and allow other date libraries instead of Moment.js

    Allow multiple input formats, add onClear callback for better Ember/Knockout/etc integration and allow other date libraries instead of Moment.js

    Thanks for creating this awesome and yet simple date picker. We are using this library on a fundraising portal raising money for charity so know that its helping make a difference in the world. We needed a few changes to make it easier to integrate with Ember.js so I would like to contribute back to your project.

    This change is loosely based on #57 to add callback on clear/invalid date and also fixes #61, #48, #15, #93, #98. I decided upon onClear for the name of the callback, in the same vein as onSelect, named after the method clearDate() that I extracted from setDate(). Feel free to suggest better names. It was very tempting to call onSelect callback with null for empty/invalid date, but this would most likely break a lot of code by the Pikaday community that relies on the callback always having a valid date so a new callback must be introduced instead. I would also like to add a suite of automated JS tests to improve code quality.

    • Cleaned up setDate() so both null date and invalid date string clear the current selection.
    • Extracted clearDate() method from setDate() for clearing the current selection with options for clearing the input field (if set) and preventing onClear callback.
    • onClear callback is called by clearDate() so users can be notified of invalid/empty date. The user's callback can get the field text value to show a required validation message if empty or invalid date validation message if not empty.
    • onSelect and onClear are useful when integrating with MVC frameworks such as Knockout.js and Ember.js where onSelect and onClear sets and clears the binding/component's date value.
    • Added examples for Knockout (#48) and Ember.
    • clearInvalidInput option can be set to true to automatically clear the input field value (if field is set) on invalid input. This is a simple way of telling the user the entered date is invalid.
    • parseDate() method was extracted from _onInputChange() to remove duplicate date string parsing in Pikaday constructor for defaultDate and in setDate() (was only parsing with JS Date.parse?).
    • parseDate() method was added to Pikaday prototype instead of a helper/private method to allow for overriding both toString() and parseDate() on Pikaday.prototype to support other JS date libraries. See Datejs and Sugar examples.
    • Fixed issue #98 with Datejs where Date.parse() returns null instead of NaN for invalid input which caused a default date of 1/1/1970 in empty input fields.
    • A big feature of Moment.js is that it allows for multiple input formats. inputFormats option was added to allow users to specify an array of allowed input formats. Defaults to the display format. Moment example updated accordingly.
    • Added fix for issue #93 where wrong month is sometimes shown when minDate's year > default selected date. There's a separate issue where setMinDate does not update the internal min/maxMonth and min/maxYear used in draw method.
    • README updated accordingly (including defaultDate expected type #15)
    opened by bjbrewster 21
  • field with Pikaday is automatically going backwards by one day everytime record is edited.

    field with Pikaday is automatically going backwards by one day everytime record is edited.

    I have a field called last_issue on a rails model. If a date exists in the the last_issue field, every time you edit the record, the date appears to be dropping back by one day. Edit a record seven times and your date will be off by a week from where it started.

    I am using the following setting for this field: picker = new Pikaday(field: $("#issue_date")[0])

    Any suggestions as to why this is happening?

    opened by memoht 18
  • how to change Default format Tue Dec 09 2014 to DD/MM/YEAR in textbox

    how to change Default format Tue Dec 09 2014 to DD/MM/YEAR in textbox

    Hi ,

    With Pikaday if I pick a date from the calendar it is showing Day date Mon year Format .I need Something like DD/MM/YEAR ie 09/12/2014.

    Please let me know the what are all the changes that i need to do.

    Thank you Mahesh

    opened by Maheshkani 14
  • replace onmousedown with onmouseup

    replace onmousedown with onmouseup

    is there a chance to replace onmousedown with onmouseup events?

    problem: when clicking on a day in chrome browser, and holding the mouse button a bit longer than normal, while moving the mouse only slightly, the whole page gets "selected" (that means highlighted, starting from the position of the datepicker to the end of page)

    also, the event should not fire when draggin the mouse outside the target's region (the day selected on mousedown)

    opened by forwardever 12
  • Datepicker 'disappears' when choosing month or year, preventing date selection

    Datepicker 'disappears' when choosing month or year, preventing date selection

    On branch master, using either Firefox or Internet Explorer (but not Chrome), it is not possible to use the month or year selectors. When clicking the month or year, the datepicker 'disappears', preventing selection. In fact, clicking anywhere outside one of the day buttons hides the datepicker.

    The demo page does not exhibit this issue, but appears to be a different, unspecified, version.

    opened by mtmacdonald 12
  • SASS/SCSS version of style

    SASS/SCSS version of style

    What do you think about adding scss version of pikaday.css? It has a lot of pros, one is we could easily change route picker class name and in overall rules could become easier to maintain

    opened by theghostbel 11
  • Can't format datepicker result

    Can't format datepicker result

    Hey, thanks for making this simple and light datepicker!

    I'm trying to implement it in a form in Joomla 3, and have tried several different ways to format the date it gives, but no matter what I try, I end up with something like this: "Sat Jun 01 2013".

    It looks nice, but it's not in the format required to pass to this external site's page which I can't change.

    Any idea on why it won't format?

    opened by mikeymileos 11
  • First pass at making Pikaday accessibile

    First pass at making Pikaday accessibile

    First I'd like to give all of the credit to @mrenty. He did pretty much all of the hard work on this and I came in to push it over the line.

    Today is Global Accessibility Awareness Day and one of the things I really wanted to do for GAAD was make Pikaday accessibile. With this datepicker being the go to for the majority of the dev community it's important to me that this plugin is accessibile.

    Here's a video example of what it's like to use this PRs Pikaday with a screen reader: https://www.youtube.com/watch?v=iZhi4nQP5kI

    Here's what it's like to use pikaday with a screen reader today: https://youtu.be/mrUwra6C34U

    CC: @dbushell / @rikkert

    opened by Robdel12 10
  • Throw exception, if Pikaday is initialize twice using the same Element

    Throw exception, if Pikaday is initialize twice using the same Element

    If (on accident) Pikaday is initialized twice for a single DOM Element, the two instances will create a loop, firing change events back and forth (and not stopping, because e.firedBy is not self).

    Granted, the fault in this case is not in the Library, but in the developer using the Library, but simply throwing an exception, if a user tries to initialize Pikaday multiple times on the same Element would make debugging easier

    opened by j6s 10
  • PLUGIN DOESN'T WORK - pickaday right-hand side of instanceof is not an object

    PLUGIN DOESN'T WORK - pickaday right-hand side of instanceof is not an object

    Not sure if it's just an abandoned project, but none of the examples work: "pickaday right-hand side of instanceof is not an object" for all the examples

    I would recommend people find another plugin and not waste time as I have here.

    opened by jarfer 0
  • arrow keys replace in RTL

    arrow keys replace in RTL

    Hi,

    When isRTL = true, the left/right arrow keys should be replaced, clicking arrow left should move the focus to the left

    I think the keyboard handler should look like this: switch(e.keyCode){ case 13: case 27: if (opts.field) { opts.field.blur(); } break; case 37: if (opts.isRTL) self.adjustDate('add', 1); else self.adjustDate('subtract', 1); break; case 38: self.adjustDate('subtract', 7); break; case 39: if (opts.isRTL) self.adjustDate('subtract', 1); else self.adjustDate('add', 1); break;

    opened by appa1303 0
  • Fix for the Screen reader accessibility in the date select of the calendar

    Fix for the Screen reader accessibility in the date select of the calendar

    Issue: While the screen reader is activated, when trying to select a date the screen reader would say out ‘month month year year’ for example ‘April April 2022 2022’ instead of a date like XX.XX.20XX

    Fix: With the fix with this PR it should say out the currently selected date in the calendar modal. The fix is also optimised to say out the date in the date format of the system itself as well.

    Before fix After fix

    opened by aatifishtiaq 0
  • Change background color of days

    Change background color of days

    Is there an option to change the background color of certain days in the same way you can select days that need to be disabled? I don't need to disable days, only color them green, orange or red.

    opened by maxdegroot4 1
Releases(1.8.2)
  • 1.8.2(Oct 22, 2020)

    Fixes:

    • Properly parse date string, fixes #735 #755 #688
    • Cleaner packages, see #542 #580
    • Add space for XHTML, fixes #526
    • CSS fixes, see #431 #430 #809 #883 #237 #869 #869 #730
    • Add clear functionality, see #720
    • Use unique IDs, fixes #650
    • Bubble event on left arrow, fixes #710
    • Show week numbers based on ISO 8601 by default, fixes #388 #825
    Source code(tar.gz)
    Source code(zip)
  • 1.8.0(Oct 17, 2018)

    • Move to github organisation Pikaday/Pikaday
    • Add CSS-classes indicating position
    • Remove the Moment.js optional dependency
    • Add aria label text configuration
    Source code(tar.gz)
    Source code(zip)
  • 1.7.0(Oct 17, 2018)

  • 1.6.1(Jun 14, 2017)

  • 1.6.0(May 31, 2017)

    Adds:

    • Custom parsers, see #613
    • Pick a whole week, see #516
    • Events option: dates that you would like to differentiate from regular days, see #152
    • Configure if field is blurred when date is selected, see #631

    Fixes:

    • Re-introduce correct null behavor, fixes #654
    • The (re)position issue, see #643, #642
    • Prevent error when no field is bound, fixes #611
    Source code(tar.gz)
    Source code(zip)
  • 1.5.1(Oct 27, 2016)

    Adds:

    • Make Pikaday accessibile, see #522
    • Add possibility to reset the max and min date to the date picker
    • Show days in next and previous months

    Fixes:

    • Make Pikaday XHTML compatible, see #492
    • Remove unnecessary setTimeout call, fixes #496
    • Make disabled buttons not clickable in IE 10 and below, fixes #288
    Source code(tar.gz)
    Source code(zip)
  • 1.4.0(Oct 30, 2015)

    Fixes:

    • invalid selector for next and prev buttons, see #410
    • redraw after reset, see #432
    • Add #389. see #276, #301, #303, #324, #366 and #386
    • remove data after pikaday destroy, see #382
    Source code(tar.gz)
    Source code(zip)
  • 1.3.2(Feb 17, 2015)

  • 1.3.1(Jan 13, 2015)

  • 1.3.0(Jan 9, 2015)

    This release adds the following:

    • Configurable number of shown months, see #76
    • Add unit tests with ci: testling
    • Configuable container to render calendar into
    • Option to show week numbers, see #147
    • Positioning is now optional, see #192

    Fixes:

    • Moving Through Months Can Cause Calendar To "Bounce Around", see #79
    • blur input field after date selection, see #94
    Source code(tar.gz)
    Source code(zip)
  • 1.2.0(Jan 28, 2014)

    This release adds the following:

    • Component package definition
    • CommonJS support (browserify), see #92 and #96
    • allows for any element to open and bind the datepicker, see #11
    • option for title configuration, see #90
    • option to customise position, see #60

    Fixes:

    • datepicker is never rendered outside viewport, see #8
    • use a px text-indent on .pika-prev/next to prevent Firefox bug, see #119
    Source code(tar.gz)
    Source code(zip)
Owner
null
The mobile-friendly, responsive, and lightweight jQuery date & time input picker.

pickadate The mobile-friendly, responsive, and lightweight jQuery date & time input picker. To get started, check out the: Homepage - Date picker - Ti

null 7.7k Jan 3, 2023
JavaScript Date Range, Date and Time Picker Component

Date Range Picker This date range picker component creates a dropdown menu from which a user can select a range of dates. I created it while building

Dan Grossman 10.6k Dec 29, 2022
Gantt Gantt Gantt Timeline Schedule Calendar [ javascript gantt, js gantt, projects gantt, timeline, scheduler, gantt timeline, reservation timeline, react gantt, angular gantt, vue gantt, svelte gantt, booking manager ]

Gantt Gantt Gantt Timeline Schedule Calendar [ javascript gantt, js gantt, projects gantt, timeline, scheduler, gantt timeline, reservation timeline, react gantt, angular gantt, vue gantt, svelte gantt, booking manager ]

neuronet.io 2.1k 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

null 7.9k Jan 4, 2023
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

null 489 Dec 30, 2022
This is my to-do list website built with html, css and JavaScript. In this project I used Webpack to bundle JavaScript and ES6 modules to write modular JavaScript.

To-Do-List App This is my to-do list website built with html, css and JavaScript. In this project I used Webpack to bundle JavaScript and ES6 modules

Samuel Mwape 18 Sep 20, 2022
TheDatepicker - Pure JavaScript Datepicker 📅

Pure JavaScript Datepicker by Slevomat.cz.

The Datepicker 27 Dec 16, 2022
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:

Habibullah Mohammadi 11 Sep 15, 2022
A lightweight, fully-featured, modular, typescript-compatible javascript library for Paymongo.

paymongo.js A lightweight, fully-featured, modular, typescript-compatible javascript library for PayMongo. Installation npm install paymongo.js # or y

Prince Carlo Juguilon 15 Nov 23, 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

Airbnb 12k 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

Airbnb 12k 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

HackerOne 7k 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

UX Solutions 12.6k 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://

José Antônio 2 Jan 11, 2022
A lightweight and modular front-end framework for developing fast and powerful web interfaces

UIkit UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. Homepage - Learn more about UIkit @getui

null 17.7k Jan 8, 2023
A simple Todo app to add list of books a user has read using HTML, CSS, Webpack, JavaScript and modular architecture

Minimalist A simple Todo app to add list of books a user has read. It is implemented using HTML, CSS, Webpack, JavaScript and modular architecture. A

Elikplim 4 May 9, 2022
:sparkles: Modular, scoped CSS with ES6

CSJS allows you to write modular, scoped CSS with valid JavaScript. Features Extremely simple and lightweight Zero dependencies, ~2KB minified and gzi

Ryan Tsao 577 Nov 18, 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

flatpickr 15.4k Jan 3, 2023
noUiSlider is a lightweight JavaScript range slider library with full multi-touch support. It fits wonderfully in responsive designs and has no dependencies.

noUiSlider noUiSlider is a lightweight JavaScript range slider. No dependencies All modern browsers and IE > 9 are supported Fully responsive Multi-to

Léon Gersen 5.4k Dec 28, 2022
1KB lightweight, fast & powerful JavaScript templating engine with zero dependencies. Compatible with server-side environments like node.js, module loaders like RequireJS and all web browsers.

JavaScript Templates Contents Demo Description Usage Client-side Server-side Requirements API tmpl() function Templates cache Output encoding Local he

Sebastian Tschan 1.7k Jan 3, 2023