datepicker 용 간단 css 정보
datepicker 용 간단 css본문
jquery datepicker 용 간단 CSS
#ui-datepicker-div { background: #fff; margin: 5px 0 0 0; padding-top: 25px; box-shadow: 10px 10px 40px rgb(0 0 0 / 10%); }
#ui-datepicker-div .ui-datepicker-header { position: relative; margin-left: 20px; margin-right: 20px; }
#ui-datepicker-div .ui-datepicker-prev { position: absolute; display: inline-block; font-size: 12px; top: -23px; left: 0; }
#ui-datepicker-div .ui-datepicker-next { position: absolute; display: inline-block; font-size: 12px; top: -23px; right: 0; }
#ui-datepicker-div .ui-datepicker-title { position: relative; clear: both; margin-top: 10px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
#ui-datepicker-div .ui-datepicker-title select { height: auto; width: calc( 50% - 15px); min-width: 90px; padding: 4px 12px; border-radius: 0; }
#ui-datepicker-div .ui-datepicker-calendar { margin-left: 20px; margin-right: 20px; }
#ui-datepicker-div .ui-datepicker-calendar th,
#ui-datepicker-div .ui-datepicker-calendar td { width: 35px; height: 30px; text-align: center; line-height: 30px; }
#ui-datepicker-div .ui-datepicker-calendar th:first-child > span,
#ui-datepicker-div .ui-datepicker-calendar td:first-child > a { color: #dc3545; }
#ui-datepicker-div .ui-datepicker-calendar th:last-child > span,
#ui-datepicker-div .ui-datepicker-calendar td:last-child > a { color: #007bff; }
#ui-datepicker-div .ui-datepicker-calendar .ui-state-active { padding: 3px 6px; background: #6f42c1; color: #fff; font-weight: 600; }
#ui-datepicker-div .ui-datepicker-buttonpane { margin-top: 10px; display: flex; }
#ui-datepicker-div .ui-datepicker-buttonpane > button { flex: 1 1 50%; max-width: 50%; text-align: center; padding: .375rem; }
#ui-datepicker-div .ui-datepicker-buttonpane > button:first-child { order: 2; background: #dc3545; color: #fff; }
#ui-datepicker-div .ui-datepicker-buttonpane > button:last-child { order: 1; }
최대한 간단하게...
6
댓글 2개
너무 감사합니다.