Fast Customizable Date Selector Plugin For jQuery - datetator

datetator is a simple, fast jQuery date selector plugin that converts the normal input field into a customizable, multi-language date picker with just one JS call.

How to use it:

1. Add jQuery library and the jQuery datetator plugin's files to the html file.

<link rel="stylesheet" href="fm.datetator.jquery.css">
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="fm.datetator.jquery.js"></script>

2. Call the plugin to create a default date picker on the input field.

<input id="basic" name="basic">

$('#basic').datetator();

3. Set the initial date in the regular value attribute:

<input id="basic" name="basic" value="2017-11-03">

$('#basic').datetator();

4. Show a background overlay when the date picker is active.

$('#basic').datetator({
  useDimmer: true
});

5. Set the language for your international web page.

<script src="fm.datetator-fo.jquery.js"></script>
<script src="fm.datetator-de.jquery.js"></script>

$('#basic').datetator({
  language: 'de'
});

6. You can also config the date picker by using data attribute as follows.

<input id="myDatepicker" 
       type="text" 
       class="datetator" 
       data-datetator-use-dimmer="true" 
       data-datetator-use-remove="false" 
       value="2017-11-03"
>

7. All possible plugin options to customize the date picker.

$('#basic').datetator({
  prefix: 'datetator_',
  height: 'auto',
  useDimmer: false,
  useRemove: true, // shows remove button?
  class: '',
  language: 'en',
  labels: {
    en: {
      week: 'Wk',
      dayNames: [
        'Mo',
        'Tu',
        'We',
        'Th',
        'Fr',
        'Sa',
        'Su'
      ],
      monthNames: [
        'January',
          'February',
          'March',
          'April',
          'May',
          'June',
          'July',
          'August',
          'September',
          'October',
          'November',
          'December'
      ],
      previousMonth: '«',
      nextMonth: '»',
      previousYear: '«',
      nextYear: '»',
      empty: 'Remove',
      today: 'Today',
      previousMonthTooltip: 'Show previous month',
      nextMonthTooltip: 'Show next month',
      previousYearTooltip: 'Show previous year',
      nextYearTooltip: 'Show next year',
      emptyTooltip: 'Remove date',
      todayTooltip: 'Show and choose today\'s date'
    }
  }
});

8. Create your own language files just like the fm.datetator-en.jquery.js.

var datetator_labels = $.extend({}, typeof datetator_labels !== 'undefined' ? datetator_labels : {}, {
	en: {
		week: 'Wk',
		dayNames: [
			'Mo',
			'Tu',
			'We',
			'Th',
			'Fr',
			'Sa',
			'Su'
		],
		monthNames: [
			'January',
			'February',
			'March',
			'April',
			'May',
			'June',
			'July',
			'August',
			'September',
			'October',
			'November',
			'December'
		],
		previousMonth: '«',
		nextMonth: '»',
		previousYear: '«',
		nextYear: '»',
		empty: 'Remove',
		today: 'Today',
		previousMonthTooltip: 'Show previous month',
		nextMonthTooltip: 'Show next month',
		previousYearTooltip: 'Show previous year',
		nextYearTooltip: 'Show next year',
		emptyTooltip: 'Remove date',
		todayTooltip: 'Show and choose today\'s date'
	}
});

---

This awesome jQuery plugin is developed by QODIO. For more Advanced Usages, please check the demo page or visit the official website.