Calendar 3 - Customized

by davidxmartins

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date Picker Form with jQuery UI</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.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/jqueryui/1.12.1/i18n/datepicker-pt-PT.js"></script> 
</head>
<body>
<h1>
Using jQuery UI Datepicker
</h1>

<form>
    <label for="date">Insert Date:</label>
    <input type="text" id="date" name="date">
</form>

<script>
    // Set the default language to Portuguese
    $.datepicker.setDefaults($.datepicker.regional["pt-PT"]);

    $(function() {
        $("#date").datepicker({
            dateFormat: "dd/mm/yy", // Day/Month/Year format
            firstDay: 1 // Start the week on Monday
        });
    });
</script>

</body>
</html>

CSS

html {
  font-family: sans-serif;
}
body { background: #ccc;}


/* HEADER */
.ui-datepicker-header {
    border: none !important; /* Ensure it's removed by using !important */
    background: #e31e16 !important; /* Optional: Change background color */
    color: #fff !important;
}

/* DAYS */
.ui-datepicker td span, .ui-datepicker td a {
    display: inline-block;
    text-align: center !important;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #000;
    border: 0 !important;
}

/* ARROWS */

/* Remove the default background icons for the prev/next buttons */
.ui-datepicker-prev, .ui-datepicker-next {
    background: none !important;
    border: none;  /* Ensure no borders are applied */
}

/* Specifically target the icons and hide them */
.ui-datepicker-prev .ui-icon, .ui-datepicker-next .ui-icon {
    background-image: none !important;  /* Remove background icon */
    border: none;  /* Remove any borders applied */
}

/* Remove hover effect */
.ui-datepicker-prev.ui-corner-all:hover, 
.ui-datepicker-next.ui-corner-all:hover {
    background: none !important;  /* Remove the background color */
    border: none !important;      /* Remove the border */
    outline: none !important;     /* Remove any focus outline */
    cursor: pointer;
}

/* Custom style for the previous button (left arrow) */
.ui-datepicker-prev::before {
    content: "<";  /* Left arrow */
    color: #fff;   /* White color */
    font-size: 20px;
    display: block;
    padding: 5px;
}

/* Custom style for the next button (right arrow) */
.ui-datepicker-next::before {
    content: ">";
    color: #fff;   /* White color */
    font-size: 20px;
    display: block;
    padding: 5px;
}


/* SELECTED DAY */
/* Change the selected day's background color to the brand color */
.ui-datepicker .ui-state-active {
    background-color: #e31e16 !important;  /* Your brand color */
    border-color: #e31e16 !important;      /* Optional: match border color */
    color: #fff !important; ...