<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-language" content="en" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="R. Schoo" />
<meta name="copyright" content="R. Schoo. All other copyrights are property of their respective owners." />
<link rel="stylesheet" type="text/css" href="css/page.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/calendar-eightysix-default.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/calendar-eightysix-vista.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/calendar-eightysix-osx-dashboard.css" media="screen" />
<script type="text/javascript" src="js/mootools-1.2.3-core.js"></script>
<script type="text/javascript" src="js/mootools-1.2.3.1-more.js"></script>
<script type="text/javascript" src="js/calendar-eightysix-v1.0.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
new CalendarEightysix('exampleI', { 'offsetY': -4 });
new CalendarEightysix('exampleII', { 'startMonday': true, 'format': '%m.%d.%Y', 'slideTransition': Fx.Transitions.Back.easeOut, 'draggable': true, 'offsetY': -4 });
new CalendarEightysix('exampleIII', { 'excludedWeekdays': [0, 6], 'toggler': 'exampleIII-picker', 'offsetY': -4 });
new CalendarEightysix('exampleIV', { 'excludedDates': ['12/25/2012', '12/26/2012'], 'defaultDate': '12/01/2012', 'offsetY': -4 });
new CalendarEightysix('exampleV', { 'theme': 'default red', 'defaultDate': 'next Wednesday', 'minDate': 'tomorrow', 'offsetY': -4 });
new CalendarEightysix('exampleVI', { 'defaultView': 'decade', 'theme': 'vista', 'disallowUserInput': true, 'offsetY': -4 });
new CalendarEightysix('exampleVII', { 'defaultView': 'year', 'theme': 'osx-dashboard', 'alignX': 'left', 'alignY': 'bottom', 'offsetX': -4 });
new CalendarEightysix('exampleVIII', { 'format': '%A %D %B', 'alignX': 'middle', 'alignY': 'top' });
new CalendarEightysix('exampleIXb', {
'pickFunction': function(date) {
$('exampleIXa').set('value', date.get('month') + 1);
$('exampleIXc').set('value', date.get('year'));
},
'defaultDate': '1/1/2010', 'minDate': '1/1/2010', 'maxDate': '12/31/2014', 'format': '%d', 'toggler': 'exampleIX-picker', 'offsetY': -4, 'offsetX': 76
});
MooTools.lang.set('nl-NL', 'Date', {
months: ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'],
days: ['Zondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag'],
dateOrder: ['date', 'month', 'year', '/']
});
MooTools.lang.set('de-DE', 'Date', {
months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
days: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
dateOrder: ['date', 'month', 'year', '/']
});
$('exampleXa').addEvent('click', function() { MooTools.lang.setLanguage('nl-NL'); });
$('exampleXb').addEvent('click', function() { MooTools.lang.setLanguage('de-DE'); });
});
</script>
<title>Calendar Eightysix</title>
</head>
<body>
<h2>Calendar Eightysix version 1.0 - Examples</h2>
Full documentation at <a href="http://dev.base86.com/scripts/datepicker_calendar_eightysix.html">http://dev.base86.com/scripts/datepicker_calendar_eightysix.html</a>.<br />
<br /><br />
<table cellpadding="0">
<tr>
<th style="width: 100px">Example I</th>
<td><input id="exampleI" name="dateI" type="text" maxlength="10" /></td>
</tr>
<tr><td></td><td>Standard datepicker.<br /><br /></td></tr>
<tr>
<th>Example II</th>
<td><input id="exampleII" name="dateII" type="text" maxlength="10" /></td>
</tr>
<tr><td></td><td>Datepicker week starts on Monday. Different slide transition and date format. The datepicker is draggable.<br /><br /></td></tr>
<tr>
<th>Example III</th>
<td>
<input id="exampleIII" name="dateIII" type="text" maxlength="10" style="padding-right: 22px;" />
<div class="picker inElement" id="exampleIII-picker"></div>
</td>
</tr>
<tr><td></td><td>Datepicker with Saturday and Sunday as excluded weekdays. The calendar icon toggles the datepicker.<br /><br /></td></tr>
<tr>
<th>Example IV</th>
<td><input id="exampleIV" name="dateIV" type="text" maxlength="10" /></td>
</tr>
<tr><td></td><td>Datepicker with a default date of December 1st 2012 and with first and second Christmas day as excluded dates.<br /><br /></td></tr>
<tr>
<th>Example V</th>
<td><input id="exampleV" name="dateIV" type="text" maxlength="10" /></td>
</tr>
<tr><td></td><td>Datepicker with minimum date of 'tomorrow', so only dates in the future can be picked. The default date is set on 'next Wednesday'. Theme is Default, red style.<br /><br /></td></tr>
<tr>
<th>Example VI</th>
<td><input id="exampleVI" name="dateVI" type="text" maxlength="10" /></td>
</tr>
<tr><td></td><td>Datepicker with decade as the default view and Vista theme. User input is disallowed.<br /><br /></td></tr>
<tr>
<th>Example VII</th>
<td><input id="exampleVII" name="dateVII" type="text" maxlength="10" /></td>
</tr>
<tr><td></td><td>Datepicker with year as the default view and OSX Dashboard theme. Position is bottom left.<br /><br /></td></tr>
<tr>
<th>Example VIII</th>
<td><div id="exampleVIII"> </div></td>
</tr>
<tr><td></td><td>Datepicker with a middle top position and different date format. Target is a div element instead of an input text element.<br /><br /></td></tr>
<tr>
<th>Example IX</th>
<td>
<select id="exampleIXa"><option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4">April</option><option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">August</option><option value="9">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select>
<input id="exampleIXb" type="text" maxlength="2" style="width: 24px;" />
<select id="exampleIXc"><option value="2010">2010</option><option value="2011">2011</option><option value="2012">2012</option><option value="2013">2013</option><option value="2014">2014</option></select>
<img id="exampleIX-picker" src="img/calendar.gif" width="13" height="12" alt="" style="cursor: pointer;" />
</td>
</tr>
<tr><td></td><td>Datepicker with a custom pick function, which sets the month and year drop-downs. Date range from January 1st 2010 to December 31st 2014.<br /><br /></td></tr>
<tr>
<th>Example X</th>
<td><button id="exampleXa" type="button">Dutch (nl-NL)</button> <button id="exampleXb" type="button">German (de-DE)</button></td>
</tr>
<tr><td></td><td>Change the language of all the datepickers by clicking one of the buttons above.<br /></td></tr>
</table>
<br />
<br />
<br />
<br />
</body>
</html>
Mototools和Calendar-eightysix jQuery共同打造的日历插件.zip （40个子文件） 
132674359177049350 likecs.com_132674359181313432 calendar-eightysix-v1.00 css 
calendar-eightysix-osx-dashboard.css 5KB page.css 1KB calendar-eightysix-vista.css 7KB calendar-eightysix-default.css 9KB img 
calendar.gif 523B vista arrow-right.gif 65B arrow-left.gif 99B
background.png 6KB background.gif 4KB arrow-right-hover.gif 41B arrow-left-hover.gif 41B day.gif 810B year-decade.gif 1KB shading.png 3KB default footer-blue.png 3KB arrow-left-hover-green.png 3KB background.png 4KB arrow-left-hover-red.png 3KB footer-green.png 3KB background.gif 2KB arrow-right-hover-blue.png 3KB arrow-right-hover-red.png 3KB footer-red.png 3KB arrow-right.png 3KB arrow-left.png 3KB arrow-right-hover-green.png 3KB arrow-left-hover-blue.png 3KB osx-dashboard arrow-right.gif 93B arrow-left.gif 93B background.png 4KB background.gif 1KB arrow-right-hover.gif 49B arrow-left-hover.gif 49B js mootools-1.2.3-core.js 86KB mootools-1.2.3.1-more.js 23KB calendar-eightysix-v1.0.js 20KB compressed mootools-1.2.3-core.js 55KB mootools-1.2.3.1-more.js 15KB calendar-eightysix-v1.0.js 10KB
examples.html 7KB资源评论
