jquery ui datepicker修改ui风格主题

应俊爽
2023-12-01

主题化

日期选择器部件(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 名称。
 类似资料: