Question

我使用jQuery UI DatePicker小部件并按照我自己的风格进行自定义。由于这不是一个真正的开源，我在设置日期选择器的标题时遇到了麻烦：

1.目前标题显示带有大写字母的完整月份名称，如何将其全部变为大写？ 2.它使用两个png箭头绘制next和previous符号。我只想将<和>替换为纯文本，而不是另一个png元素。
3.似乎next和previous是独立元素，与月份名称和年份无关，这意味着每当我调整窗口大小时，这些元素保持静态，而日历始终保持在中间位置。页。如何在月份和年份文本的右侧和左侧对齐它们？

编辑
4.如何将年份转换为仅显示最后两位数？从2015年开始 - ＆gt; 15。

Fiddle

CSS：

/* picker width and position*/
.ui-datepicker{
    position: relative;
    margin: 50px auto 0;
    font-size: 20px;
}

/*eliminate the underline of a tags*/
.ui-datepicker a{
    text-decoration: none;
}


.ui-datepicker table {
    position: relative;
    margin: 0 auto;
    width: 900px;
    height: 500px;
    text-align: center;
    border-collapse: collapse; /*remove double border*/
}

/*header*/

.ui-datepicker-title {
    position: relative;
    margin: 0 auto;
    width: 100px;
    left: -335px;
    margin-bottom: 30px;
}

/*the arrows definition*/
.ui-datepicker-prev, .ui-datepicker-next {
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    background-image: url('../img/arrow.png');
    background-repeat: no-repeat;
    font-size: 10px;
    position: absolute;
    overflow: hidden;
}

/*the arrows position*/
.ui-datepicker-prev {
    position:relative;
    left: 50px;

}
.ui-datepicker-next {
    position: relative;
     left: 350px;
}

/*days names treatment*/

.ui-datepicker th {
    padding: 5px 0;
    color: #666666;
    font-size: 15px;
}

.ui-datepicker td span, .ui-datepicker td a {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #666666;
    position: relative;
    bottom: 15px;
    left: 30px;
    font-size: 15px;
}


/*unselectable*/
.ui-datepicker-unselectable .ui-state-default {
    font-weight: 500;
    color: lightgrey;    

}

/*hover*/
.ui-datepicker-calendar .ui-state-hover {
    background: #f7f7f7;
    border-radius: 100px;
}

jQuery的：

$(function(){
        $('#datepicker').datepicker({
//            beforeShowDay: $.datepicker.noWeekends,
            inline: true,
            showOtherMonths: true,
            dayNamesMin: ['Sunday', 'Monday', 'Tuesday', 'Wednsday', 'Thursday', 'Friday', 'Saturday'],
        });
    });

HTML：

<div id="datepicker"></div>

EDIT2
这就是标题应该是什么样子（只有不同的箭头）： enter image description here

Answer 1

要制作标题大写，请添加

text-transform: uppercase;

到.ui-datepicker-title中的CSS。

要更改png图像，

删除

background-image: url('../img/arrow.png');
background-repeat: no-repeat;

来自.ui-datepicker-prev, .ui-datepicker-next

中CSS的

要将<和>设置为上一个和下一个文本，请使用nextText和prevText作为配置选项。

对于最后一个问题，我认为你对CSS有一些问题。请再次检查，因为默认情况下不会出现这样的问题。

要仅显示最后两位数字，请在您的配置中添加

dateFormat: "dd-mm-y"

例如：

$('#startDate').datepicker({
        dateFormat: "dd-mm-y"
    })

Answer 2

jsfiddle

代码中的更改：

.ui-icon, .ui-icon-circle-triangle-w, .ui-datepicker-prev, .ui-datepicker-next {
    background-image: none !important;
}
.ui-datepicker-prev:after {
    content: '\003c';
}
.ui-datepicker-next:after {
    content: '\003e';
}

至于你的上一次请求，我不确定你在整个页面上呈现的日历是什么意思。

Answer 3

.ui-datepicker-title { text-transform: uppercase; }
设置nextText和prevText。请参阅：http://api.jqueryui.com/datepicker/#option-nextText
我不确定你的意思。它们应该已经在左侧和右侧，并且应该响应调整日历的大小。发布一个说明问题的具体示例。

Answer 4

这是一个更新的小提琴： https://jsfiddle.net/rmk3f010/3/

如上所述：

对于大写标题：

.ui-datepicker-title {
    text-transform: uppercase;
}

对于文字箭头：

nextText: '>',
prevText: '<',

最后为了对齐：

.ui-datepicker-prev {
    float: left;

}
.ui-datepicker-next {
    float: right;
}

jQuery UI - 无法设置多个DatePicker元素的样式

4 个答案: