JQuery Datepicker针对不同实例的不同样式

Question

我在同一页面上的两个地方使用jQuery datepicker。但我想给他们不同的风格。我怎么能这样做，而他们都有相同的类？

代码：

$('#startDate').datepicker({ dateFormat: "DD, MM d, yy" });
$('#endDate').datepicker({ dateFormat: "DD, MM d, yy" });

这两个日期选择器应该看起来不同。

Answer 1

下载jQuery UI时，可以指定主题的CSS范围。当您转到download page时，请点击高级主题设置的下拉列表。

为了利用主题范围，您首先需要选择一个主题。当您在ThemeRoller中下载主题时，您将再次被定向回到下载构建器以自定义下载。

您可以在主题范围字段中输入一个CSS选择器，表示您的主题应该应用的页面（或您的网站）的一部分。例如，如果您的站点的侧面导航栏中有一个手风琴小部件，并且您希望它具有与站点的其他区域不同的主题，则可以键入与该侧面导航栏对应的CSS选择器（例如。 interiorNavigation）并下载您的主题。构建器将在范围选择器后面添加一个空格，因此不必担心需要添加空格。

在键入CSS范围时，构建器将建议相应的主题文件夹名称。此名称可以编辑，除非在您输入范围字段时文件夹字段为空或未编辑，否则不会自动建议另一个名称。

下载并解压缩zip文件后，您会看到它包含一个名为“theme”的主题文件夹（或您输入的任何自定义名称）。在该文件夹中，您将找到构成jQuery UI CSS Framework的所有文件。假设您在“主题范围”字段中输入了一个范围，则此文件夹中包含的所有CSS都将作用于您的选择器。

要在您的网页上添加此主题，只需将CSS链接指向“theme_internalNavigation”文件夹中的ui.all.css即可。

<link type="text/css" href="theme_interiorNavigation/ui.all.css" rel="Stylesheet" />

可以在filament group页面上找到其他帮助。

Answer 2

幸运的是我改变了设计。我的一个日期选择器现在是内联的，另一个是普通的日期选择器。我编写了这段代码来实现所需的样式：

<input type="text" name="startDate" id="startDate" onclick="applyDatepickerBorder();"/>

在Javascript中我定义了这个方法：

function applyDatepickerBorder(){
    // Inline datepicker doesn't have this id
    $('#ui-datepicker-div').css('border','1px solid');
}

这是我最终得到的：

Answer 3

你也可以使用beforeShow函数，

  

例如。 for change datapicker width：

$('#input-field-id')
    .datepicker({ 
        beforeShow: function(input_element, dp_instance){
            setTimeout(function(){
                // enter your styling here 
                $(dp_instance.dpDiv).css('width', '300px');
            },1, dp_instance);
        }
    });