kbwood / datepick Goto Github PK
View Code? Open in Web Editor NEWjQuery Datepicker Plugin
jQuery Datepicker Plugin
Hello,
First of all thank you for your this wonderful plugin. I've been using it for a while and just noticed this weird bug. I don't know when it started.
When monthsToShow option is set to more then 1 clicking on anything in those extra months just switches months. Something like next months click all over the calendar. It can be tested in your demo under tab Multiple and then click on any date in other two months. First month one works normally. Tested in all the latest browser, inline and normal and it is the same.
Best regards! Sasha.
I have set -up calendar-picker and added hijri calendar picker successfully and when I add date.js in the same project It gives me error saying
Uncaught TypeError: year.calendar is not a function
May be this is because of the year
being an object in the keith-wood and year
being a integer in the date.js
What is the solution for this?
PS: I can't remove either of them from the project.
Unless I'm missing something, this is more of a question than an issue....
I have rangeSelect = true
I've noticed that when you select the first date, all previous dates before the date selected are disabled. Is there a way to leave these enabled? We are trying to allow a user to select an end-date first, then select a previous date as the first date in the range.
I've been banging my head trying to figure this one out, any help will be greatly appreciated, thank you in advance....
Hi
I have a calendar on the Middle of the page www.example.com/location when I come on this page from another page the scroll is middle of the page where is my calendar instead of the top of the page as normal behavior.
I check with option i can not get offset 0
When datepick is on the same page as flot, flot's resize plugin doesn't work.
Whenever the browser window is resized, an exception is thrown inside of jQuery, and datepick.js:2089 is the first thing in the stack that's not a jQuery internal.
Changing the year won't update date value.
how can i return dates list, between to dates? ex.
[
"Wed Aug 02 2017 12:00:00",
"Wed Aug 03 2017 12:00:00",
"Wed Aug 04 2017 12:00:00",
"Wed Aug 05 2017 12:00:00",
]
or alike
To replicate:
This error does not exist in Safari desktop. I assume this is something to do w/ the way that iPads replace the selectors w/ native selectors. Any input / thoughts on this would be great.
Thanks :)
Hello Keith,
while updating from 4.0.6 to the lastet stable version i refactored my code too and found out that there is a difference between a selected single date processing queue and a selected week processing queue. I debugged the related functions using console and found the following to happen for a single date selected:
entered _selectDatePlugin
entered _updateInput
... calling onSelect-handler
passed _updateInput
entered _update
... is inline || plugin.curInst == inst
... is inline
passed _update
passed _selectDatePlugin
the following log refers to a week selected:
entered renderer.onWeekHeader-clickhandler
entered _setDatePlugin
entered _update
... is inline || plugin.curInst == inst
... is inline
passed _update
entered _updateInput
... calling onSelect-handler
passed _updateInput
passed _setDatePlugin
passed renderer.onWeekHeader-clickhandler
Notice the inverse call order of _update() and _updatePlugin(). For week selections this causes the onDate handler to be executed before the onSelect handler, whereas they're executed in correct order for single dates selected (onSelect before onDate). This furthermore prevents for instance changed CSS classes for each of these dates, that are registered in an external object by the onSelect handler, not to be applied before picking another date, because while the related date is processed by onDate, the new CSS class cannot be found, because it is registered afterwards.
For testing i inverted the calls for _update() and _updatePlugin() in _setDatePlugin() lines 1524 and 1525, which is how it is implemented in _selectDatePlugin(). This solves the issue. onSelect is now executed before onDate and a color change works as intended.
// before
if (!setOpt) {
this._update(target);
this._updateInput(target, keyUp);
}
// after
if (!setOpt) {
this._updateInput(target, keyUp);
this._update(target);
}
Hi,
This plugin seems really cool,providing solution for real life use cases in terms of jquery.But it would be great if it can be integrated with angular.
Thanks & Regards,
Neel
Hi, I'm going to host this lib on cdnjs.
But I need to know which files should be added.
Could you help me?
Thanks!
cdnjs/cdnjs#8832
see the demo in: http://keith-wood.name/datepick.html#multi
after clicking on dates from the middle or rightest calendar the selection not working any more, and clicking on them is like clicking on the "next month" button
checked on chrome 48.0.2564.116
I want to make the minDate of the #endPicker equal to the #startPicker value + 5 days.
$('#endPicker').datepick('option', 'minDate', $('#startPicker') /*+ 5 days*/);
I have trouble to use the add function, can you help me, please?
Right now the plugin allows users to select a date which becomes a start date and then any date after it which becomes the end date and hence we get a range,
I want to be able to select two dates in any order, say first end date and then start date and get the range.
How can I do this ?
Keyboard handling is borked on pages with more than one datepick control. There's a $()
call which isn't scoped properly because inst.div
is undefined for inline datepickers.
I fixed it by changing the following code on line 1508:
plugin.selectDate(elem,
$('a.' + inst.options.renderer.highlightedClass, inst.div)[0]);
to this:
plugin.selectDate(elem,
$('a.' + inst.options.renderer.highlightedClass, inst.elem)[0]);
There is an error in the Persian leap year
1403 is a leap year
Thank you for provide this plugin. I use in on one of my website.
It is working great on desktop.
When on mobile phone, or smart phone, including android or iPhone, datepick calendar is shown as normal, but at the same time, the smartphone built-in softkeyboard also displayed on it.
My question is how to disable any one of them on mobile phone.
year and month drop downs aren't working when the datepicker is in a jquery UI dialog
When initializing this plugin as a calendar it highlighted the first day of the month as it would be the actual date. It is also visible on the datepicker homepage in the inline calendar. When you change months it always highlights the actual day number in the given month. The highlight disappears then you hover over the calendar.
I fixed this by removing 'renderer.highlightedClass' in line 2077.
Can you add the possibility to disabled dates:
single dates
days of the week
date ranges
First of all, thanks for your work on this. It's by far the most feature complete and visually appealing plugin for displaying calendars. Anyways, we've recently started using requireJS to load javascript modules asynchronously and I was wondering if there's any chance of offering built-in AMD support in future datepick versions.
how can i highlihgt dates that have events
When using multiple months - it will be nice to have some slide effect like infinite smooth scrolling
I wanted to be able to i) select single days by clicking onto ad date, or ii) a whole week by clicking onto the week number, and later to iii) deselect single days from a (as a whole) selected week.
The following is combined from your examples but it does not work as expected, which makes the content of this formal bug issue:
$("#calendar").datepick({
renderer: $.datepick.weekOfYearRenderer,
firstDay: 1,
showOtherMonths: true,
rangeSelect: true,
onShow: $.datepick.selectWeek,
multiSelect: 999,
showTrigger: '#calImg'
});
So what I basically suggest is also a redesign (improvement) of your datepicker, so that multiple and single dates, and ranges from ... to ... can be selected.
A working library for detecting keycodes is https://github.com/jeresig/jquery.hotkeys - so that Shift-and-left-mouse-click and also Ctrl-and-left-mouse-click actions could be detected and used for selecting (or deselecting) ranges, week, or single days.
If needed, I can write a formal issue with a concrete proposal. With the current version, it's not easy to code for non-experts, but once we have a working example, your extension, which already has a lot of useful option but lacks the described features, will become the best of the multi-date-pickers.
I would like to add start range class to first date in selected range and end date class to last selected date in range.
Is it already possible to do this somehow. If not, does it make sense to implement it and add 2 additional options for classes that should be used?
I am trying to apply the datepick in the html content textbox which is being added on a button click. But it is not working , Any help would be appreciated.
The found the same question on stackoverflow which is also unanswered.
https://stackoverflow.com/questions/54563933/cant-get-keith-wood-datepick-plugin-to-work-with-dynamic-row-drawing
If you change the month the current day is also marked as current day in the next/previous month.
Check example here:
http://keith-wood.name/calendarsPicker.html
Hi, could you point me to implement an option to allow a minimum number of days that can be selected in a range? I tried messing around with the code but had no luck. Thanks.
Hi i have used the datapicker plugin and the range too works fine but when i want to clear the dates selected externally using a button i wrote a command $(selector).datepick('clear'); which dont work and i am using the 4.0.1 version only.
how to use the hijri calendar in "jQuery Datepicker"?
dates:'yyyy-mm-dd',
like this command but showing error
Uncaught TypeError: date.getMonth is not a functio
like this
autoSize only calculates the input width for one date, even if rangeSelect is true.
I think for a date range it should use the width of two dates and the separator.
Apart from that great plugin.
Hi, im using the datepicker for my project it looks very nice, thanks for the hard work.
i have encountered 2 issue with the datepicker:
2.clicking on iframe does not close the datepicker, only if i click outside the iframe, it closes it.
the datepicker is on the page not in the iframe..
Thanks!
Hello. I have a date input with attached event listener for 'change' event. When I add datepicker for this input this event stops to rise for manually entered data. How this can be fixed?
I have some dates set across 2 months, but the month of the first selected date is showing on page load. Is there any way to show the month of the last selected date?
A way to retrieve the month and year the calendar is currently showing would be a huge help.
$( ".date" ).datepick({firstDay: 0});
not working !
The browser will always scroll to the calendar on the datepick() call, even if it is inline. You can see an example if you make your window size very narrow (for intance 300px) and then loading http://keith-wood.name/datepick.html It will scroll to the calendar that is displayed in the introduction part.
i'm trying to use dayNamesShort but am not able to use it please help!
Hi, i'm developing a project with this plugin but i have some troubles:
when i select the first date of a range, i check if the next 7 days are in an array containing some dates. If the selected date is in it, i need take the datepicker back to the initial state where no date is selected... I'm trying create a function for the "onSelect" option, but I don't know how to clear everything. How can I do it?
Thank you.
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.