jQuery UI Datepicker monthNames Option

jQuery UI Datepicker monthNamesShort Option

Last Updated : 19 Mar, 2021

jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Datepicker monthNamesShort option is used to set the list of abbreviated month names. It is used in the month header on each datepicker. Its default value is [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ].

Syntax:

$( ".selector" ).datepicker({
  monthNamesShort: [ "Jan", "Feb", ... , "Nov", "Dec" ]
});

CDN Link: First, add jQuery UI scripts needed for your project.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.12.4.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Example:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link href=
    "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
        rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-1.10.2.js">
    </script>
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js">
    </script>

    <!-- Javascript -->
    <script>
        $(function () {
            $("#gfg").datepicker({
                dateFormat: "M",
                monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "Maj",
                    "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
            });
        });
    </script>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>jQuery UI Datepicker monthNamesShort Option</h3>

    <div>Enter Date: <input type="text" id="gfg" /></div>
</body>

</html>

Output:

monthNamesShort option

Reference: https://api.jqueryui.com/datepicker/#option-monthNamesShort

jQuery UI Datepicker monthNames Option

P

ppatelkap

Improve

Article Tags :

Similar Reads

jQuery UI Datepicker monthNames Option

jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQueryUI Datepickers widget in jQueryUI allow users to enter dates easily and visually. In this article we will see how to use monthN

jQuery UI datepicker option() Method

jQuery UI datepicker option(optionName, value) method is used to set the value of the button option associated with the specified optionName. Syntax: $( ".selector" ).datepicker( "option", "disabled", true )Parameters: optionName: Option to be checked.value: Value to be checkedReturn values: This me

jQuery UI Datepicker minDate Option

jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Datepicker minDate option is used to set the minimum selectable date. If we set it to null, there is no minimum date. S

jQuery UI Datepicker nextText Option

jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQueryUI Datepickers widget in jQueryUI allow users to enter dates easily and visually. In this article we will see how to use nextTe

jQuery UI datepicker onSelect Option

jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI datepicker onSelect Option is called when the datepicker option is selected. The onSelect option holds a function that

jQuery UI Datepicker numberOfMonths Option

jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQueryUI Datepickers widget in jQueryUI allow users to enter dates easily and visually. In this article we will see how to use number

jQuery UI Datepicker onChangeMonthYear Option

jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Datepicker onChangeMonthYear option is called when the datepicker moves to a new month or year. The onChangeMonthYear o

jQuery UI Datepicker maxDate Option

jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Datepicker maxDate option is used to set the maximum selectable date. If we set it to null, there is no maximum date. S

jQuery UI datepicker onClose Option

jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI datepicker onClose Option is called when the datepicker is closed, whether the date is selected or not. The onClose opt

jQuery UI Datepicker navigationAsDateFormat Option

jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Datepicker navigationAsDateFormat option is used to check whether the currentText, prevText, and nextText options shoul