JSFiddle - React, Tailwind, and code Playground

HTML

<form class='day_calendar'>
<label for='from'>с: </label><input class='datepicker' type='text' id='from' name='fromDate'/>
<label for='to'>до: </label> <input class='datepicker' type='text' id='to' name='toDate'/>
<input id="button" class="submit" type="button" onclick="alert(''); return false;" value="Отправить">
</form>

CSS

/* GLOBAL styles
-----------------------------------------------------------------------------*/
.left {
    float: left;
}

.right {
    float: right;
}

.tcenter {
    text-align: center;
}

.nbackround {
    background: none !important;
}

.tleft {
    text-align: left;
}

.tright {
    text-align: right;
}

.bcenter {
    margin: 0 auto;
}

.va_midlle {
    vertical-align: middle;
}

.center_col {
    margin-top: 50%;
}

th {
    text-align: center;
}

.hidden-border {
    border-right: 1px solid transparent !important;
}

strong {
    color: #4A4A4A;
}

/*
table td {
    text-shadow: 1px 1px 0 #eee;
}
*/


table th, table td, table li {
    font: 13px/1.5 'Trebuchet MS', arial, sans-serif;
/*    text-shadow: 1px 1px 0 #eee;*/
}

/* CONTENT
-----------------------------------------------------------------------------*/
table {
    border: 1px solid #EAEAEA !important;
}

table.calls {
    margin-bottom: 0 !important;
}

table.second_nav {
    margin-bottom: 0 !important;
}

.datatable a {
    /*text-decoration: none;*/
}

form.department select, form.period select {
    margin-right: 5px;
}

form.department, form.period {
    margin-bottom: 18px;
}

select[name=D1] {
    width: 65px;
}

select[name=D2] {
    width: 145px;
}

select.interval {
    width: 145px;
}

select[name=D3] {
    width: 100px;
}

.period-title {
    margin-right: 38px;
}

.department-title {
    margin-right: 5px;
}

.selection_group select {
    width: 146px;
}

.sotrudnik_search select {
    width: 105px;
}

.type_select select {
    width: 100px;
}

/*.th_middle {display: block; margin-top: 50%;}*/
.st-toolbar {
    -moz-box-sizing: border-box;
    display: table;
    padding: 6px;
    font: 13px/1.5 'Trebuchet MS', arial, sans-serif;
}

.selection_department {
    display: block;
    float: left;
    margin-right: 20px;
}

.selection_date {
    display: block;
    position: relative;
    margin: 0;
}
section.main {min-width: 1078px;}
.selection_date li {
    display: inline-block;
  ...

JavaScript

// двум полям ввода
$("#from , #to")
// устанавливаем начальное значение (текущую дату)
.val($.datepicker.formatDate('yy.mm.dd', new Date()))
// и добавляем календарик, которому в виде опций передаем 
// русскую локализацию объединенную с массивом настроек
.datepicker($.extend({}, {
    // в call-back функции перед показом задаем доступный для выбора период
    beforeShow: function (input) {
        // считаем макс. день unix-way
        var d1 = parseInt($.datepicker.formatDate( '@', $(":input[name='fromDate']").datepicker("getDate")));
        return {
        // формируем верхнюю границу
        minDate: (input.name == "toDate" 
        // если выбран первый календарь
        ? $(":input[name='fromDate']").datepicker("getDate")
        // если выбран второй календарь
        : $.datepicker.parseDate("dd/mm/yy", "01/01/2011") ), 
        // формируем нижнюю границу
        maxDate: (input.name == "toDate"
        // если выбран второй календарь    
        ? $.datepicker.parseDate("@", d1)
        // если выбран первый календарь
        : null)
    }; 
}, 
// формат даты
dateFormat: "yy.mm.dd"
})
);