amsul/pickadate.js

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 - 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.

Support

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

---

© 2014 Amsul

Licensed under MIT

pickadate.js's Issues

setDate() does not work for me

First of all, thanks a lot for your great plugin. It looks really sharp and is the lightest I could find.

I couldn't figure out how to make the setDate() method work, I get an error saying
"Object [object Object] has no method 'setDate''

Is that a bug or am I using it wrong ?

var $input = $('#date_from').pickadate({
        format: 'dd mm yyyy',
        onSelect: function(){
            if($('#date_from').val()){
                var value = $('#date_from').val().split(' ');
                $('#date_to').pickadate().setDate(value[2],value[1],value[0]);
            }
        }
    });

Thanks a lot

licensing

Just wondering what the licensing on this is? I don't see it mentioned anywhere in the documentation.

IE support

Are there any callbacks for use in IE7/8?

When selecting a date the fields are not populated with any information.

Thanks!

Picking a date does not populate that inputs value.

When selecting a date, the date text is not updated in the value="" spot of the date picker input.

V2.0 event change does not work

As I need to do something more while date has been changed but Pickadate does not trigger that event at all. Then I came across broadcasting trigger event change in v1.0.5 within this link https://github.com/amsul/pickadate.js/blob/3d451827d3b85619a4804108c082e54b39b6ac8d/pickadate.js. Could u please figure this problem out and put this functionality in Version 2?

Have a pre-defined date range that gets selected

What I need is that the user has to select a period of pre-defined days, e.g. 10. For this it would be nice to have these 10 days highlighted on hover and put into a selected state on click AND it should also take into account disabled days and the date_max so one cannot select if there's not enough time left between disabled days.

Can the demo be updated with a couple of missing examples?

It would be very useful for the demo page to contain an example showing a dynamically filled in date. For example, show how to fill in the date with a day that is always 7 days later than today.

It would be very useful for the demo page to contain an example of extracting the date as a javascript date object. For example, I can use jquery to get the element and then call .val(). This returns the pretty display string. How would one get the underlying date object?

Would it be possible to add such a examples to the demo page or docs page?

Thanks

Is the datepicker responsive?

One of my biggest pains has been finding a datepicker element that works gracefully on mobile browsers. Since this is a new project, I haven't had time to test it yet. So allow me to ask this here: Is this datepicker responsive?

Is it possible to change the default HTML to 3 select boxes?

Take a look at http://jsfiddle.net/RSryb/2/embedded/result/ . It has a lot of valid points, and some silly ones.

I would love for Pickadate to integrate with that kind of base HTML.

Integration features:

1- Pickadate is visible when either of those three selects are focused.

2- The dropdown options change based on month/year selected (so February only has 28 days and Jan has 31 - using the same calculations the calendar uses.

3- If focused on days dropdown, up/down/left/right and numbers navigate the days in both the datepicker and the select boxes.
If focused on months dropdown, up/down/left/right and numbers navigate the months in both the datepicker and the select boxes.
If focused on years dropdown, up/down/left/right and numbers navigate the years in both the datepicker and the select boxes.

Note: Pressing a number takes you to the closest date (in a dropdown pressing 2 should take you to the 2nd and then the 20th, 21st, etc)

Time support

Please, please add Time support to pickadate. This is the by far most essential feature currently by community. You can check other plugins.

Thanks for this great plugin.

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?

Make input editable

Seems there's no way to reopen existing issue.

Anyway this is in reference with issue #45

A commenter sighted that in iOS the popup keyboard will obscure the picker but I think this does not need to be automatic. The ability should be set as an option. A use case would be to set the option to false when on mobile iOS browser.

For the parsing issue, you might want to look at https://github.com/mootools/mootools-more/blob/master/Source/Types/Date.js#L355-L373 which is being used by the mootools datepicker https://github.com/arian/mootools-datepicker/blob/master/README.md

Disclaimer: I've been using the mootools datepicker but I don't want to have two frameworks in the webapp I'm building.

Clear Button

pickadate.js looks awesome. Can you add an option to clear the currently selected date? Perhaps an "X" button.

Mention pickadate.legacy.js in docs.htm

Fantastic work on the pickadate.js. They are look just amazing.

Please consider adding this sentence (from readme.md) to the docs.html:

The pickadate.js script supports IE 9+ by default. To support IE 7+ and other old browsers, include pickadate.legacy.js instead.

It's very easy to miss and it's not mentioned at all in the doc. Keep up the great work.

Demo page not working in IE9 or IE10

Tested through browser stack.

Is the legacy script expected to work with these browsers?

Exclude days

I noticed that there isn't a way to exclude days of the week (ie. Saturdays and Sundays).

It's beyond my current skill level; I was just curious if it's something others would want/is planned for the future.

format not working?

Great work. I have one issue. I set the format parameter to {format: "dd-mm-yyyy"} but the output is 1 November, 2012 (OSX, Safari 6.0.1)

dp_fieldname_first.datepicker({
    format: "dd-mm-yyyy",
    months_full: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
    weekdays_short: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
    date_min: false,
    date_max: false,
});

The best way to get the calendar object itself?

I'm trying to remote control the calendar widget. I peered into the code and it seemed the way to get the calendar object was to do:

cal = $('SELECT THE TEXT FIELD').data("widgets.datepicker").calendar;

Then I can:

cal.close();
cal.open();

Is this the best way? Or are these meant to be internal methods only?

can't get it working with some options

Hello I'm just following the docs, but my calendars can worked with given customization:

 $('.datepicker').pickadate({
  dateMin: -8,
  dateMax: true,
  firstDay: 1,
  yearSelector: false,
  formatSubmit: 'yyyy/mm/dd', 
  Open: function() {
      console.log( 'Opened' );
  },
  onClose: function() {
      console.log( 'Closed' );
  },
  onSelect: function() {
      console.log( 'Selected: ' + this.getDate() );
  },
  onStart: function() {
      console.log( 'Hello there :)' );
  }
 });

...and none of these displaying, but I'm still able to see the calendars.
What I'm doing wrong - I'm just trying to set a min / max dates and do a simple calculation with number of nights.

Conflict with JQueryUI

The new JQueryUI datepicker overrides the datepicker.js datepicker if both are installed.

Option to always show calendar

I would like an option to always show the calendar so that it does not close automatically when the associated input loses focus. I don't believe that is currently possible out-of-the-box.

A couple API questions

Hi Amsul,

First of all, thanks for v2. It required some code changes from my part but they were all better changes (removing parseInt() everywhere).

Two API questions/possibilities:

1- What's the best way to query the plugin to get the number of days in the currently selected month?
ie: onSelect I want to get the selected date and also the total number of days in that month.

2- What's the best way to prevent selection of dates in months other than the currently displayed month?
ie: if July 2012 is open, you still see grayed out days of the previous and next months, I don't want them to be selectable.

Thanks,
never see you on Gtalk,
Shadi

Exception when using on ajax rendered html

Hi!

I've just tried pickadate.js. An ajax requested inserted new elements into the DOM, then called $('.datepicker').pickadate();

Raised exception:
Error: NOT_FOUND_ERR: DOM Exception 8

code: 8
message: "NOT_FOUND_ERR: DOM Exception 8"
name: "NOT_FOUND_ERR"
stack: "Error: An attempt was made to reference a Node in a context where it does not exist.

Happens with both pickadate.min.js and pickadate.legacy.min.js

Set default year and month?

never mind...

Calendar opens with wrong month

With an explicit future date as date_min, the calendar still opens in the current month instead of the month from the date_min.

Standalone

Will there be an standalone version for the jQuery free world (yes, it still exists)? =)
How much work is it to write it?

Legacy Pickadate doesn't work on IE8

http://i.imgur.com/cuQP1.png

That appears and when you close it nothing happens (blank page).

It's probably something simple/overlooked.

Submit feature

Hello.
I am not sure if i understand how to correctly use 'submit' feature. As I understand to this it should be hidden input with value which is send to server. Main reason for this is, that format of date for server is not so sexy as format for user eyes (i.e. "03/12/2012" vs "Thrusday 3.12." in our case).
To this point everything is OK, but! How to make this work, when i initializing form from server values.
For example i am creating form, where i have date input

and now what? Should i pass there date in server format "03/12/2012" or in format for user "Thrusday 03.12."?

1. When i pass there user format "Thrusday 3.12." it initialize pickadate with correct day and month, but when i open it there is selected year 2001 (or what year is minimum), because i lost year information from server.
2. When i pass there server format "3/12/2012" it loads date as 3. March (Because in our country is month and day switched and because in config i have format "dddd d.m." for user input) and it wont convert it to sexy user format until I wont choose date by hand.

I initializing plugin like this

$('#pickadate').pickadate( {
    weekdays_full: can.map(window.WEEKDAYS_FULL, function(val) {return val.toLowerCase();}),
    months_full: window.MONTHS_FULL,
    month_selector: true,
    first_day: 1,
    format: 'dddd d.m.',
    format_submit: 'dd/mm/yyyy'
})

Do you think your solution, how submit input works is correct? And if yes, how can i handle initializing of pickadate with server format and automaticly convert it to user format?

Doesn't work in IE8 and lower?

Just tested the demo (in Windows 8 IE10) in IE8 browser mode. It doesn't work for me. Ie. the picker does not show up.

It fires this error in the console: "Object doesn't support property or method 'map'"
(line 283)

Wrong weekday when setting first_day

When first_day is set to anything other than 1 (Sunday) the displayed weekday ("Tuesday") is one day ahead. This should not be the case as first_day refers only to the calendar display.

Check out the JSFiddle and play with the first_day parameter.

date_min with integer in future?

I don't quite get the date_min settings. If I set it to a negative integer, it allows the user to select x days in the past. But if I set it to a positive value, it doesn't do anything.

How can I set a date_min so that the selected day must be x days in the future at least? Wouldn't that be the obvious way how it should work?

Select Year

It'd be really nice to jump to a specific year when selecting a date.

Make the year more easily switchable

Currently, if I wanted to select a date in 1998, for example, I'd have to click he back arrow dozens of times.

Some solution ideas:

1. On the date picker popup, clicking on the year could display a year dropdown, OR
2. Allow for the input field to be editable

Any way to prevent 'onSelect' from being called when 'onOpen' happens?

I'm utilizing the datePicker API for something I'm working on (I emailed you about it) and whenever I open the datePIcker I'm noticing onSelect is being triggered as well.
Is this intended? Any way around it?
Thanks

Small tab glitch in latest FF

Didn't test in other browsers but if you:

1- Tab into a date field
pickadate appears

2- Move around with up/down/left/right
your selection moves accordingly

3- Press enter to select
pickadate closes

4- Press tab
focus doesnt go where you'd expect

Can be tested directly on the demo page.

Calendar won't close on date select

As per the docs, I'm doing:

$('.datepicker').pickadate({
onSelect: function() {
this.close();
}
});

and the calendar does not close. I'm not sure but I think the calendar is closing and reopening every time a date is selected (why is that anyways?), and that action is taking precedence over mine.

How do I get it to close on select?

Add option to select starting day of week

Our weeks start on monday

$(element).datepicker() or .pickadate?

Which one is going to remain as the extension to jquery?

Manually enter date with keyboard

It would be nice to add a feature where it is possible to enter a date manually with the keyboard. When filling in a large form for most users it is faster to enter the date manually than taking your hands off the keyboard, getting the mouse, selecting the year, etc.

I think this functionality should also contain some intelligent parsing. For example when someone enters "01012012" it should parse the date to "01-01-2012" (or to the desired format defined in the options), or "2-4-12" to "02-04-2012".

Thanks!

pb with fitvids

it's seem like not compatible with fitvids
navigator : google chrome

Clicking the already-selected date ought to select/close the picker

Could the code be enhanced so clicking the currently selected date closes the picker?

The code that says if there's no change to just return the date says:

// If there's no change in time, just return it
if ( dateTargeted.TIME === DATE_SELECTED.TIME ) {
    return P
}

Which doesn't close the date picker. The only things that close the picker are currently: 1) the selected date changed, or 2) clicking the window object (or an untrapped event bubbles up to the window).

I'd love an option to make this happen.

Disable for Browsers with Date Support

It would be nice to only show pickadate.js for browsers that don't have built-in type="date" support. It looks good on my browser but it's more difficult to use on my iPhone because of the screen real estate and lack of automatic scrolling.

Month and year dropdown doesn't work on iOS

Always open calendar closes and reopens on date select

I'm trying to reproduce the always-open calendar that's part of the themed calendar demo:

http://amsul.github.com/pickadate.js/docs.htm#theme

I have it showing by default, but whenever I click a date, the calendar quickly closes and reopens (takes a fraction of a second). Any idea why this might be happening? If I comment out any other css or js files I'm using, the issue still occurs.

Also, maybe there's a better place to ask this (separate issue?), but is there an obvious way to format only dates in a range? I'm slowly digging through the source to find out how to make my own solution, but rather than only allow dates in a range, I'd just like to format them diferently

How do you manually open the calendar?

Native Android experience

Could you please let us opt out of December and use the new 11 month year? This would allow a native Android experience! ;)

API stability

Not really an issue, rather a remark:

I noticed that in 1.3.5, all options are suddenly camel-cased. That's fine, but don't do such a thing in a change between 1.3.4 and 1.3.5. If you break the API , please do so in major version increments (or if the current 1.3.x is unstable: please offer a stable version).

We were caught off-guard by this change. Good thing we have automated testing to flag these things.

Allow picking of years and months.

Imagine picking birthday.

Prev / Next Buttons are excessively hard to press

I propose adding padding to them to make them easier to click.

Flickering of the outline/border of input field when switching between months

When switching between months the input field shortly loses focus because of the click event resulting in a short flickering. My suggestion is to highlight the input field by adding an additional class to it instead of using the current CSS Styling:

input[type=date]:focus,
input[type=text]:focus {
    outline: none;
    border-color: #0089ec;
}

I know that this is only part of the demo but for styling purposes the highlighting class might be useful. What do you think?