Calendar 3 - Portuguese

by davidxmartins

HTML

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date Picker Form with jQuery UI in Portuguese</title>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- jQuery UI CSS -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.min.css">
    <!-- jQuery UI JS -->
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
    <!-- jQuery UI Datepicker Portuguese Localization -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-datepicker-i18n/1.12.1/i18n/datepicker-pt-PT.min.js"></script>
</head>
<body>

    <form>
        <label for="date">Inserir Data:</label>
        <input type="text" id="date" name="date">
    </form>

    <script>
        // Initialize jQuery UI Datepicker with Portuguese localization
        $(function() {
            $("#date").datepicker({
                dateFormat: "dd/mm/yy", // Set format to day/month/year
                changeMonth: true,       // Allow changing month via dropdown
                changeYear: true,        // Allow changing year via dropdown
                regional: "pt-BR"        // Use Portuguese (Brazil) localization
            });
            // Set the default locale to Portuguese
            $.datepicker.setDefaults($.datepicker.regional["pt-BR"]);
        });
    </script>

</body>
</html>