xdan / datetimepicker Goto Github PK
View Code? Open in Web Editor NEWjQuery Plugin Date and Time Picker
Home Page: https://xdsoft.net/jqplugins/datetimepicker/
License: MIT License
jQuery Plugin Date and Time Picker
Home Page: https://xdsoft.net/jqplugins/datetimepicker/
License: MIT License
If I use minTime, maxTime options for Time range only, the options of default time if I don't select a specific time is setted to NOW.
But it is setted wrong if NOW it's outside the timerange.
EX:
time "now" = 18:20
select start time = 19:00
click on end time, but click "outside the timepicker" ===> result = 18:20
The time need to be at least the value of minDate if NOW is < minDate
So I think just Add a line as
if NOW < mindate then use mindate else use now
I suppose it's similar with date range with datepicker only
If you click on next month button you will end up in an infinite loop!
This bug is noticed in ie8 and in ie7 your datetime doesn't show at all!
I have put a timepicker-enabled input inside of a scrolling div. When the div is scrolled the datetimepicker remains static. Is there a way to get the datetimepicker hidden? Thanks.
I know the format class comes from a different library, however the code for handling ‘O’ format has a bug. In Brisbane I get +-1000 when it should be +1000
The fix is
Date.prototype.getGMTOffset = function() {
return (this.getTimezoneOffset() > 0 ? “-” : “+”)
I have let the original author know - but thought I would let you know as well since it was this library I was using that I had the issue appear :)
Thanks for a great picker btw!
Andrew
I got a simple problem.
I have 2 datetime pickers.
I want a simple thing.
When date is changed on datefrom the dateuntil mindate i need to set with selected datefrom + 1 month.
i tryed:
$('#datefrom').datetimepicker({
datepicker:true,
format:'d/m/Y H:i',
step:1,
onChangeDateTime: function( ) {
$( "#dateuntil" ).datetimepicker({minDate, '-1970/01/02' });
}
});
not working.
Please help
When I use minTime and maxTime, I need to hide the times outside the interval between minTime and maxTime.
They are displayed as disabled, and its ok.
But is there a way to hide them?
Thanks!
{value: "04/24/2012 00:00"}
does not work
Example: Current time is 10.17. I have set a step of 30, when the datetimepicker initially shows, 10:30 is shown highlighted in the time area( as it's the nearest 30 step to 10:17), if you then select a date but leave the time unchanged the input field value is set to 7/2/2014 10:17 rather than 10:30 as expected. It's fine if you change the time but a user might be happy with the initial 10:30 value so not change it.
Another related bug is that if you set a minTime and maxTime of say 12:00 and 17:00 the datetimepicker will still initally show 10:30 highlighted even though it is outside the min and max, this may be confusing to the user as it appears that outside times are selectable, it's be better if the nearest available time was highlighted.
the plugin will be covered by the ocx or select, so insert a iframe in the datetimepicker like this :
var datetimepicker = $('<iframe scrolling="no" frameborder="0"></iframe>'),
and css
.xdsoft_datetimepicker iframe { position: absolute; left: 0; top: 0; width: 75px; height: 210px; background: transparent; border:none; } /*For IE8 or lower*/ .xdsoft_datetimepicker button { border:none !important; }
It's a bit weird when switching months that the highlighted date isn't the current selection especially when using this inline.
It's confusing if this is the case:
Calendar is on February 8th
User needs to pick March 8th
User hits the Next Month arrow
Calendar updates and March 8th is highlighted
User submits the form
February 8th is posted back to the server
When having step:5, the time list gets very tall. Can one hide the times which are out of the scope when setting minTime and maxTime?
E.g.
minTime: 10:30,
maxTime: 10:50,
step: 5
Renders only:
10:30
10:35
10:40
10:45
10:50
If I pick a date from a localized date(time) picker, it formats to the standard english format. Also parsing a value from a localized datetime, doesn't work.
I got a workaround for this, but it's not very elegant. Actually, it's quite dirty. It mainly involves modifications inside code from Baron Schwartz. Also it's not safe if you use more than one languaged picker on one page. I'm not quite used to jQuery, so I don't provide a fully working and modified javascript.
Here are the parts I've changed:
When rendering the picker, override the default set monthNames and dayNames
// days
for(var j = 0; j<7; j++) {
/*,,,*/
}
Date.monthNames = options.i18n[options.lang].months;
Date.dayNames = options.i18n[options.lang].dayOfWeek;
The code above makes sure a localized value is put into the input field, but when setting and unfocussing, the value is validated again and this fails. So the validator has to be modified:
Date.formatCodeToRegex = function (/*...*/
case "D":
var s = '';
for (var i=0; i<Date.dayNames.length; i++) {
if (s!== '') s += '|';
s += Date.dayNames[i].substr(0,3);
}
return {
g : 0,
c : null,
s : "(?:"+s+")"
};
/* .... */
case "M":
var s = '';
for (var i=0; i<Date.monthNames.length; i++) {
if (s!== '') s += '|';
s += Date.monthNames[i].substr(0,3);
}
return {
g : 1,
c : "m = parseInt(Date.monthNumbers[results[" + currentGroup
+ "]], 10);\n",
s : "("+s+")"
};
This parses the inputfield from localized values.
This whole solution is suboptimal, but it's a place to start :)
Feel free to add this to the source.
da:{ // Danish
months: [
"Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September","Oktober", "November", "December"
],
dayOfWeek: [
"Søn", "Man", "Tirs", "Ons", "Tors", "Fre", "Lør"
]
},
If dynamically change the datetimepicker with option datepicker from false to true,
There is no datepicker shown.
EX:
init
$('#id).datetimepicker({datetimepicker:false])
....
// after some change, reinit with datetimepicker...
$('#id).datetimepicker({datetimepicker:true])
IT'S NOT WORKING!
I found this very weird duplicatable bug.
steps:
1, In January 2014 page, click Jan. 29th (or 30th or 31th);
2, click the "1" in the bottom right corner, which is supposed to be Feb. 1st, then Mar. 1st will be selected instead.
If you click any other date in January 2014 in the first step, the correct date (Feb. 1st) will be selected in the 2nd step.
Applications often take unix timestamps as input. It would be nice to select that as a format.
Hi
I have an input with a date in the future in the format dd/MM/yyyy hh:mm:ss (31/12/2014 12:00:00).
When I load the datetimepicker I want it to default to the current date, both the date and time. Is this possible? Currently it is showing today's date only,
I can see that you have a validate date function and this is returning and object of date so not sure why it is defaulting to today.
Thanks
I have a issue that at the time datetimepicker pop out the onchangedatetime event firing. Actually no change date happend. How can i fix this.?
There's an error between date range:
if the format of the date include time too, is not parsed and got "undefined".
Just try the minDate and maxDate Example with timepicker:true.
Hey,
I would like to have support for enabling and disabling scrolling in the calendar to change months through the default_options
variable.
Thanks!
Hi.
Nice datetimepicker! I'm actually using it in a project and I put a clock-icon beside the input, that triggers the datetimepicker on click. While implementing this I realized, that the datetimepicker is triggered by mousedown.
Is there a reason for the mousedown-solution? I would intuitively trigger it by focus.
Best regards
Emanuel
Hey. I'm trying to use the plugin with knockout.js and I have an issue with it. It seems that the datetimepicker does not trigger a change event when its value changes. This causes knockout to never update it's binding.
I was able to fix it using a small hack:
$("input[type='datetime-local']").each(function () {
var $this = $(this);
$this.datetimepicker({
onChangeDateTime: function () {
$this.trigger('change');
}
});
});
However, it would be nice if that behavior was built-into the plugin, or perhaps via an opt-in boolean parameter, to not disturb current behavior/expectations.
Is there any way to set default time.? My scenario is while showing datetime picker if nothing is already selected, I need to select default datetime.
When you open the date picker in February and pick 'Jan 29', the associated text field receives the incorrect date 'Jan 1'. If you pick 'Jan 30' you'll receive 'Jan 2' and so on.
In general picking a day 'd' from the previous month 'm_prev' will result in datepicker picking
'm_prev [ d - d_max(m_prev) ]'
where 'd_max' is the maximum number of days for any month and
d > d_max.
Would be great to be able to create an array of which days of the week available!
Example:
allowDays:[ '1', '2', '3', '4' ]
Resulting in only monday, tuesday, wednesday and thursday beeing available for selection...
What about add a bower.json file in the repo for bower support?
It can be very useful !!
I have given like this, and added step also,
$("#inactive-text-date").datetimepicker({
format:'m.d.Y h:i a',
formatTime : 'h:i:A',
minDate:0,
minTime:0,
step:15,
onClose:function(){
$('#inactive-text-date').trigger('blur');
}
});
Again if we click on any date and didn't click on time its selecting current time without considering step. What will do for this.?
Hi, I would like to prevent the keyboard from showing up on the iPad og other tablets.
I've seen this solution for another datepicker, but I can't get i to work
:
onClose: function(dateText, inst)
{
$(this).attr("disabled", false);
},
beforeShow: function(input, inst)
{
$(this).attr("disabled", true);
}
I need to set the date to a string in the format of "2013-08-01T10:12:02". However, setcurrenttime doesn't seem to work. How do I do this?
If you dynamically change allowTimes: to set of time with less than 6 items - those items are hidden and to show them, you need to click "down scrollbar".
If there are 6 or more items - list is displayed correctly. Also if list is initialized with less then 6 items - it works fine... This situation accurs only when allowTimes is changed after first onShow:
If you open a time picker and move the scrollbar to select time, when the time picker is opened again, the scrollbar slider isn't reset to the top of the box even though the time view is. That is, the slider may be positioned at the middle of the box, but the time box is at the first time in the list.
What I would actually prefer to happen is for the time selector to automatically scroll to the selected time when the time picker is displayed. If the selected time isn't one of the options, for example when the time options are by hour but the selected time has non-zero minutes, then scroll to the nearest time.
I've looked through the code and I haven't yet been able to figure out how to do this.
Users do not know there is a way to let dates be blank.
I tried from to date but when i changed date formate from 'Y/m/d' to 'd-M-y' its stoped working.
$('#NEW_STARTdatetime').datetimepicker({
format:'Y/m/d',
onShow:function( ct ){
this.setOptions({
maxDate:$('#NEW_ENDdatetime').val()?$('#NEW_ENDdatetime').val():false
})
},
timepicker:false
});
(v2.1.5) When initially displaying the date/time picker, the time widget will not scroll and the current time is not selected. Clicking on the 'Today' button (or using firebug to 'unhide' the input field and then clicking in it) will enable the timepicker and select the time.
Is there a way to initialize the datetimepicker to a specific datettime?
Or always is "empty" ?
Thanks for this great plugin! :)
Just one point to fix: the timebox content isn't correctly generated when using maxTime parameter. This could be easily fixed by adding this into the line_time(h,m) function:
now.setSeconds(0);
now.setMilliseconds(0);
In this way, the upper limit is not "polluted" by the remainings seconds and milliseconds of the current datetime from which it's built.
How do I set default date and time with this? I have a text box populated with a date and time. I want to be able to click in the text box and have it show the time I populated the text box with.
Let's say I set it up like this
$('#datetimepicker').datetimepicker({maxDate:'+1970/01/30'});
So I only want people to select a datetime that is max 30 days from now, and it's currently 2pm on March 8. Though the user can validly select April 6 as the date, they shouldn't be able to select a time that is after 2pm.
My use case is that I'm allowing people to have a post up for for a maximum of 30 days, but no more. They can choose to have the post up for less if they like, but it shouldn't be allowed any more than 30 days exactly.
If I run picker with date format 'd.m.Y' - range from example ( http://xdsoft.net/jqplugins/datetimepicker/#range ) not work
It would be nice to have this option. Only work-days.
It would be nice if we could add our own locales without having to wait for them to be hard-coded into the core.
For example, make the $.extend of the options in the initializer a "deep" extend to enable us to do this (right now it's not a deep extend so the i18n object is not being merged):
$('[data-datetimepicker]').datetimepicker({
lang: 'sv',
i18n: {
sv: {
months: [
'Januari', 'Februari', 'Mars', 'April',
'Maj', 'Juni', 'Juli', 'Augusti',
'September', 'Oktober', 'November', 'December'
],
dayOfWeek: [
'Mån', 'Tis', 'Ons', 'Tor', 'Fre', 'Lör', 'Sön'
]
}
},
dayOfWeekStart: 1, // 1 = Monday, 2 = Sunday
format: 'Y-m-d',
timepicker: false
});
If you have multiple datetimepickers in a form, and you use the TAB key to move between them, each opens its own datepicker, but doesn't close on blur. So the result is that you end up with more than one picker open.
I am not seeing AM/PM selection when specifying hours12 = true
I was able to reproduce this when using jqueryui 1.10. It was not reproducible with jqueryui 1.9.2.
I was able to reproduce with jquery 1.8, 1.11, and 2.0
To reproduce:
Open jsfiddle link.
Click "Click to show" button.
[Dialog displays with open picker]
Click in the text area below the picker.
[Date time picker flashes]
Click in the text area below the picker.
[Picker closes and now behaves normally]
You have to re-run the jsfiddle each time to reproduce. Closing the dialog and reopening doesn't reset the bug and it will continue to behave correctly.
Changing the dialog to "autoOpen: true" fixes the issue.
Please let me know if I can assist any further with this bug.
Thank you
When the step is small (say: 15 or 10) it's kinda annoying scrolling to find a time.
When using IE8, after selecting a date, I get a null pointer exception on the _xdsoft_datetime.currentTime variable. It may be some sort of local variable issue (guess). This only occurs in IE8 and I'm using jQuery version 1.7.2.
Any suggestions on fixes?
When adding the datetimepicker into a tab, the time scroller gets bugged.
JSfiddle: http://jsfiddle.net/LXb37/
Uncaught SyntaxError: Delete of an unqualified identifier in strict mode. jquery.datetimepicker.js:955
Uncaught TypeError: Object [object Object] has no method 'datetimepicker'
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.