怎么设置jQuery日期选择器日历的样式?

本教程将介绍如何设置jQuery日期选择器日历的样式?的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

怎么设置jQuery日期选择器日历的样式? 教程 第1张

问题描述

我正尝试在div中使用DatePicker。我想在DatePicker日历打开时扩大div的高度。

我有一个类似的div:

.dateBox{
 width:160px;
 height:auto;
 border:1px solid blue;
}

问题是,当您点击DatePicker输入并打开日历时,.DateBox的高度不会改变。我一直在胡闹,但我想不通……

我怎么修复它?

直播:http://jsfiddle.net/fcrsznb1/2/

提前感谢!

推荐答案

.ui-datepicker {
 width: 300px;
 height: 300px;
 margin: 5px auto 0;
 font: 12pt Arial, sans-serif;
 /*-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
 -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);*/
}

 .ui-datepicker table {
  width: 100%;
 }

.ui-datepicker-header {
 background: #3399ff;
 color: #ffffff;
 font-family:'Times New Roman';
 border-width: 1px 0 0 0;
 border-style: solid;
 border-color: #111;
}

.ui-datepicker-title {
 text-align: center;
 font-size: 15px;

}

.ui-datepicker-prev {
 float: left;
 cursor: pointer;
 background-position: center -30px;
}

.ui-datepicker-next {
 float: right;
 cursor: pointer;
 background-position: center 0px;
}

.ui-datepicker thead {
 background-color: #f7f7f7;

 /*border-bottom: 1px solid #bbb;*/
}

.ui-datepicker th {
 background-color:#808080;
 text-transform: uppercase;
 font-size: 8pt;
 color: #666666;
 /*text-shadow: 1px 0px 0px #fff;*/
 /*filter: dropshadow(color=#fff, offx=1, offy=0);*/
}

.ui-datepicker tbody td {
 padding: 0;
 /*border-right: 1px solid #808080;*/
}

 .ui-datepicker tbody td:last-child {
  border-right: 0px;
 }

.ui-datepicker tbody tr {
 border-bottom: 1px solid #bbb;
}

 .ui-datepicker tbody tr:last-child {
  border-bottom: 0px;
 }

.ui-datepicker a {
 text-decoration: none;
}

.ui-datepicker td span, .ui-datepicker td a {
 display: inline-block;
 /*font-weight: bold;*/
 text-align: center;
 width: 30px;
 height: 30px;
 line-height: 30px;
 color: #ffffff;
 /*text-shadow: 1px 1px 0px #fff;*/
 /*filter: dropshadow(color=#fff, offx=1, offy=1);*/
}

.ui-datepicker-calendar .ui-state-default {
background: linear-gradient(#999999, #737373);
color:#ffffff;
height:40px;
width:40px;

}

.ui-datepicker-calendar .ui-state-hover {
 background: #33adff;
 color: #FFFFFF;
}

.ui-datepicker-calendar .ui-state-active {
 background: #33adff;
 -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
 -moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
 box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
 color: #e0e0e0;
 text-shadow: 0px 1px 0px #4d7a85;
 border: 1px solid #55838f;
 position: relative;
 margin: -1px;
}

.ui-datepicker-unselectable .ui-state-default {
 background: #D6E4BE;
 color: #000;
}

好了关于怎么设置jQuery日期选择器日历的样式?的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。