amsul / pickadate.js Goto Github PK
View Code? Open in Web Editor NEWThe mobile-friendly, responsive, and lightweight jQuery date & time input picker.
Home Page: http://amsul.ca/pickadate.js
License: MIT License
The mobile-friendly, responsive, and lightweight jQuery date & time input picker.
Home Page: http://amsul.ca/pickadate.js
License: MIT License
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
it's seem like not compatible with fitvids
navigator : google chrome
I propose adding padding
to them to make them easier to click.
The new JQueryUI datepicker overrides the datepicker.js datepicker if both are installed.
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)
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.
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?
Our weeks start on monday
When selecting a date, the date text is not updated in the value="" spot of the date picker input.
pickadate.js looks awesome. Can you add an option to clear the currently selected date? Perhaps an "X" button.
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.
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!
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
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?
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.
With an explicit future date as date_min, the calendar still opens in the current month instead of the month from the date_min.
That appears and when you close it nothing happens (blank page).
It's probably something simple/overlooked.
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.
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.
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?
Will there be an standalone version for the jQuery free world (yes, it still exists)? =)
How much work is it to write it?
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:
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.
Imagine picking birthday.
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
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
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,
});
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.
Could you please let us opt out of December and use the new 11 month year? This would allow a native Android experience! ;)
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?
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.
Just wondering what the licensing on this is? I don't see it mentioned anywhere in the documentation.
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
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.
never mind...
Tested through browser stack.
Is the legacy script expected to work with these browsers?
It'd be really nice to jump to a specific year when selecting a date.
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?
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?
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)
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."?
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?
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.
Are there any callbacks for use in IE7/8?
When selecting a date the fields are not populated with any information.
Thanks!
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?
Which one is going to remain as the extension to jquery?
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.
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.