<!--mainbody-->
<br>
<h1><u>Date Time picker UI</u></h1>
<br>
<br>
<main>
  <div class="container">
    <!--calendar-->
    <div class="giz-calendar">
      <div class="giz-calendar-header">
        <div><button><span class="giz-calendar-year-title"></span></button></div>
        <div><button><span class="giz-calendar-title">Wed, 16 Jun</span></button></div>
      </div>
      <div class="giz-calendar-content">
        <div class="giz-calendar-title-switch">
          <div><button class="giz-button-rounded"><i class="fas fa-chevron-left"></i></button></div>
          <div class="giz-calendar-title-slide">June 2021</div>
          <div>
            <button class="giz-button-rounded"><i class="fas fa-chevron-right"></i></button>
          </div>
        </div>
        <div class="calendar-hide">
          <div class="giz-calendar-weekday">
            <div>Sun</div>
            <div>Mon</div>
            <div>Tue</div>
            <div>Wed</div>
            <div>Thu</div>
            <div>Fri</div>
            <div>Sat</div>
          </div>
          <div class="giz-calendar-day">
            <div><button class="active"><span class="giz-calendar-day-count">1</span></button></div>
            <div><button><span class="giz-calendar-day-count">2</span></button></div>
            <div><button><span class="giz-calendar-day-count">3</span></button></div>
            <div><button><span class="giz-calendar-day-count">4</span></button></div>
            <div><button><span class="giz-calendar-day-count">5</span></button></div>
            <div><button><span class="giz-calendar-day-count">6</span></button></div>
            <div><button><span class="giz-calendar-day-count">7</span></button></div>
            <div><button><span class="giz-calendar-day-count">8</span></button></div>
            <div><button><span class="giz-calendar-day-count">9</span></button></div>
            <div><button><span class="giz-calendar-day-count">10</span></button></div>
            <div><button><span class="giz-calendar-day-count">11</span></button></div>
            <div><button><span class="giz-calendar-day-count">12</span></button></div>
            <div><button><span class="giz-calendar-day-count">13</span></button></div>
            <div><button><span class="giz-calendar-day-count">14</span></button></div>
            <div><button><span class="giz-calendar-day-count">15</span></button></div>
            <div><button><span class="giz-calendar-day-count">16</span></button></div>
            <div><button><span class="giz-calendar-day-count">17</span></button></div>
            <div><button><span class="giz-calendar-day-count">18</span></button></div>
            <div><button><span class="giz-calendar-day-count">19</span></button></div>
            <div><button><span class="giz-calendar-day-count">20</span></button></div>
            <div><button><span class="giz-calendar-day-count">21</span></button></div>
            <div><button><span class="giz-calendar-day-count">22</span></button></div>
            <div><button><span class="giz-calendar-day-count">23</span></button></div>
            <div><button><span class="giz-calendar-day-count">24</span></button></div>
            <div><button><span class="giz-calendar-day-count">25</span></button></div>
            <div><button><span class="giz-calendar-day-count">26</span></button></div>
            <div><button><span class="giz-calendar-day-count">27</span></button></div>
            <div><button><span class="giz-calendar-day-count">28</span></button></div>
            <div><button><span class="giz-calendar-day-count">29</span></button></div>
            <div><button><span class="giz-calendar-day-count">30</span></button></div>
          </div>
        </div>
        <!--calendar month-->
        <div class="hide calendar-show">
          <div class="giz-calendar-month">
            <div><button class="active"><span class="giz-calendar-month-count">Jan</span></button></div>
            <div><button><span class="giz-calendar-month-count">Feb</span></button></div>
            <div><button><span class="giz-calendar-month-count">Mar</span></button></div>
            <div><button><span class="giz-calendar-month-count">Apr</span></button></div>
            <div><button><span class="giz-calendar-month-count">May</span></button></div>
            <div><button><span class="giz-calendar-month-count">Jun</span></button></div>
            <div><button><span class="giz-calendar-month-count">Jul</span></button></div>
            <div><button><span class="giz-calendar-month-count">Aug</span></button></div>
            <div><button><span class="giz-calendar-month-count">Sep</span></button></div>
            <div><button><span class="giz-calendar-month-count">Oct</span></button></div>
            <div><button><span class="giz-calendar-month-count">Nov</span></button></div>
            <div><button><span class="giz-calendar-month-count">Dec</span></button></div>
          </div>
          <div class="giz-calendar-action">
            <div><button>CANCEL</button> </div>
            <div><button>OK</button> </div>
          </div>
        </div>
      </div>
    </div>
    <!--/calendar-->
    <br>
    <br>
    <!--timepicker-->
    <div class="time-picker">
      <div class="time-picker-header">
        <button><span class="time-picker-title time-picker-hours">10</span></button>
        <div><span class="time-picker-title">:</span></div>
        <button><span class="time-picker-title time-picker-minute">10</span></button>
        <div class="time-picker-ampm">
          <button><span class="time-picker-label">AM</span></button>
          <button><span class="time-picker-label">PM</span></button>
        </div>
      </div>
      <div class="time-picker-content">
        <div class="shade">
          <button> <i class="fas fa-angle-up icon-size"></i></button>

          <input type="text" value="10" min="1" max="12" maxlength="2">

          <button> <i class="fas fa-angle-down icon-size"></i> </button>
        </div>
        <div>
          <span class="time-picker-separator">:</span>
        </div>
        <div class="shade">
          <button> <i class="fas fa-angle-up icon-size"></i></button>

          <input type="text" value="10" min="0" max="59" maxlength="2">

          <button> <i class="fas fa-angle-down icon-size"></i> </button>
        </div>
        <div class="timer-action">
          <button>OK</button>
          <button>CANCEL</button>
        </div>
      </div>
      <div class="time-picker-footer">
        <button>12H Format</button>
        <button class="active">24H Format</button>
      </div>
    </div>
    <!--/timepicker-->
  </div>
</main>
<br><br>
<!--/mainbody-->
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  font-size: 10px;
  font-family: "Overpass Mono", monospace;
}

h1{
  text-align:center;
}

/*calendar*/
.giz-calendar {
  margin:auto; /*this is optional property*/
  border-radius: 4px;
  max-width: 32rem;
  min-height: 1.6rem;
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); }
  .giz-calendar button {
    border: none;
    cursor: pointer;
    margin: 0;
    background-color: transparent;
    padding: 0.6rem 0.8rem; }
    .giz-calendar button > span {
      line-height: 1.75;
      letter-spacing: -0.08rem; }
  .giz-calendar .giz-calendar-header {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    background-color: blue;
    padding: 0.8rem 2.4rem; }
    .giz-calendar .giz-calendar-header button {
      color: #fff; }
      .giz-calendar .giz-calendar-header button:hover {
        background-color: #0000000d; }
      .giz-calendar .giz-calendar-header button .giz-calendar-year-title {
        font-size: 2.56rem; }
      .giz-calendar .giz-calendar-header button .giz-calendar-title {
        font-size: 3.3rem; }
  .giz-calendar .giz-calendar-content {
    background: #fff;
    padding: 0.8rem 1rem; }
    .giz-calendar .giz-calendar-content .active {
      background-color: blue;
      color: #fff; }
    .giz-calendar .giz-calendar-content .hide {
      display: none; }
    .giz-calendar .giz-calendar-content button {
      height: 3.5rem;
      width: 3.5rem;
      font-size: 1.4rem;
      display: inline-block;
      border-radius: 50%;
      background: transparent; }
      .giz-calendar .giz-calendar-content button:hover:not(.active) {
        background: #0000000d; }
    .giz-calendar .giz-calendar-content .giz-calendar-title-switch {
      align-items: center;
      margin: 0.8rem 0rem;
      display: flex;
      justify-content: space-between; }
      .giz-calendar .giz-calendar-content .giz-calendar-title-switch .giz-calendar-title-slide {
        font-size: 1.6rem; }
        .giz-calendar .giz-calendar-content .giz-calendar-title-switch .giz-calendar-title-slide:hover {
          cursor: pointer;
          font-weight: 600; }
      .giz-calendar .giz-calendar-content .giz-calendar-title-switch button:hover {
        background: #0000000d; }
    .giz-calendar .giz-calendar-content .giz-calendar-weekday {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      color: #0000008a;
      place-items: center;
      margin-bottom: 0.8rem;
      font-size: 1.2rem; }
    .giz-calendar .giz-calendar-content .giz-calendar-day {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      align-items: center;
      grid-template-rows: repeat(6, 1fr);
      place-items: center; }
      .giz-calendar .giz-calendar-content .giz-calendar-day .giz-calendar-day-count {
        font-size: 1.2rem !important; }
    .giz-calendar .giz-calendar-content .giz-calendar-month {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      place-items: center;
      grid-row-gap: 0.8rem;
      grid-template-rows: auto;
      margin-bottom: 0.8rem; }
      .giz-calendar .giz-calendar-content .giz-calendar-month .giz-calendar-month-count {
        font-size: 1.6rem; }
      .giz-calendar .giz-calendar-content .giz-calendar-month button {
        width: auto;
        border-radius: 4px;
        padding: 0.3rem 2.5rem; }
    .giz-calendar .giz-calendar-content .giz-calendar-action {
      display: flex;
      justify-content: flex-end; }
      .giz-calendar .giz-calendar-content .giz-calendar-action button {
        width: auto;
        border-radius: 4px;
        padding: 0.3rem 2.5rem;
        color: blue; }
        .giz-calendar .giz-calendar-content .giz-calendar-action button:hover {
          background-color: blue;
          color: #fff; 
}

/* time picker */
.time-picker {
  margin:auto;/*this is optional property*/
  border-radius: 4px;
  max-width: 28rem;
  min-height: 1.6rem;
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); }
  .time-picker button {
    border-radius: 4px;
    border: none;
    cursor: pointer;
    margin: 0;
    background-color: transparent;
    padding: 0.2rem 0.5rem; }
    .time-picker button > span {
      line-height: 1.75;
      letter-spacing: -0.08rem; }
  .time-picker .time-picker-header {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    background-color: blue;
    padding: 0.8rem 2.4rem;
    display: flex;
    justify-content: center;
    align-items: center; }
    .time-picker .time-picker-header .time-picker-title {
      font-size: 5.8rem;
      color: white; }
    .time-picker .time-picker-header .time-picker-ampm {
      display: flex;
      flex-direction: column; }
      .time-picker .time-picker-header .time-picker-ampm .time-picker-label {
        color: #fff;
        font-size: 1.6rem;
        font-weight: 600; }
  .time-picker .time-picker-content {
    padding: 1.2rem 1rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    text-align: center; }
    .time-picker .time-picker-content .shade button {
      height: 3.5rem;
      width: 3.5rem;
      font-size: 1.4rem;
      display: inline-block;
      border-radius: 50%; }
      .time-picker .time-picker-content .shade button:hover {
        background-color: #0000000d; }
    .time-picker .time-picker-content .shade input {
      width: 100%;
      text-align: center;
      border: none;
      font-size: 20px;
      font-weight: 500;
      padding: 10px; }
      .time-picker .time-picker-content .shade input:focus {
        outline: none;
        border: none; }
    .time-picker .time-picker-content .time-picker-separator {
      font-size: 24px; }
    .time-picker .time-picker-content .timer-action button {
      padding: 0.6rem 0.9rem;
      color: blue;
      font-size: 14px; }
      .time-picker .time-picker-content .timer-action button:hover {
        background-color: blue;
        color: white; }
  .time-picker .time-picker-footer {
    border-top: 1px solid #ddd; }
    .time-picker .time-picker-footer button {
      padding: 1.2rem 1.5rem;
      color: blue;
      font-size: 14px; }
      .time-picker .time-picker-footer button:hover {
        background-color: blue;
        color: white; }
    .time-picker .time-picker-footer .active {
      background-color: blue !important;
      color: white !important; }
$(document).ready(function(){
  //== get full year
  let year = new Date();
  let fullYear =  year.getFullYear();
 document.querySelector(".giz-calendar-year-title").innerHTML= fullYear;

    // togle active class
   $(".giz-calendar-day button, .giz-calendar-month button").click(function(){
       $(this).addClass('active');
       $(".giz-calendar-day button, .giz-calendar-month button").not(this).removeClass("active");
   });
// hide show month or days
$(".giz-calendar-title-slide").click(function(){
    $(".calendar-show").toggle();
$(".calendar-hide").toggle();
});
});

// ===== get hours and minute
let noon = 12;
let hours = new Date().getHours();
let minute = new Date().getMinutes();

let getHours = hours < 10 ? "0" + hours : hours
let getMinute = minute < 10 ? "0" + minute : minute

if(hours < noon){
var getNewFormat= hoours - 12;
}
$(".time-picker-minute").text(getMinute); 
$(".time-picker-hours").text(getNewFormat);

//active class
$(".time-picker-footer button").click(function(){ $(this).addClass("active").siblings().removeClass("active");   
})

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css
  2. https://fonts.gstatic.com
  3. https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@400;600;700&amp;display=swap

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js