javascript calendar万年历使用实例

最新推荐文章于 2024-08-16 07:53:54 发布

原创最新推荐文章于 2024-08-16 07:53:54 发布 · 895 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#calendar #javascript #日历 #class #input #脚本

javaScript 专栏收录该内容

1 篇文章

订阅专栏

jQuery Calendar是一个跨浏览器的日历插件，本篇博客介绍了如何将其集成到网页中并进行个性化设置。通过在<head>部分引入JS脚本和CSS样式表，你可以实现日历功能。对于样式调整，可以修改calendar-demo.js和jquery-calendar.css。同时，文章展示了如何通过JavaScript代码改变日历的默认配置，如日期格式、月份和星期名称、最小最大日期等。

jquery calendar是一个很酷的日历效果，在多个浏览器测试过，都比较正常。下面来介绍一下如何使用这个日历到具体的web页面中。

head设置，将日历运行的js脚本以及css样式表装载

</style>

如果要对日历进行特殊设置，jquery-calendar.css可以修改成你自己喜欢的样式，这对css的代码要有一定的基础才行。

如要修改日历的基本配置，可以修改calendar-demo.js中的代码，如下代码，及对应于页面展示的脚本

$(document).ready(function () {
popUpCal.hideCalendar();
// default setting
popUpCal.closeText = 'Close';
popUpCal.prevText = '<Prev';
popUpCal.nextText = 'Next>';
popUpCal.currentText = 'Today';
popUpCal.dayNames = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
popUpCal.monthNames = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
popUpCal.dateFormat = 'DMY/';
popUpCal.minDate = new Date(2005, 4 - 1, 1);
popUpCal.maxDate = new Date(2008, 4 - 1, 30);
$('#more div').hide();
$('#more0').show();
popUpCal.autoPopUp = false;
$('.calendarButton').calendar();
popUpCal.autoPopUp = true;
$('.calendarFocus').calendar();
});

配置好后，只要在页面body中，写下如下代码，即可看到日历的效果
<div class="container">
<p>Calendar appears on focus: <input type="text" size="10" class="calendarFocus"/></p>
<p>Calendar appears via button: <input type="text" size="10" class="calendarButton"/></p>
</div>