Locale supported Date & Time picker – A very good jQuery plugin with lot’s of parameter based functionalists.

One of the best jQuery based Calender for Date/Time input #Simple-dtpicker.js

DEMOS: http://mugifly.github.io/jquery-simple-datetimepicker/jquery.simple-dtpicker.html#

SOURCE and OPTIONS: https://github.com/mugifly/jquery-simple-datetimepicker/wiki/Options

See below for explanation, options of this library.

• locale
• current
• dateFormat
• minuteInterval
• firstDayOfWeek
• closeOnSelected

These options are also able to be used in combination.

locale

You can specify language(locale) on calendar.

This option is reflected in changing the following items:

• Calendar
  • Header (YYYY-MM)
  • Days of the week (Su, Mo, Tu, We, Th, Fr, Sa)
• dateFormat default value

Default value

en (english)

Example of use

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

Available locales

Specify this option as two of the below characters.

• “en” : English (default)
• “ja” : Japanese
• “ru” : Russian – Thanks to: rdolgushin. (v1.1.3-)
• “br” : Brazil – Thanks to: Mauricio. (v1.1.4-)
• “cn” : Chinese – Thanks to: jasonslyvia (v1.3.0-)
• “de” : German – Thanks to: rtakeda (v1.3.0-)
• “id” : Bahasa Indonesia – Thanks to: robzlabz (v1.4.0-)
• “tr” : Turkish – Thanks to: myfell (v1.5.0-)
• “sv” : Swedish – Thanks to: MacDknife (v1.5.0-)
• “es” : Spanish – Thanks to: maw (v1.5.0-)

improved in future updates…

current

You can specify default current date.

Default value

The current date and time.

Example of use

<input type="text" id="date">
<script type="text/javascript">
    $(function(){
        $('#date').appendDtpicker({
            'current' : '2012-01-01 00:00'
        });
    });
</script>

[Caution] If an input-field is not empty, THIS OPTION becomes INVALID.

dateFormat

You can specify output format (when using appendDtpicker() method for input-field).

Default value

YYYY-MM-DD hh:mm

(This format varies, if your setting the “locale” option. For example, if “locale” option is “ja”, this format will become “YYYY/MM/DD hh:mm”. )

Example of use

<input type="text" id="date">
<script type="text/javascript">
    $(function(){
        $('#date').appendDtpicker({
            'dateFormat' : 'YYYY/MM/DD hh:mm'
        });
    });
</script>

In that case…Sample output (input-field):

2012/01/01 10:30

Available format (example date: 2012-01-02 06:07)

• YYYY: Year (Full) – ex: 2012
• YY: Year (Century) – ex: 12
• MM: Month – ex: 01
• M: Month – ex: 1
• DD: Day – ex: 02
• D: Day – ex: 2
• hh: Hour – ex: 06
• h: Hour – ex: 6
• mm: Minutes – ex: 07
• m: Minutes – ex: 7

minuteInterval

You can change the interval of minute on timelist.

Default value

1. This means the interval will be 30 minutes between each option on the timelist.

Example of use

<input type="text" id="date">
<script type="text/javascript">
    $(function(){
        $('#date').appendDtpicker({
            'minuteInterval' : 15
        });
    });
</script>

Available value

min: 5 … max: 30.

firstDayOfWeek

Set the first day of the week displayed in the calendar

Default value

0

Example of use

<input type="text" id="date">
<script type="text/javascript">
    $(function(){
        $('#date').appendDtpicker({
            'firstDayOfWeek' : 1
        });
    });
</script>

Available value

min: 0 … max: 6.

• 0 = Sunday
• 1 = Monday
• 2 = Tuesday
• etc.

closeOnSelected

Close (disappear) the picker when the date & time have been selected.

This option is available when the picker has appended to input-field.

Default value

false