转载

如何使用 jQuery 和 CSS3 创建一个日历控件

这个教程将教你如何使用 jQuery 和 CSS3 来创建一个绚丽的日历控件。我们将使用 CSS 来做样式,使用 jQuery 和 jQuery UI 来做功能。我们将只使用 jQuery UI 中的 “Datepicker” 脚本,所以你不需要下载所有的组件,可以让你的文件更小。

如何使用 jQuery 和 CSS3 创建一个日历控件

第一步 - HTML 代码

我们只需要一行 HTML 代码,请注意这里的 id 属性:

  1. <div id= "calendar" ></div> 

在 body 标签之前,我们添加 jQuery 代码。这里我们需要调用“datepicker”,你需要上面定义的 div 的 id 属性。我们在这里添加了一些选项:

inline - 让日历默认可见,不需要点击或者输入控件

firstDay - 设置 Monday 为一周的开始

showOtherMonths - 在表格中填充其他月份的日期以充满表格

更多选项的解释,请查看文档。

  1. <script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script> 
  2. <script src= "js/jquery-ui-datepicker.min.js" ></script> 
  3. <script> 
  4. $( '#calendar' ).datepicker({ 
  5. inline: true, 
  6. firstDay:  1
  7. showOtherMonths: true, 
  8. dayNamesMin: [ 'Sun' 'Mon' 'Tue' 'Wed' 'Thu' 'Fri' 'Sat'
  9. }); 
  10. </script> 

现在日历看起来是这样的:

如何使用 jQuery 和 CSS3 创建一个日历控件

正文到此结束
Loading...