Simple-dtpicker – Locale supported Date & Time picker – A very good jQuery plugin with lot’s of parameters

2
77

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

DEMOShttp://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.

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

2 COMMENTS

    • You can disable weekdays by specifying only allowed weekdays, use below code (in below example user cannot select Saturday or Sundays)

      $(‘#date_foo’).appendDtpicker({
      “inline”: true,
      “allowWdays”: [1, 2, 3, 4, 5] // 0: Sun, 1: Mon, 2: Tue, 3: Wed, 4: Thr, 5: Fri, 6: Sat
      });

      Or you can also use (“futureOnly”: true) to only allow user to select future dates and disable past dates selection.

      Hope this helps.
      Thanks

LEAVE A REPLY

Please enter your comment!
Please enter your name here

five × 2 =