jqueryUI 日历 datepicker

Posted 2020-10-10

<div id="calenderDiv" class="fl">

$(document).ready(
    function(){
        $("#calenderDiv").datepicker();
    }
);

.ui-datepicker {
    width: 23em;
}
.ui-widget-header {
    background: #36474f;
    color: #ffffff;
}
.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding-top: 0.4em;
    padding-right: 0px;
    padding-bottom: 0.4em;
    padding-left: 0px;
}
.ui-widget-header .ui-icon {
    background-image: url(images/ui-icons_444444_256x240.png);
}
.ui-widget-content {
    border: 1px solid #ddd;
//background: #eb6100;
    color:#ffffff;
}
.ui-datepicker-calendar thead tr{
    background: #eb6100;
}
.ui-widget-header {
    border: none;}
.ui-datepicker td span, .ui-datepicker td a {
    text-align: center;
    line-height: 2.5em;
}
.ui-datepicker table {
    font-size: 1em;
}
.ui-widget-header .ui-state-hover{
    border: 1px solid #ccc;
    margin-bottom: 2px;
}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 5px;}

.ui-widget-content .ui-state-active{
    border:none;
    background: #35464d;
    font-size:1em;
    color: #ffffff;}

.ui-widget-content .ui-state-highlight {
    border: 1px solid #f1a899;
    background: #f1a899;}
.ui-datepicker-week-end .ui-state-default{
    color:#c83b4c;
}
.ui-datepicker .ui-state-default{
    margin:0px;
    padding:0px;
    border:none;
// width:3.8em;
    height:2.5em;
    font-weight:bold;
    font-size: large;
}