mugifly / jquery-simple-datetimepicker

Date & time picker for jQuery, It's simple & clean.

jquery-simple-datetimepicker (jquery.simple-dtpicker.js)

Date and time picker, it's simple & clean. (jQuery plugin)

Details and examples: http://mugifly.github.com/jquery-simple-datetimepicker

Your feedback is highly appreciated. You can send requests and bug reports as Issues on GitHub.

Requirements

This plugin requires these either version of jQuery.

• jQuery 1.7.2 or later
• jQuery 2.x

For users

The master branch is development version. Instead you can get a stable version from released tags.

For developers

An automated testing status of master branch:

An example page of latest master branch is here; or simply you can see an example page in your local.

Testing on your environment

I don't force you to run a test of your commits. But recommends it.

https://github.com/mugifly/jquery-simple-datetimepicker/wiki#testing

Contributors list

List of contributors; Thanks :)

License and maintainer

Copyright (c) 2013-2015 Masanori Ohgita (http://ohgita.info/).

This program is free software distributed under the terms of the MIT license. See LICENSE file for details.

jquery-simple-datetimepicker's Issues

Show the month name instead of number in header

Add option to disable prefill with current date and time

I have a situation where I don't want my datetime fields prefilled with the current date and time. Can you add an option to disable this feature?

Set a event-handler when make a picker (appendDtpicker method)

Like below:

$('xxx').appendDtpicker({
    'onHide': function(handler) {
        window.alert('Picker is hidden!');
        // You can handle (e.g. destroy) a picker by yourself, with using methods of handler object.
        handler.destroy(); // Destroy a picker
        // ...
    },
    'onShow': function(handler) {
        window.alert('Picker is shown!');
    }
});

This base idea was proposed by Kupid Wang. Thanks.

UPDATED (2013/12/31): Receive parameters was replaced to handler object.

Option to display am/pm

Very simple yet full-featured, looks better than many. The one thing I miss is 12 hour date format (am and pm).

Month scroll

It would be great when one could navigate through the months by using the scroll button.

-

Problem with overflow hidden divs

In my case I have to append the date picker to a container that has overflow:hidden and position relative. I was wondering if the .datepicker div could be inserted at the footer or out of the div and still keep the potion of targeted id

Blanks

Is it possible to have blank dates? That is:

<input type="text" name="date" value="">
<script>$('[name="date"]').appendDtpicker();</script>

...should have a blank input field, instead of pre-populating it with a time/date.

Support for more date formats

support for more other date formats...

ex)

• 2012年1月1日
• 2012.1.1
• 2012-1-1
• 平成24年1月1日
• ...

and Japanese Zenkaku.

Change the interval of minute

New option for custom interval of minute.

ex)

    <div id="date_picker"> </div>
    <script type="text/javascript">
        $(function(){
            $('#date_picker').dtpicker({
                'minute_interval' : 15
            });
        });
    </script>

In this case, the timelist will be displayed as follows:
00:00, 00:15, 00:30, 00:45, 01:00, ...

Jumping hour upon select

After selecting the hour, the component appears to redraw, and the select hour scrolls to the top. It would be great when it would stay in place.

Malfunction of animation option (Can't disable animation)

support Korean

I hope support Korean.

this is code.

...

    var DAYS_OF_WEEK_KO = ['일', '월', '화', '수', '목', '금', '토'];

...

    var MONTHS_KO = [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월" ];

...

    } else if (locale === "es"){
        daysOfWeek = DAYS_OF_WEEK_ES;
    } else if (locale === "ko"){
        daysOfWeek = DAYS_OF_WEEK_KO;
    }

...

    } else if(locale == "es"){
        $now_month.text(date.getFullYear() + " - " + MONTHS_ES[date.getMonth()]);
    } else if(locale == "ko"){
        $now_month.text(date.getFullYear() + " - " + MONTHS_KO[date.getMonth()]);
    } else {
        $now_month.text(date.getFullYear() + " - " + MONTHS_EN[date.getMonth()]);
    }

Implement a dateFormat option

Implement a output format (dateFormat) option

ex)

    <input type="text" id="date">
    <script type="text/javascript">
        $(function(){
            $('#date').appendDtpicker({
                'dateFormat' : 'yyyy-mm-dd' // (ex: 'yy-mm-dd', 'yy/mm/dd','yyyy年mm月mm日',...)
            });
        });
    </script>

Then if format is specified, it's used when output to input-field.

min date not work in Firefox

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <!--Load Script and Stylesheet -->
    <script type="text/javascript" src="jquery.simple-dtpicker.js"></script>
    <link type="text/css" href="jquery.simple-dtpicker.css" rel="stylesheet" />
</head>

<body>
<input id="start_time" type="text" value="" /><br />
<input id="end_time" type="text" value="" />
</body>
<script>
    function initTime(){
        var d = new Date();

        $('#start_time').val(d.getFullYear() + '-' + d.getMonth() + '-' + d.getDate() + " 16:30");
        // Example Only - Set the end date to 7 days in the future so we have an actual 

        $('#end_time').val(d.getFullYear() + '-' + d.getMonth() + '-' + d.getDate() + " 17:45 ");
        $('#start_time').appendDtpicker({
            minDate:$('#start_time').val()  
        });
        $('#end_time').appendDtpicker({
            minDate:$('#end_time').val()    
        });

    }
    window.onload = function(){
        initTime();
        };
</script>
</html>

report issue about jquery.transit stop and go on demand

I am trying to use transition to stop and replay on demands . however I found that I can't fully clear the first transition by useing clearQueue();

this is my testing script I try to stop the first animation (which is set to run 10 sec) at t=7000 and replace it with a 4 sec run backward

$("#item").transition({"left":1200},10000,'linear'); // first animation
setTimeout(function(){
$("#item").clearQueue();// stop the first one
$("#item").transition({"left":100},4000,'linear'); //second animation
},7000); //stop the first on t=7000

can start the second one with clearQueue()..however the transition jump to end at t=10000 (it should stop at 7000+4000=11000)

if not use clearQueue() ..it will stop at 7000 and wait another 3000 then start the second one..

Implement a language (locale) option

Implement the language (locale) option.

ex)

    <div id="date_picker"> </div>
    <script type="text/javascript">
        $(function(){
            $('#date_picker').dtpicker({
                'locale' : 'ja'
            });
        });
    </script>

Then the day of week in calendar is localized.

Add a Today Button

Hi,
It needs to have a Today Selector to select the Current Date [time] of the day for easy scheduling of events.
Regards,

Implement month selector

Implement month selector.

Bug when used in Rails 3 pipeline

Hi,

I have been trying to use query.simple-dtpicker.js within a Rails application. It works fine locally, but it is signaled as erroneous when the Rails 3 pipeline is used.

Specifically, Rails 3 minifies the JavaScript code. When minified, the code seems to produce an error. At first I thought it might be linked to the regex expression on line 221, which reads /^(\d{2,4})-/-/ (\d{1,2}):(\d{1,2})$/, and which should read /^(\d{2,4})-/-/ (\d{1,2}):(\d{1,2})$/ (i.e., the '/' characters need to be escaped...)

I was wondering has anyone encountered similar problems.

regards,

Ciarán

Show range of time

Thanks for a great product. Is it possible to show only certain range of time, e.g. 9.00-18.00?

[Feature Request] Date Only

I liked this, but I am missing a feature for date only.

appendDtpicker is not overriding the default date with the input's value

it sets it to currentDate, which seems to be unused

Issue with month jumping

Looks like when the current month is January 31, clicking on the next month arrow skips a full month.

css float pushes time list below calendar

When non-inline and the parent area is smaller than the area needed for .datepicker_calendar and .datepicker_timelist, the .datepicker_timelist is pushed below the calendar. I updated the css to the following for my scenario.

.datepicker > .datepicker_inner_container { white-space:nowrap; }
.datepicker > .datepicker_inner_container > .datepicker_calendar,
.datepicker > .datepicker_inner_container > .datepicker_timelist {
display:inline-block;
float:none;
}

Implement Event

Disable attached input

When a picker is attached to an input, the input should not be able to be edited by typing in the box; the datepicker alone should edit the field.

Don't allow to select past date and time

Need to implement this functionality,

sometime we don't want to allow user to select past date and time.

Selecting the last day of a 31-day month then going forward goes forward 2 months

e.g., if you select the 31st October on http://mugifly.github.io/jquery-simple-datetimepicker/jquery.simple-dtpicker.html, then press next month arrow, it jumps to 1st December - ideally the month should change to November.

Leave the input field empty by default

This plugin seems to add a date (and time) to the input field all the time. I suggest adding an option to make it possible to leave the input field empty by default.

GREAT date-time picker. An ie9 bug?

GREAT date-time picker. Best one I've found on the net after a lot of searching. Easy to set up, looks great, works perfectly! So I hate to bring up a trivial item like this. But...

I've found a minor issue in the css. When using ie9, the time selection list moves from the right hand side of the inner container to underneath the calendar section. (Chrome and Firefox display perfectly.) Perhaps there's an ie specific margin or padding setting that can be added/deleted to keep the time container locked in place on the right hand side?

EDIT: Looking at the example page with ie9...I'm using the "Append to Input-Field (Inline)" option. A little weirdness happens. Seems that hovering over the month ahead (">") or month back ("<") links activates the time list jump to the bottom of the container. After clicking a new date/time, the time list returns to it's original spot...until there's another hover over one of the month ahead/behind links again. Hope that helps a little.

Thanks for the great add-on!

John

misplaced when located in nested elements

If you put picker in element which is positioned arbitrarily on the screen it get's offset of parent and misplaces calendar relative to input + offset of the input.

I tried to fix it and succeeded by changing following line in your code:
$picker.parent().css("left", $input.offset().left + "px");

to

$picker.parent().css("left", $input.position().left + "px");

with this it appears right beneath the element no matter where it is located on the screen.

Picker doesn't always hide when supposed to

I have an input field with the value "2013-11-08 13:17"

I active the picker by clicking the input field. The picker appears. Then I click a random place on the screen, and the picker hides. If I do this one more time, the picker does not hide and autocloses only when I select a date and a time. If I disable the autoclose function, it will just stay there.

Bug appears in both chrome and firefox.

Update: A simple mouseover in the picker will make it closeable. If I activate the picker and try to close it without having touched it (or moused over it), it won't close.

bug: crash initializing when input contain not well formated string

When input contain not parsable text e.g. "asd" plugin crash during initialization.

Bug is fixed in my fork.

GitHub Page - Broken link

Fix broken link ("Try a sample")
http://mugifly.github.com/jquery-simple-datetimepicker/

new locale = Polish

i added new locale in my copy if you want it i can submit code so you can check

Disappear picker when date and time was chosen

if I might make a request? Is it possible to make
the calendar appear when I click on the input field and then disappear when
I have chosen the date and time? In my browser (IE10) the calendar is shown
all the time. I would like to implement the datepicker in two input fields,
one close below the other. As it is now, I cannot.

Requested by Errol Jacoby. - Thank you.

Limiting to future dates only is broken

Hi,

When enabling the "futureOnly" option you can still select a date in the past using the mousewheel.

If you use the example given at the bottom page here:
http://mugifly.github.io/jquery-simple-datetimepicker/jquery.simple-dtpicker.html

Use the mouse wheel to scroll backwards and all of suddenly you're in the past, able to select a date which isn't in the future.

Tested with Firefox 24.0 and Chromium 30.0.1599.101 using version 1.8.0 (218d8aa).

Valid periods

Allow for defining a start / end date which represents a valid period.

For instance, I would only like to allow the user select a date within the current month. Or only between the 14th and the 24th...

Malfunction of switching a month when using dateFormat option

In an example of "dateFormat" section in 1.10.0 :

2014/02 (14/02) -> 2014/03 (14/03) -> 1986/04 (-86/04)

Implement a current date option

Implement a current date option.

ex)

<div id="date_picker"> </div>
<script type="text/javascript">
    $(function(){
        $('#date_picker').dtpicker({
            'current' : '2012-01-01'
        });
    });
</script>

Calculating dates goes wrong at end of month

Example : today, on November 30th, if I enter '2014-02-10' as a date in the input field (i.e. February 10th 2014), it is parsed as March 10th 2014. This is because the function parseDate does not set all parameters of new Date() at the same time. So when new Date() is generated today, and the month is set to February - javascript assumes the date is changed to February 30th, thereby updating the month to March.

You have to parse out the year/month/date/hour/minute first, and then set them all at once in new Date().

DateTimePicker doen not support "dd MMM yyyy HH:mm:ss" format

Will you add "dateFormat": "dd MMM yyyy HH:mm:ss" support.

Allow Time to Be Left Null

It would be nice if there was an option to allow the time to be selected and deselected, with no time output shown if the time is deselected.

Position / outerHeight() gives wrong value

Please change:

line 929: $picker.parent().css("top", $input.outerHeight() + 2 + "px");

for

line 929: $picker.parent().css("top", $input.outerHeight({margin: true}) + 2 + "px");

minDate + maxDate

Hi this isnt an issue more of a request. Is it possible to set a minimum/max date for the picker? it would be good for my website where i gather the datetime data and set the calendar and i really like this dtpicker

Datetimepicker with KnockoutJS framework

Hi.
I can't get this plugin working with KnockoutJS.
Each time i'm showing an input, it's using knockout bindinghandler to initialize a datetimepicker:

HTML:
input data-bind="dateTimePicker: true, value: eventBeginningDate" id="EventStartDate" name="EventStartDate" type="text" value

JS:
ko.bindingHandlers.dateTimePicker = {
init: function (element, valueAccessor) {
$(element).appendDtpicker({
'locale': 'ru'
});
}
}

datepicker gets initialized successfuly, changing value of input. But change of input value doesn't trigger ko.observable(eventBeginningDate) value change for some reason.
Could you, please, try to help me with this issue?
Thanks in advance

default date is a month behind

first day of week

implement option to choose first day of week

Option to disable the animation.

Option to disable the fade animation.