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

Question

我在同一页面的两个地方使用 jQuery datepicker。但我想给他们不同的风格。当他们都拥有相同的课程时，我该怎么做？

代码：

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

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

Answer 1

当您下载 jQuery UI 时，您可以为您的主题指定 CSS 范围。当您转到下载页面时，单击“高级主题设置”的下拉菜单。

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

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

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

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

要在您的页面中包含此主题，只需将 CSS 链接指向“theme_internalNavigation”文件夹中的 ui.all.css。

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

可以在灯丝组页面上找到其他帮助。

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 功能，

例如。更改数据选择器宽度：

$('#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);
        }
    });