JSFiddle - React, Tailwind, and code Playground

by jt3k

HTML

Впишыте время:<br>
<input type="text" name="tm"><br>

<div id="autoSetClock">
    Чесы:<br>
    <div>
        <a href="#">00</a><a href="#">01</a><a href="#">02</a><a href="#">03</a><a href="#">04</a><a href="#">05</a><br>
        <a href="#">06</a><a href="#">07</a><a href="#">08</a><a href="#">09</a><a href="#">10</a><a href="#">11</a><br>
        <a href="#">12</a><a href="#">13</a><a href="#">14</a><a href="#">15</a><a href="#">16</a><a href="#">17</a><br>
        <a href="#">18</a><a href="#">19</a><a href="#">20</a><a href="#">21</a><a href="#">22</a><a href="#">23</a><br>
    </div>
    <hr>
Менуты:<br>
    <div>
        <a href="#">00</a><a href="#">05</a><a href="#">10</a><a href="#">15</a><a href="#">20</a><a href="#">25</a><br>
        <a href="#">30</a><a href="#">35</a><a href="#">40</a><a href="#">45</a><a href="#">50</a><a href="#">55</a>
    </div>
</div>

Впишыте дату:<br>
<input type="text" name="dta"><br>
<div id="autoSetDate">
    Число:<br>
    <div><a href="#">01</a><a href="#">02</a><a href="#">03</a><a href="#">04</a><a href="#">05</a><a href="#">06</a><br>
        <a href="#">07</a><a href="#">08</a><a href="#">09</a><a href="#">10</a><a href="#">11</a><a href="#">12</a><br>
        <a href="#">13</a><a href="#">14</a><a href="#">15</a><a href="#">16</a><a href="#">17</a><a href="#">18</a><br>
        <a href="#">19</a><a href="#">20</a><a href="#">21</a><a href="#">22</a><a href="#">23</a><a href="#">24</a><br>
        <a href="#">25</a><a href="#">26</a><a href="#">27</a><a href="#">28</a><a href="#">29</a><a href="#">30</a><br>
        <a href="#">31</a>
    </div>
    <hr>
    Месяц:<br>
    <div>
        <a href="#" title="Январь">01</a><a href="#" title="Февраль">02</a><a href="#" title="Март">03</a><a href="#" title="Апрель">04</a><a href="#" title="Май">05</a><a href="#" title="Июнь">06</a><br>
        <a href="#" title="Июль">07</a><a href="#" title="Август">08</a><a href="#" title="Сентябрь">09</a><a href="#"...

CSS

#autoSetClock,
#autoSetDate { background:white; border: 2px solid black;padding:5px;
  display:inline-block;overflow:auto; position:absolute;
    
}


#autoSetClock hr,
#autoSetDate hr { margin: 5px 0 0; height: 0; border:0px }

#autoSetClock div,
#autoSetDate div {
    display:inline-block;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    font-family: monospace;
}


#autoSetClock div a,
#autoSetDate div a {
    display:inline-block;
    border-left: 1px solid black;
    border-top: 1px solid black;
    padding:1px 5px;
    text-decoration:none;
    color:black;
    /*width:20px; в некоторых браузерах почемуто ширина числа 11 разная лечится или  выставлением ширины вручную, либо использованием нормального шрифта font-family: monospace;*/
}

#autoSetClock div a:hover,
#autoSetDate div a:hover{ color:white; background:gray}

#autoSetClock div a:active,
#autoSetDate div a:active { color:white; background:orange}

JavaScript

$(function () {
    var d, tim, dat, yea, mou, da, hou, minu, ele, eled;

    function addZero(va) {
        return va.toString().length === 1 ? '0' + va.toString() : va.toString()
    }(function nowDaTime() {
        d = new Date();
        //кромсаем вывод  даты
        dat = d.toString().split(' ');
        tim = dat[4].split(':');
        //пиременныые па умалчянию
        yea = -[1,] ? d.getYear() + 1900 : d.getYear(), mou = addZero(d.getMonth() + 1), da = addZero(d.getDate().toString()), hou = addZero(d.getHours()), minu = addZero(d.getMinutes());
        ele = document.getElementsByName('tm')[0], //Ставим айдиху инпута времени
        eled = document.getElementsByName('dta')[0]; //Ставим  айдиху инпута даты
        //ставим время и  дату
        ele.value = hou + ':' + minu;
        eled.value = da + '.' + mou + '.' + yea;
    })()
    //скрываем блоки с кнопками
    $('#autoSetClock,  #autoSetDate').hide();
    //марафет с кубиками даты
    $('#autoSetDate  div:first').css('border', '0');
    $('#autoSetDate  div:first a:gt(23)').css('border-bottom', '1px solid black').last().css({
        'border-right': '1px solid black',
        'border-top': '0'
    });
    $('#autoSetDate div:first a:nth-child(7n-1)').css('border-right', '1px solid black');
    //вбиваем актуальные года (надо уточнить у начяльства  с какого  надо начинать.)
    $('#autoSetDate div:last').html('<a href="#">' + (yea - 1) + '</a><a  href="#">' + yea + '</a><a  href="#">' + (yea - 0 + 1) + '</a>');
    //докручиваем  мараферт с годами
    $('#autoSetDate div:last  a').css('padding', '1px 10px 1px  11px');
    //клик по инпуту времени
    $(ele).click(

    function () {
        $('#autoSetDate').fadeOut(150);
        $('#autoSetClock').toggle().mouseleave(function () {
            $(this).fadeOut(150);
        });
    });
    //клик по инпуту  даты
    $(eled).click(

    function () {
        $('#autoSetClock').fadeOut(150);
        $('#autoSetDate').toggle().mouseleave(function () {
  ...