Universal Multilingual Date Picker For jQuery

This is a universal, multilingual, customizable date picker plugin for jQuery. Styling with the jQuery UI (CSS only).

How to use it:

1. Load the jQuery UI's stylesheet for the basic styling of the date picker.

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/flick/jquery-ui.css">

2. Load jQuery library and the universal date picker's files in the html document.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="js/universal_date_picker.js"></script>

3. Load localization files of your choice in the document.

<script src="local/fr.js"></script>
<script src="local/en.js"></script>

4. Set the default language for the date picker.

$.udpicker.setDefaults(en);

5. Attach the date picker to an input field you specifcy.

<input type="text" id="date-field">

$('#date-field').udpicker();

6. Create your own localization files:

var en = {
    closeText: "Done", // Display text for close link
    prevText: "Prev", // Display text for previous month link
    nextText: "Next", // Display text for next month link
    currentText: "Today", // Display text for current month link
    monthNames: ["January", "February", "March", "April", "May", "June",
        "July", "August", "September", "October", "November", "December"], // Names of months for drop-down and formatting
    monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], // For formatting
    dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], // For formatting
    dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], // For formatting
    dayNamesMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], // Column headings for days starting at Sunday
    weekHeader: "Wk", // Column header for week of the year
    dateFormat: "mm/dd/yy", // See format options on parseDate
    firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ...
    isRTL: false, // True if right-to-left language, false if left-to-right
    showMonthAfterYear: false, // True if the year select precedes month, false for month then year
    yearSuffix: "", // Additional text to append to the year in the month headers
    numbers: {
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        6: 6,
        7: 7,
        8: 8,
        9: 9
    }
}

7. All default options to customize the date picker.

$('#date-field').udpicker({
  drawMonth: 0,
  drawYear: 0,
  selectedDay: 0,
  selectedMonth: 0,
  selector: '#ui-udpicker-div table.ui-datepicker-calendar tbody td a',
  changeYear: false, // allows to change year
  changeMonth: false, // allows to change month
  startYear: 1960,
  endYear: new Date().getFullYear(),
  minYear: new Date().getFullYear(),
  staticView: false
});

---

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