The mobile-friendly, responsive, and lightweight jQuery date & time input picker.

Overview

pickadate Build status: master jsDelivr Hits

The mobile-friendly, responsive, and lightweight jQuery date & time input picker.

Join the community on Spectrum

To get started, check out the:

Homepage - Date picker - Time picker - API

To get it:

Download the latest stable build

or

git clone git://github.com/amsul/pickadate.js.git

or

bower install pickadate


Library files

The lib folder includes the library files with a compressed folder containing the minified counter-parts. These files are minified using Grunt.

Pickers

There are three picker files:

  • picker.js The core file (required before any other picker)
  • picker.date.js The date picker
  • picker.time.js The time picker

To support old browsers, namely IE8, also include the legacy.js file.

Themes

All themes are generated using LESS and compiled from the lib/themes-source folder into the lib/themes folder.

There are two themes:

  • default.css The default modal-style theme
  • classic.css The classic dropdown-style theme

Based on the theme, pick the relevant picker styles:

  • default.date.css and default.time.css when using the default theme
  • classic.date.css and classic.time.css when using the classic theme

** For languages with text flowing from right-to-left, also include the rtl.css stylesheet.

Translations

The translations live in the lib/translations folder. There are currently 43 language translations included.


Building with Grunt

Grunt ~0.4.5 is used to build the project files. To get started, clone the project and then run:

  • npm install to get the required node modules.
  • grunt test --verbose to confirm you have all the dependencies.

Type out grunt --help to see a list of all the tasks available. The generally used tasks are:

  • grunt develop compiles the LESS files and watches for any source changes.
  • grunt package compiles and then minifies the source files.
  • grunt test tests the entire package.

Styling with LESS

The picker themes are built using LESS with Grunt. To customize the CSS output, read the _variables.less file in the lib/themes-source folder. You can specify:

  • colors for the theme,
  • sizes for the picker,
  • media-query breakpoints,
  • and a whole bunch of other stuff.

Make sure to run the grunt develop task before making any changes to compile it into CSS.


Bugs

Before opening a new issue, please search the existing Issues for anything similar – there might already be an answer to your problem. You might also wanna check out the Contributing guide.


Contributing

Before contributing any code to the project, please take a look at the Contributing guide.

If there’s anything you’d like to discuss, we like to hang out on Spectrum.

Spectrum


Support

If you find this library useful and would like to see further development, consider supporting it.




© 2014 Amsul

Licensed under MIT

Comments
  • Chrome version 73 causing problems

    Chrome version 73 causing problems

    In Chrome 73 desktop we're seeing various odd behaviors in both the newest version of pickadate and the older version we were using.

    One user reported the datepicker opens as soon as the page loads instead of waiting for him to click on the input. (unable to reproduce as of yet).

    I myself am seeing the datepicker close and run the OnClose event immediately after clicking to open it.

    On the examples on your demo site https://amsul.ca/pickadate.js/, I'm seeing what appears to be the datepicker opening twice; it flashes up, then flashes down, then flashes up again. In the console, for the events example that logs the events I see "opened up", "closed now", and then "opened up" again.

    I don't see any of this behavior in Edge or Firefox. I also didn't see the problem in Chrome 72,

    opened by hydemalion 60
  • Picker doesn't open on iOS 8

    Picker doesn't open on iOS 8

    The demos on http://amsul.ca/pickadate.js/ do not work properly on iOS 8. I am only testing on an iPad but am aware of similar issues on iPhone.

    The opaque background shows but the position of the calendar is way down at the bottom, so it can mean a lot of scrolling.

    iOS 8 possibly changed how it handles CSS position: fixed?

    bug 
    opened by leads 36
  • Brazil timezone: Two dates repeating on october month.

    Brazil timezone: Two dates repeating on october month.

    Hi there! Found a little bug on the pickadate widget... don't know if this is a specific bug, because i'm from Brazil. Anyway, i attach a image showing the bug... The october month shows two 19 days... it doesn't matter the year i choose, the same thing occours to other days in october.

    pickadata

    Thanks

    bug 
    opened by rdenadai 24
  • Datepicker Editable Broken

    Datepicker Editable Broken

    Hi,

    $('.datepicker').pickadate({ editable: true }); Clicking on the input does nothing.

    I can provide a codepen if required however it is also broken on the documentation here

    opened by craigpotter 21
  • No value by default

    No value by default

    Everything seems work okay if I actually click the field and select a date, but if i just submit a form with the default value (Which shows fine), the $_POST data for my pickadate field is null.

    wontfix / invalid 
    opened by jackmcdade 21
  • Add Time

    Add Time

    Hi,

    I would like to add the time to your wonderful date picker.

    I did something like:

    var now = new Date();
    var $custom_date = $( '#input_03' ).pickadate({
        format: 'You selected: dddd, dd/mm/yyyy '+ now.toTimeString(),
        format_submit: 'yyyy-mm-dd HH:MM:ss'
    }
    

    but the submitted time is HH:MM:ss. How can I handle that?

    request todo 
    opened by pvledoux 20
  • fixed bugs and added a today function

    fixed bugs and added a today function

    bug fixes: Removed "s" from "autofocus" and "u" "date-value" Removed two obsolete input forms

    Added a function to return current date

    bug feature 
    opened by elieobeid7 18
  • 4.0.0 week numbers

    4.0.0 week numbers

    Here is a start on the week numbers functionality we talked about. I stopped when I got a failing unit test linked to shadow.js so I could get some feedback from you.

    This is related to a pull request on the older version of the library, that you requested be ported to 4.0.0

    todo feature awaiting reply 
    opened by plumpNation 17
  • 3.5.5: if

    3.5.5: if "editable" is true, pickadate doesn't open

    Here's my code:

    $('input[type="date"]', $container).pickadate({
                editable: true,
                format: "..."
                formatSubmit: 'yyyy-mm-dd',
                firstDay: 0
                max: 1,
                onSet: function() {...}
            })
    

    On pickadate 3.5.4 this works as expected.

    On pickadate 3.5.5 the code above creates the pickadate's (values are formatted, etc), but clicking on the input doesn't make the picker appear. Removing the "editable" options makes it work again.

    Tested by switching versions with bower.

    duplicate 
    opened by ItalyPaleAle 16
  • Wrong date being selected

    Wrong date being selected

    Hi. I raised a bug on an Angular directive using this plugin. However I don't think it's an Angular thing, I think there is a bug with the latest version.

    I downloaded the zip from GIthub and ran both index.htm and date.htm.

    I think it's an issue when selecting an older date or a date several months in the future.

    Select a date in the past, say 7th October 2014, and it selects October 8th (says so in the and highlights the 8th when reopening the calendar). Tested in both Chrome and Firefox on Mac.

    Anyone else getting this issue?

    bug todo 
    opened by leads 16
  • pickadate appears disabled in bootstrap 3

    pickadate appears disabled in bootstrap 3

    Given the ubiquity of bootstrap, it would be great if pickadate could work around it.

    Namely, by setting the readOnly flag on the input element, bootstrap styles the element as being disabled (i.e. not editable). This is confusing for the users, since they are led to believe that the date cannot be changed (and in fact, it can!).

    Setting the "editable" property fixes this problem, but creates another (now the field can be edited with the keyboard). A better fix would be to disable input of the field via javascript instead of using the css property.

    Using readOnly on the CSS is misleading, since the input field is NOT readOnly, it can be changed, except that the change will be performed through the pickadate UI and not by typing.

    PS: This issue is related to #443, except that I am reporting a problem on usability, where the reporter of #443 was instead trying to figure out how to disable "for real" the input.

    solved 
    opened by acornejo 16
  • Legacy.js error with Microsoft Edge

    Legacy.js error with Microsoft Edge

    I'm not sure if it is the indexOf or filter that throw this error but I have this error logged: Uncaught TypeError: t[o] is not a function

    For user using Edge (107.0.1418.42) browser running on Windows 10.

    opened by Spir 0
  • pickatime with classic theme is broken on Chrome 107

    pickatime with classic theme is broken on Chrome 107

    Hello, I've seen that with Chrome update 106 to 107 (my current version is 107.0.5304.87 (Official Build) (64-bit) on Linux Mint 20.03 ) the picker list items are not displayed correctly. An example of this can be seen for example at https://amsul.ca/pickadate.js/time/ image

    With Firefox, the list are displayed as expect image

    Solution: https://github.com/amsul/pickadate.js/issues/1243#issuecomment-1302542717

    opened by abelgarcia2 8
  • Date picker can't display well when on click

    Date picker can't display well when on click

    When click on the date picker, it sometimes flash but did not popup. It seem showed but immediately close down. Would like to know how to solve this.

    /html/

                <div class="date-wrap">
                   <p>From Date:</p>
                    <div class="datepicker-bg"><input type="text" id="fromDate" onclick="getTime('start');" maxlength="50" class="txt-ipt" placeholder="From Date"/><i></i></div>
                </div>
                <div class="date-wrap">
                   <p>To Date:</p>
                   <div class="datepicker-bg"><input type="text" id="toDate" onclick="getTime('end');" maxlength="50" class="txt-ipt" placeholder="To Date"/><i></i></div>
                </div>
    

    /jquery/ $(document).ready(function() { /date picker/ /from date/ var from_$input = $('#fromDate').pickadate(), from_picker = from_$input.pickadate('picker')

    	/*to date*/
    	var to_$input = $('#toDate').pickadate(),
    	to_picker = to_$input.pickadate('picker')
    	
    	// Check if there’s a “from” or “to” date to start with.
    	if ( from_picker.get('value') ) {
    		to_picker.set('min', from_picker.get('select'))
    	}
    	if ( to_picker.get('value') ) {
    		from_picker.set('max', to_picker.get('select'))
    	}
    
    	// When something is selected, update the “from” and “to” limits.
    	from_picker.on('set', function(event) {
    		if ( event.select ) {
    			to_picker.set('min', from_picker.get('select'))    
    		}
    		else if ( 'clear' in event ) {
    			to_picker.set('min', false)
    		}
    	})
    	to_picker.on('set', function(event) {
    		if ( event.select ) {
    			from_picker.set('max', to_picker.get('select'))
    		}
    		else if ( 'clear' in event ) {
    			from_picker.set('max', false)
    		}
    	})
    
    });
    
    function getTime(value){
        if (value == 'start') {
            currentStart = $('#fromDate').val() +' 00:00:00';
        }else if(value == 'end') {
            currentEnd = $('#toDate').val() +' 23:59:59';
        }
    
    }
    
    opened by Lipchen92 0
  • iphone don't work

    iphone don't work

    it works fine on android but on all apple devices i get this effect

    https://user-images.githubusercontent.com/11315419/174358561-ad0ac1e6-d6ef-4aa1-8cd6-984d541125b0.mp4

    https://user-images.githubusercontent.com/11315419/174358574-5da2777f-4c0f-4528-898e-9261c172af7f.mp4

    opened by enricodeveloper 0
  • `getRealEventTarget` should use `Event.composedPath()` instead of `Event.path`

    `getRealEventTarget` should use `Event.composedPath()` instead of `Event.path`

    https://github.com/amsul/pickadate.js/blob/0fd34eab2b4127bc93dedca70285f1d38eb89983/lib/picker.js#L996-L1017

    getRealEventTarget() uses Event.path, which is a non-standard API available only in Chromium-based browsers.

    It should instead use Event.composedPath() [1], which is a standard API that returns the same result but is supported by all major browsers [2].

    Chromium is also deprecating Event.path in favor of Event.composedPath().

    See: [1] https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath [2] https://caniuse.com/?search=Event.composedPath [3] https://bugs.chromium.org/p/chromium/issues/detail?id=1277431

    opened by xiaochengh 0
Releases(v5.0.0-alpha.3)
Owner
I design stuff and write a bunch of if-statements. If I'm feeling rebellious, I'll even write for-loops.
null
:calendar: Customizable date (and time) picker. Opt-in UI, no jQuery!

rome Customizable date (and time) picker. Opt-in UI, no jQuery! Rome wasn't built in a day. Browser support includes every sane browser and IE7+. Demo

Nicolás Bevacqua 2.9k Dec 10, 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
Duet Date Picker is an open source version of Duet Design System’s accessible date picker. Try live example at https://duetds.github.io/date-picker/

Duet Date Picker Duet Date Picker is an open source version of Duet Design System’s accessible date picker. Duet Date Picker can be implemented and us

Duet Design System 1.6k Jan 6, 2023
Nepali Multi Date Picker for jQuery. Supports both single date selections and multiple date selection.

Nepali Multi Date Picker A simple yet powerful date picker based in Nepali calendar. Supports both single date selections and multiple date selection.

Sanil Shakya 4 May 23, 2022
A date picker web component, and spiritual successor to duet date picker

<date-picker> A date picker web component, based on duet date picker, except authored with Lit and using shadow DOM. This is a work in progress. Todo:

Nick Williams 25 Aug 3, 2022
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
A super-lightweight, highly configurable, cross-browser date / time picker jQuery plugin

Zebra Datepicker A super-lightweight, highly configurable, cross-browser date/time picker jQuery plugin Zebra_Datepicker is a small yet and highly con

Stefan Gabos 391 Dec 29, 2022
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
:calendar: Customizable date (and time) picker. Opt-in UI, no jQuery!

rome Customizable date (and time) picker. Opt-in UI, no jQuery! Rome wasn't built in a day. Browser support includes every sane browser and IE7+. Demo

Nicolás Bevacqua 2.9k Dec 10, 2022
A simplified jQuery date and time picker

jSunPicker A simplified jQuery date and time picker Why another Date picker? There are numerous date, time pickers out there. However, each of those l

null 1 May 31, 2022
Simple date and time picker in vanilla javascript

simplepicker Simple datetime picker in vanilla javascript. This project is mostly based on material-datetime-picker, but without it relying on externa

Priyank Patel 51 Jul 18, 2022
A JavaScript component that is a date & time range picker, no need to build, no dependencies except Moment.js, that is based on Dan Grossman's bootstrap-daterangepicker.

vanilla-datetimerange-picker Overview. A JavaScript component that is a date & time range picker, no need to build, no dependencies except Moment.js,

null 22 Dec 6, 2022
Bootstrap Persian/Gregorian Date Time Picker

MD.BootstrapPersianDateTimePicker Bootstrap 5+ Persian And Gregorian Date Time Picker Major changes: Using Bootstrap 5 jQuery Removed Rewrite all code

Mohammad Dayyan 305 Nov 23, 2022
A jQuery Plug-in to select the time with a clock inspired by the Android time picker.

Clock Timepicker Plugin for jQuery See a demo here A free jQuery Plug-in to select the time with a clock inspired by the Android time picker. This plu

Andy 51 Dec 22, 2022
Nepali Date Picker jQuery Plugin 🇳🇵

Nepali Date Picker Nepali Date Picker jQuery Plugin for everyone. ???? Installation npm install nepali-date-picker Demo and Documentation https://leap

Leapfrog Technology 70 Sep 29, 2022
this is a single-page web application. we built a book website where the user can add , remove and display books. we used modules to implement these functionalities. also, we used the Date class to display the date and time.

Awsome Books In this Project, we have built A Books websites. Built With ?? HTML CSS javascript Git & Github Live Demo Here you can find the live Demo

Nedjwa Bouraiou 10 Aug 3, 2022
Turn an HTML input box to a duration picker, without jQuery

html-duration-picker.js html-duration-picker.js is a very tiny JS library used for transforming a native HTML text input into a duration picker. The a

Dan Chif 27 Oct 19, 2022
Tool Cool Color Picker is a color picker library written in typescript and using web component technologies.

Tool Cool Color Picker Tool Cool Color Picker is a color picker library written in typescript and using web component technologies. Check out the demo

Tool Cool 13 Oct 23, 2022
Skeleton: A Dead Simple, Responsive Boilerplate for Mobile-Friendly Development

Skeleton Skeleton is a simple, responsive boilerplate to kickstart any responsive project. Check out http://getskeleton.com for documentation and deta

Dave Gamache 18.8k Dec 29, 2022
Colr Pickr, a vanilla JavaScript color picker component built with SVGs, with features like saving colors. Similar design to the chrome-dev-tools color picker.

Colr Pickr Colr Pickr, a vanilla JavaScript color picking component built with SVGs, with features like saving colors. Similar design to the chrome-de

TEK 27 Jun 27, 2022