jquery ui datepicker修改ui风格主题

114 阅读2分钟

主题化

日期选择器部件(Datepicker Widget)使用 jQuery UI CSS 框架 来定义它的外观和感观的样式。如果需要使用日期选择器指定的样式,则可以使用下面的 CSS class 名称:

  • ​de style="border: 0px; margin: 0px; padding: 0px;" >ui-datepicker​de>:日期选择器的外层容器。如果日期选择器是内联的,该元素会另外带有一个  ​de style="border: 0px; margin: 0px; padding: 0px;" >ui-datepicker-inline​de>  class。如果设置了  ​de style="border: 0px; margin: 0px; padding: 0px;" >isRTL​de>  选项,该元素会另外带有一个  ​de style="border: 0px; margin: 0px; padding: 0px;" >ui-datepicker-rtl​de>  class。

    • ​de style="border: 0px; margin: 0px; padding: 0px;" >ui-datepicker-header​de>:日期选择器的头部容器。

      • ​de style="border: 0px; margin: 0px; padding: 0px;" >ui-datepicker-prev​de>:用于选择上一月的控件。

      • ​de style="border: 0px; margin: 0px; padding: 0px;" >ui-datepicker-next​de>:用于选择下一月的控件。

      • ​de style="border: 0px; margin: 0px; padding: 0px;" >ui-datepicker-title​de>:日期选择器包含月和年的标题容器。

    • ​de style="border: 0px; margin: 0px; padding: 0px;" >ui-datepicker-calendar​de>:包含日历的表格。

      • ​de style="border: 0px; margin: 0px; padding: 0px;" >ui-datepicker-week-end​de>:周末的单元格。: Cells containing weekend days.
      • ​de style="border: 0px; margin: 0px; padding: 0px;" >ui-datepicker-other-month​de>:发生在某月但不是当前月天数的单元格。
      • ​de style="border: 0px; margin: 0px; padding: 0px;" >ui-datepicker-unselectable​de>:用户不可选择的单元格。
      • ​de style="border: 0px; margin: 0px; padding: 0px;" >ui-datepicker-current-day​de>:已选中日期的单元格。
      • ​de style="border: 0px; margin: 0px; padding: 0px;" >ui-datepicker-today​de>:当天日期的单元格。
    • ​de style="border: 0px; margin: 0px; padding: 0px;" >ui-datepicker-buttonpane​de>:当设置  ​de style="border: 0px; margin: 0px; padding: 0px;" >showButtonPanel​de>  选项时使用按钮面板(buttonpane)。

      • ​de style="border: 0px; margin: 0px; padding: 0px;" >ui-datepicker-current​de>:用于选择当天日期的按钮。

如果 ​de style="border: 0px; margin: 0px; padding: 0px;" >numberOfMonths​de>  选项用于显示多个月份,则使用一些额外的 class:

  • ​de style="border: 0px; margin: 0px; padding: 0px;" >ui-datepicker-multi​de>:一个多月份日期选择器的最外层容器。该元素会根据要显示的月份个数另外带有  ​de style="border: 0px; margin: 0px; padding: 0px;" >ui-datepicker-multi-2​de>、​de style="border: 0px; margin: 0px; padding: 0px;" >ui-datepicker-multi-3​de>  或  ​de style="border: 0px; margin: 0px; padding: 0px;" >ui-datepicker-multi-4​de>  class 名称。

    • ​de style="border: 0px; margin: 0px; padding: 0px;" >ui-datepicker-group​de>:分组内单独的选择器。该元素会根据它在分组中的位置另外带有  ​de style="border: 0px; margin: 0px; padding: 0px;" >ui-datepicker-group-first​de>、​de style="border: 0px; margin: 0px; padding: 0px;" >ui-datepicker-group-middle​de>  或  ​de style="border: 0px; margin: 0px; padding: 0px;" >ui-datepicker-group-last​de>  class 名称。