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

我正在使用jqueryui

DatePicker

widget，并以自己的风格进行定制。因为这不是一个真正的开源软件，所以我很难设置日期选择器的标题：

1.当前标题显示的是带大写字母的完整月份名称，如何将其全部大写？
2.它使用两个

png

箭头来绘制

next

和

previous

符号。我只想将其替换为

纯文本，而不是另一个

png

元素。
3.似乎<>代码> NeX//COD>和以前的是独立的元素，与月份名称和年份无关，这意味着每当我调整窗口大小时，这些元素保持静态，而日历总是停留在页面的中间。如何在月份和年份文本的左右两侧对齐它们？

编辑
4.如何将年份转换为仅显示最后两位数？从2015年起-->15年

CSS:

jQuery：

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

HTML:

编辑2
这是标题的外观（仅带有不同的箭头）：

---

要使标题大写，请添加

text-transform: uppercase;

在您的

CSS

中添加到

.ui日期选择器标题

要更改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"

例如：

---

要使标题大写，请添加

text-transform: uppercase;

在您的

CSS

中添加到

.ui日期选择器标题

要更改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"

例如：

.ui日期选择器标题{文本转换：大写；}

设置

nextText

和

prevText

。见：

我不知道你在这里是什么意思。它们应该已经位于左侧和右侧，并且应该对调整日历的大小作出响应。张贴一个具体的例子来说明你的问题

.ui日期选择器标题{文本转换：大写；}

设置

nextText

和

prevText

。见：

我不知道你在这里是什么意思。它们应该已经位于左侧和右侧，并且应该对调整日历的大小作出响应。张贴一个具体的例子来说明你的问题

代码的变化：

.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';
}

至于你最后的请求，我不确定你的意思，因为日历显示在整个页面上。

代码的变化：

.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';
}

至于你的最后一个请求，我不确定你的意思，因为日历显示在整个页面上。

这里有一个更新的提琴：

如前所述：

大写标题：

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

对于文本箭头：

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

这是最新的提琴：

如前所述：

大写标题：

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

对于文本箭头：

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

---

---

您是否加载jquery css？（因为我没有在小提琴上看到它（或者你不想加载它？）不，这是我自己的风格。检查我的答案@undroiddo你加载jquery css了吗？（因为我没有在小提琴上看到它（或者你不想加载它？）不，这是我自己的风格。检查我的答案@undroidsage of

！重要信息

一点也不受欢迎。而不是使用

！重要信息

我们应该尝试找出问题的确切根源并解决它。我同意，找出问题的根源是最好的做法，但是，由于jQuery是一个巨大的库，我只是默认使用它。如果我们知道类名，查找和替换有什么困难？有时人们无法访问原始CSS文件。。。特别是如果他们从CDN导入的话。我不是在和你争论。只是指出，使用

不是最佳实践！重要信息

。

的用法！重要信息

一点也不受欢迎。而不是使用

！重要信息

我们应该尝试找出问题的确切根源并解决它。我同意，找出问题的根源是最好的做法，但是，由于jQuery是一个巨大的库，我只是默认使用它。如果我们知道类名，查找和替换有什么困难？有时人们无法访问原始CSS文件。。。特别是如果他们从CDN导入的话。我不是在和你争论。只是指出，使用

不是最佳实践！重要信息

。谢谢。是否可以使用这些

来“包装”月份和年份，而不将它们浮动到边缘？不确定使用包装是什么意思？您可以使用50%的绝对值使其与完整标题重叠…使其看起来像：

<2015年5月>

不要认为有一个优雅的解决方案，因为日期选择器缺少事后事件…谢谢。是否可以使用这些

来“包装”月份和年份，而不将它们浮动到边缘？不确定使用包装是什么意思？您可以使用50%的绝对值使其与完整标题重叠…使其看起来像：

<2015年5月>

不要认为有一个优雅的解决方案，因为日期选择器缺少事后事件…感谢提示，恐怕您的年度格式解决方案不起作用，它没有效果。关于

？谢谢你的提示，恐怕你的解决方案