Adding Styles to Date Picker

While working with date range filters, date-pickers are very helpful. They allow to select date ranges of our interest in a very convenient manner. They are nice right ??


Well what about this one ?

💡 Liked it? Then add this code to a HTML Text area to have this look and feel -
<style>
.DatePicker {
    background: black;
    border: 2px solid #ffffff;
    border-radius: 8px 0px 8px 0px;
    position: absolute;
    overflow: hidden;
    z-index: 1024;
    text-align: center;
    font-size: 11px;
    color: #fff;
    width: 189px;
    font-variant-caps: small-caps;
}
.DatePicker .Header {
    height: 22px;
    padding: 2px 0 2px 0;
    background-color: brown;
    font-size: larger;
    font-weight: bold;
}
.DatePicker .Week td.CurrentMonth {
    color: brown;
}
.DatePicker .Week td {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    color: black;
}
 </style>
⚽ To beat HTML Sanitization, use below JavaScript code - 
if(!$('#AlienBox').length){
 $('body').append($(`<style id="AlienBox">
.DatePicker {
    background: black;
    border: 2px solid #ffffff;
    border-radius: 8px 0px 8px 0px;
    position: absolute;
    overflow: hidden;
    z-index: 1024;
    text-align: center;
    font-size: 11px;
    color: #fff;
    width: 189px;
    font-variant-caps: small-caps;
}
.DatePicker .Header {
    height: 22px;
    padding: 2px 0 2px 0;
    background-color: brown;
    font-size: larger;
    font-weight: bold;
}
.DatePicker .Week td.CurrentMonth {
    color: brown;
}
.DatePicker .Week td {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    color: black;
}
 </style>`, {
        id: 'AlienBox' 
   })); 
}