xdan / datetimepicker

jQuery Plugin Date and Time Picker

jQuery DateTimePicker

Demo and Documentation

PLEASE. Help me update the documentation. Doc.tpl This file will be automatically displayed on the site

Installation

npm install jquery-datetimepicker

OR

yarn add jquery-datetimepicker

or download zip

datetimepicker

==============

!!! In the latest version the 'lang' option is obsolete. The language setting is now global. !!!

Use this:

jQuery.datetimepicker.setLocale('en');

Documentation

jQuery Plugin Date and Time Picker

DateTimePicker

DatePicker

TimePicker

Options to highlight individual dates or periods

JS Build help

Requires Node and NPM Download and install node.js.

Install:

1. Install bower globally with npm install -g bower.
2. Run npm install. npm will look at package.json and automatically install the necessary dependencies.
3. Run bower install, which installs front-end packages defined in bower.json.

Notice: If you use Bower v1.5.2, you will get the error: The "main" field cannot contain minified files You can regress to version 1.3.12

1. npm uninstall bower -g
2. npm install -g [email protected]

Build:

First install npm requirements: npm install -g uglifycss concat-cli Then build the files: npm run build

When the build completes, you'll have the following files:

• build/jquery.datetimepicker.full.js - browser file
• build/jquery.datetimepicker.full.min.js - browser minified file
• build/jquery.datetimepicker.min.js - amd module style minified file

datetimepicker's Issues

Strict mode produces SyntaxError

Uncaught SyntaxError: Delete of an unqualified identifier in strict mode. jquery.datetimepicker.js:955
Uncaught TypeError: Object [object Object] has no method 'datetimepicker'

Using minTime maxTime options.

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

datetimepicker datetime initialize

Is there a way to initialize the datetimepicker to a specific datettime?

Or always is "empty" ?

Selecting Feb 1st will jump to March 1st instead

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.

IE 8 issue - xdsoftdatetime.currentTime is null

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?

Wrong timebox content when used with maxTime parameter

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.

Consider splitting time picker in hours and minutes

When the step is small (say: 15 or 10) it's kinda annoying scrolling to find a time.

Danish translation

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"
            ]
        },

Bug in format with '0'

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 ? “-” : “+”)

• String.leftPad(Math.floor(Math.abs(this.getTimezoneOffset()) / 60), 2, “0″)
• String.leftPad(Math.abs(this.getTimezoneOffset()) % 60, 2, “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

Datetimepicker-Triggering

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

Datetimepicker requires user to click twice to close picker

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

http://jsfiddle.net/EnZW8/2/

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

Possible conflict with jQuery UI Tabs

When adding the datetimepicker into a tab, the time scroller gets bugged.

JSfiddle: http://jsfiddle.net/LXb37/

Load the datepicker to the current date in the input

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

Allow UnixTimestamp as Format

Applications often take unix timestamps as input. It would be nice to select that as a format.

Time not selected/visible if using inline mode

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

Scrollbar button for time picker doesn't reset position and possible request

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.

What am I missing?

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?

hours 12 - should have AM / PM selection

I am not seeing AM/PM selection when specifying hours12 = true

Documentation issue: allowBlank is not documented

Users do not know there is a way to let dates be blank.

datetime picker align issue

alignment issues are coming.

check image , here above input box the alignment is coming.

Dynamic change the min date

I got a simple problem.

I have 2 datetime pickers.
$('#datefrom') and $('#dateuntil')

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

Infinite loop in ie8

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!

datepicker options Toggle.

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!

Proposal: Add Bower support

What about add a bower.json file in the repo for bower support?

It can be very useful !!

Localization only works for picking, not for input value

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 :)

dateMin, dateMax options.

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.

Hide time outside of minTime and maxTime

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

Range between date work only with format "Y/m/d"

If I run picker with date format 'd.m.Y' - range from example ( http://xdsoft.net/jqplugins/datetimepicker/#range ) not work

The plugin does not trigger the 'change' event.

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.

Able to enter day number to 39, month number to 19

When the mask is enabled, user can enter from keyboard day number more than 31 (to 39), month number more than 12 (to 19). After that, date is calculating as in picture below

Picking 'Jan 29' in February will change date to 'Jan 1'.

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.

April doesn't work with value option

{value: "04/24/2012 00:00"}

does not work

Issue selecting invalid time.

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

Bug: step value not respected when the time is unchanged

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.

Display bug with "allowTimes: []" - values hidden in scroll view

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:

http://jsfiddle.net/konieckropka/sLe94/2/

How is it possible to remove Weekend days?

It would be nice to have this option. Only work-days.

Firing onchange event on show the datetime picker

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

Set default date and time

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.

Allow custom locales without having to merge them into core

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
            });

Add allowDays functionality

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

Hide on scrolling

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.

dateMin, dateMax options doesnt worke with format format:'d-M-y'

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
});

Able to select a time that is outside the 30 day period

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.

Set default time.

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.

Is there an option to hide invalid times?

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!

Enable/disable scrolling in calendar

Hey,

I would like to have support for enabling and disabling scrolling in the calendar to change months through the default_options variable.

Thanks!

Prevent keyboard on tablets?

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);
}

Highlighted date not reflected in the input value when switching months

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

if there is a ocx or a select in IE6-8

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;
}

Tabbing between datetimepicker fields doesn't close blurred datepickers

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.