react-datepicker-cy/docs/css/react-datepicker2.css

react datepicker component. (include persian jalaali calendar)

.calendarContainer {
    font-family: 'Open Sans','Vazir';
    border-radius: 3px;
    box-shadow: 0 3px 10px #dbdbdb;
    border: 1px solid #cccccc;
    width: 300px;
    margin: auto;
    text-align: center;
    padding: 10px;
    background-color: #fff;
}

.calendarContainer * {
    box-sizing: border-box;
}

.calendarContainer .dayPickerContainer:after,
.calendarContainer .monthsList:after,
.calendarContainer .daysOfWeek:after {
    content: '';
    display: block;
    clear: both;
}

.datepicker-input{
    box-sizing: border-box;
}


/* Heading */

.calendarContainer .heading {
    height: 42px;
    font-weight: bold;
    margin-bottom: 10px;
}

.calendarContainer .heading>button {
    border-radius: 3px;
    background: none;
    margin: 5px 0;
    border: 1px solid #F7F7F7;
    text-align: center;
    line-height: 30px;
    width: 36px;
    height: 32px;
    cursor: pointer;
}

.calendarContainer .heading>button:hover {
    background-color: #f2f2f2;
}

.calendarContainer .heading>span {
    line-height: 35px;
}

.calendarContainer .heading svg {
    width: 10px;
}

.calendarContainer .heading .prev {
    float: right;
}

.calendarContainer .heading .next {
    float: left;
}

.calendarContainer .heading .title {
    line-height: 32px;
    width: auto;
    height: 32px;
    font-size: 1em;
    margin: 5px 0;
    border: 1px solid #F7F7F7;
    text-align: center;
    display: inline-block;
    font-weight: normal;
    padding: 0 6px;
}


/* Day wrapper styles */

.calendarContainer .dayWrapper {
    padding: 5;
    float: left;
    width: 14.28571429%;
}


/* Day wrapper button styles */

.calendarContainer .dayWrapper button {
    border: none;
    background: none;
    outline: none;
    width: 100%;
    height: 36px;
    border-radius: 3px;
    cursor: pointer;
}

.calendarContainer .dayWrapper button:hover {
    background-color: #eeeeff;
}

.calendarContainer .dayWrapper button[disabled] {
    color: #aaa;
    cursor: not-allowed;
    background-color: #ebebeb;
}

.calendarContainer .dayWrapper button.selected {
    background-color: #337ab7;
    color: #ffffff;
}

.calendarContainer .dayWrapper:not(.currentMonth) button {
    opacity: .5;
}


/* Days of week row */

.calendarContainer .daysOfWeek {
    border-bottom: 1px solid #EEE;
    margin-bottom: 5px;
    padding-bottom: 5px;
    display: flex;
    width: 100%;
}

.calendarContainer .daysOfWeek>div {
    flex-grow: 1;
    justify-content: space-between;
}


/* Month selector portion */

.calendarContainer .monthsList {
    clear: both;
    width: 100%;
}

.calendarContainer .monthsList button {
    width: 33.33333332%;
    height: 25%;
    float: right;
    border: 1px solid #F9F9F9;
    outline: none;
    font-size: 1em;
    background: #fff;
    padding: 10px 0;
    cursor: pointer;
}

.calendarContainer .monthsList button:hover {
    background: #eeeeee;
    cursor: pointer;
}


/* Selected state of buttons */

.calendarContainer .selected button,
.calendarContainer .selected button:hover,
.calendarContainer .selected button:active,
.calendarContainer .selected button:focus {
    background-color: #337ab7;
    color: #ffffff;
}

.calendarContainer.jalaali {
    direction: rtl;
}

.calendarContainer.jalaali .dayWrapper {
    float: right;
}


/*time picker style*/

.time-picker-container {
    margin-bottom: 10
}

.time-picker-container>.time-label {
    float: left;
    line-height: 30px;
    width: 50%;
    text-align: center;
}

.time-picker-container>.time-picker-panel {
    float: right;
    width: 50%;
}

.time-picker-container.jalaali>.time-label {
    float: right;
}

.time-picker-container.jalaali>.time-picker-panel {
    float: left;
}

.rc-time-picker {
    display: inline-block;
    box-sizing: border-box;
}

.rc-time-picker * {
    box-sizing: border-box;
}

.rc-time-picker-input {
    direction: ltr;
    text-align: center;
    width: 100%;
    position: relative;
    display: inline-block;
    padding: 4px 7px;
    height: 28px;
    cursor: text;
    font-size: 12px;
    line-height: 1.5;
    color: #666;
    background-color: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    transition: border 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.rc-time-picker-panel {
    font-family: 'Open Sans','Vazir';
    z-index: 1070;
    width: 170px;
    position: absolute;
    box-sizing: border-box;
}

.rc-time-picker-panel * {
    box-sizing: border-box;
}

.rc-time-picker-panel-inner {
    display: inline-block;
    position: relative;
    outline: none;
    list-style: none;
    font-size: 12px;
    text-align: left;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 5px #ccc;
    background-clip: padding-box;
    border: 1px solid #ccc;
    line-height: 1.5;
}

.rc-time-picker-panel-input {
    margin: 0;
    padding: 0;
    width: 100%;
    cursor: auto;
    line-height: 1.5;
    outline: 0;
    border: 1px solid transparent;
}

.rc-time-picker-panel-input-wrap {
    box-sizing: border-box;
    position: relative;
    padding: 6px;
    border-bottom: 1px solid #e9e9e9;
}

.rc-time-picker-panel-input-invalid {
    border-color: red;
}

.rc-time-picker-panel-clear-btn {
    position: absolute;
    right: 6px;
    cursor: pointer;
    overflow: hidden;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    top: 6px;
    margin: 0;
}

.rc-time-picker-panel-clear-btn:after {
    content: "x";
    font-size: 12px;
    color: #aaa;
    display: inline-block;
    line-height: 1;
    width: 20px;
    transition: color 0.3s ease;
}

.rc-time-picker-panel-clear-btn:hover:after {
    color: #666;
}

.rc-time-picker-panel-select {
    float: left;
    font-size: 12px;
    border: 1px solid #e9e9e9;
    border-width: 0 1px;
    margin-left: -1px;
    box-sizing: border-box;
    width: 56px;
    overflow: hidden;
    position: relative;
}

.rc-time-picker-panel-select-active {
    overflow-y: auto;
}

.rc-time-picker-panel-select:first-child {
    border-left: 0;
    margin-left: 0;
}

.rc-time-picker-panel-select:last-child {
    border-right: 0;
}

.rc-time-picker-panel-select ul {
    list-style: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: 100%;
    max-height: 144px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.rc-time-picker-panel-select li {
    list-style: none;
    box-sizing: content-box;
    margin: 0;
    padding: 0 0 0 16px;
    width: 100%;
    height: 24px;
    line-height: 24px;
    text-align: left;
    cursor: pointer;
    user-select: none;
}

.rc-time-picker-panel-select li:hover {
    background: #edfaff;
}

li.rc-time-picker-panel-select-option-selected {
    background: #edfaff;
    color: #2db7f5;
}

li.rc-time-picker-panel-select-option-disabled {
    color: #bfbfbf;
}

li.rc-time-picker-panel-select-option-disabled:hover {
    background: transparent;
    cursor: not-allowed;
}