如何：自定义主题jQuery UI Datepicker

jQuery UI非常棒，并且由于易于使用，因此在几乎所有需要交互功能的网站中都很流行并且广泛使用。

并且，在本文中，我们将介绍提供的功能之一， Datepicker小部件 。

我们将尝试学习如何自定义日历主题，以便您能够创建与整体设计相对应的自己的主题。 但是，在学习本教程之前，您需要对JavaScript有一点了解并熟悉CSS。

• 演示版
• 下载源

如果您准备好了，那就开始吧。

资产

让我们为日历准备一些必要的资产。

首先，日历设计将引用Premium Pixels中的此PSD文件 。 因此，我们最好先下载它，以帮助我们对所需颜色进行采样。 然后，从“ 微妙 模式”中下载两个模式 ，我们将它们用作日历的背景。 在此示例中，我们决定使用以下图案： 黑色牛仔布和深色皮革 。

我们还将需要像Firebug这样的Web开发工具来检查由jQuery UI生成的元素类/ id。

好吧，我认为我们已经做了足够的准备。 现在开始第一步。

步骤1：jQuery UI Datepicker

首先，转到jQuery UI下载页面 。 在此页面中，将为您提供一些选项，如下所示； UI核心，小部件，交互和效果。

我们应该取消选择所有组件 ，因为我们不需要所有组件 。

然后，在“ 小部件”部分中仅选择日期选择器。 jQuery UI将自动选择基本依赖项，然后下载文件。

将所有下载的文件（ CSS除外）链接到HTML空白文档，如下所示：

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>

步骤2：自定义日期选择器

在此步骤中，我们将使用以下选项配置日期选择器。

<script type="text/javascript">
	$(function(){
		$('#datepicker').datepicker({
			inline: true,
			showOtherMonths: true,
			dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
		});
	});
</script&