Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 5839d11174
Fetching contributors…

Cannot retrieve contributors at this time

597 lines (549 sloc) 24.179 kb
<!DOCTYPE html>
<html lang="en">
<head>
<title>Unobtrusive JavaScript datePicker demo ~ frequency decoder</title>
<meta charset="utf-8" />
<!--
Add the English language translation file
-->
<script src="./js/lang/en.js"></script>
<!--
Add the datepicker script and set the ARIA describedby property to point to
the table that explains keyboard controls (by passing it in a JSON block
within the script tag). Don't worry, you don't have to set the describedby
parameter, I'm just showing you how it can be done.
-->
<script src="./js/datepicker.min.js">{"describedby":"fd-dp-aria-describedby"}</script>
<!-- Styles for the demo -->
<link href="./css/demo.css" rel="stylesheet" type="text/css" />
<!-- Add the datepicker stylesheet -->
<link href="./css/datepicker.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form method="post" action="">
<h1>Unobtrusive JavaScript datepicker widgit</h1>
<!-- The ARIA describedby property set above points to the following div -->
<div id="fd-dp-aria-describedby">
<h2>Keyboard Controls</h2>
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr><td><kbd>&larr;</kbd> <kbd>&rarr;</kbd> <kbd>&uarr;</kbd> <kbd>&darr;</kbd></td><td>Day navigation</td></tr>
<tr><td><kbd>Page Up</kbd></td><td>Previous month</td></tr>
<tr><td><kbd>Page Down</kbd></td><td>Next month</td></tr>
<tr><td><kbd>Ctrl</kbd> + <kbd>page up</kbd></td><td>Previous year</td></tr>
<tr><td><kbd>Ctrl</kbd> + <kbd>page down</kbd></td><td>Next year</td></tr>
<tr><td><kbd>Space</kbd></td><td>Today&#8217;s date</td></tr>
<tr><td><kbd>Esc</kbd></td><td>Close datepicker (without selecting date)</td></tr>
<tr><td><kbd>Return</kbd></td><td>Select highlighted date and close datepicker</td></tr>
<tr><td><kbd>2</kbd>&ndash;<kbd>7</kbd></td><td>Select the corresponding day as the first day of the week</td></tr>
</tbody>
</table>
</div>
<!--
DEMO #1
-->
<fieldset>
<legend>Demo #1</legend>
<ul>
<li>A bare-bones datepicker that uses a single text input to represent the day, month and year date parts</li>
</ul>
<label for="demo-1">Date</label> <input type="text" class="w8em" id="demo-1" name="demo-1" value="" maxlength="10" />
</fieldset>
<script>
datePickerController.createDatePicker({
// Associate the text input to a DD/MM/YYYY date format
formElements:{"demo-1":"%d/%m/%Y"}
});
</script>
<!--
DEMO #2
-->
<fieldset>
<legend>Demo #2</legend>
<ul>
<li>Displaying the week number within the datePicker interface</li>
<li>Setting a statusbar date format</li>
<li>
Disabling various dates and then re-enabling some of them - to show you how the order of the disable/enable calls are important. Dates are disabled/enabled in the following order:
<ol>
<li>Disable March the 13<sup>th</sup> for all years</li>
<li>Disable the 25<sup>th</sup> to the 31<sup>st</sup> for all months and all years</li>
<li>Disable July 01<sup>st</sup> to July 08<sup>th</sup> for all years</li>
<li>Disable today&#8217;s date</li>
<li>Enable the 03<sup>th</sup> to the 05<sup>th</sup> of July for all years</li>
<li>Enable the 25<sup>th</sup> December for all years</li>
</ol>
</li>
</ul>
<label for="demo-2">Date</label> <input type="text" class="w8em" id="demo-2" name="demo-2" value="" />
</fieldset>
<script>
// Create a few variables to pass to the datePicker
var disabledDates = {
// Disable March the 13th for all years
"****0313":1,
// Disable the 25th to the 31st for all months and all years
"******25":"******31",
// Disable July 01st to July 08th for all years
"****0701":"****0708"
},
enabledDates = {
// Enable the 03rd to the 05th of July for all years - this should
// take precedence over the last disabled date rule declared above
"****0703":"****0705",
// Enable Christmas day for all years - this should take precedence
// over the second disabled rule above
"****1225":1
};
// Disable today's date
disabledDates[datePickerController.dateToYYYYMMDDStr(new Date())] = 1;
// Create the datePicker
datePickerController.createDatePicker({
// Associate the three text inputs to their date parts
formElements:{"demo-2":"%d/%m/%Y"},
// Show week numbers
showWeeks:true,
// Set a statusbar format
statusFormat:"%l, %d%S %F %Y"
});
// Disable the required dates
datePickerController.setDisabledDates("demo-2", disabledDates);
// Enable the required dates. As these have been set after the
// disabled dates they will take precedence.
datePickerController.setEnabledDates("demo-2", enabledDates);
</script>
<!--
DEMO #3
-->
<fieldset>
<legend>Demo #3</legend>
<ul>
<li>Using three text inputs to represent the individual day, month and year date parts</li>
<li>Removing the &#8220;today&#8221; button from the U.I.</li>
<li>Disabling the 25<sup>th</sup> of December for all years</li>
<li>Filling the entire grid with dates</li>
<li>Enabling the selection of all dates rendered within the grid</li>
</ul>
<input type="text" class="w2em" id="demo-3-dd" name="demo-3-dd" value="" maxlength="2" placeholder="DD" />
/
<input type="text" class="w2em" id="demo-3-mm" name="demo-3-mm" value="" maxlength="2" placeholder="MM" />
/
<input type="text" class="w4em" id="demo-3" name="demo-3" value="" maxlength="4" placeholder="YYYY" />
</fieldset>
<script>
datePickerController.createDatePicker({
// Associate the three text inputs to their date parts
formElements:{"demo-3":"%Y","demo-3-mm":"%m","demo-3-dd":"%d"},
// Show the week numbers
showWeeks:true,
// Set a statusbar format
statusFormat:"%l, %d%S %F %Y",
// Remove the "Today" button
noTodayButton:true,
// Fill the entire grid with dates
fillGrid:true,
// Enable the selection of dates not within the current month
// but rendered within the grid (as we used fillGrid:true)
constrainSelection:false
});
// Disable the 25th of December for all years
datePickerController.setDisabledDates("demo-3", {"****1225":1});
</script>
<!--
DEMO #4
-->
<fieldset>
<legend>Demo #4</legend>
<ul>
<li>Using three select lists to represent the day, month and year date parts</li>
<li>Disabling Monday and Tuesday</li>
<li>Using a callback function to display a long-hand date format beside the form elements</li>
</ul>
<p>Note: the high &amp; low ranges will be automatically calculated by the script when a select list is used to represent the year date part, so there&#8217;s no need to set a <code>rangeLow</code> or <code>rangeHigh</code> when creating the datepicker.</p>
<select id="date-sel-dd" name="date-sel-dd">
<option value="-1">Day</option>
<option value="1">1st</option>
<option value="2">2nd</option>
<option value="3">3rd</option>
<option value="4">4th</option>
<option value="5">5th</option>
<option value="6">6th</option>
<option value="7">7th</option>
<option value="8">8th</option>
<option value="9">9th</option>
<option value="10">10th</option>
<option value="11">11th</option>
<option value="12">12th</option>
<option value="13">13th</option>
<option value="14">14th</option>
<option value="15">15th</option>
<option value="16">16th</option>
<option value="17">17th</option>
<option value="18">18th</option>
<option value="19">19th</option>
<option value="20">20th</option>
<option value="21">21st</option>
<option value="22">22nd</option>
<option value="23">23rd</option>
<option value="24">24th</option>
<option value="25">25th</option>
<option value="26">26th</option>
<option value="27">27th</option>
<option value="28">28th</option>
<option value="29">29th</option>
<option value="30">30th</option>
<option value="31">31st</option>
</select>
<select id="date-sel-mm" name="date-sel-mm">
<option value="-1">Month</option>
<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>
<select id="date-sel" name="date-sel">
<option value="-1">Year</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
</select>
<!--
A span to display the long-hand date format using the "showEnglishDate"
function defined below
-->
<span id="date-sel-out"></span>
</fieldset>
<script type="text/javascript">
datePickerController.createDatePicker({
formElements:{"date-sel":"%Y","date-sel-mm":"%n","date-sel-dd":"%j"},
showWeeks:true,
statusFormat:"%l, %d%S %F %Y",
// Fill the entire grid with dates
fillGrid:true,
// Disable the selection of dates not within the current month
// but rendered within the grid (as we used fillGrid:true)
constrainSelection:true,
// Set a final opacity of 90%
finalOpacity:95,
// Disable Monday (index =0) and Tuesday (index = 1)
disabledDays:[1,1,0,0,0,0,0],
// The function "showEnglishDate" is declared below
callbackFunctions:{"create":[showEnglishDate],"dateset":[showEnglishDate]}
});
// This is the actual function used by the "create" and "dateset" events
function showEnglishDate(argObj) {
// Grab the span & get a more English-ised version of the selected date
var spn = document.getElementById(argObj.id+"-out"),
formattedDate = !argObj.date ? "Please select a valid date" : datePickerController.printFormattedDate(argObj.date, "%l, %d%S %F %Y", false);
// Remove the current contents of the span
while(spn.firstChild) {
spn.removeChild(spn.firstChild);
};
// Add a new text node containing our formatted date
spn.appendChild(document.createTextNode(formattedDate));
};
</script>
<!--
DEMO #5
-->
<fieldset>
<legend>Demo #5</legend>
<ul>
<li>Using both text inputs and select lists to represent the day, month and year date parts</li>
<li>Positioning the button within a specified DOM node (which is why it&#8217;s rendered to the left of the associated form controls)</li>
<li>Highlighting Monday only</li>
</ul>
<!--
The datePicker button is created as a child of the following span
-->
<span id="demo-5-button"></span>
<select id="demo-5-dd" name="demo-5-dd">
<option value="-1">Day</option>
<option value="1">1st</option>
<option value="2">2nd</option>
<option value="3">3rd</option>
<option value="4">4th</option>
<option value="5">5th</option>
<option value="6">6th</option>
<option value="7">7th</option>
<option value="8">8th</option>
<option value="9">9th</option>
<option value="10">10th</option>
<option value="11">11th</option>
<option value="12">12th</option>
<option value="13">13th</option>
<option value="14">14th</option>
<option value="15">15th</option>
<option value="16">16th</option>
<option value="17">17th</option>
<option value="18">18th</option>
<option value="19">19th</option>
<option value="20">20th</option>
<option value="21">21st</option>
<option value="22">22nd</option>
<option value="23">23rd</option>
<option value="24">24th</option>
<option value="25">25th</option>
<option value="26">26th</option>
<option value="27">27th</option>
<option value="28">28th</option>
<option value="29">29th</option>
<option value="30">30th</option>
<option value="31">31st</option>
</select>
<select id="demo-5-mm" name="demo-5-mm">
<option value="-1">Month</option>
<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 type="text" name="demo-5" id="demo-5" maxlength="4" class="w4em" />
</fieldset>
<script>
datePickerController.createDatePicker({
formElements:{"demo-5":"%Y","demo-5-mm":"%n","demo-5-dd":"%j"},
showWeeks:true,
statusFormat:"%l, %d%S %F %Y",
// Highlight Monday only
highlightDays:[1,0,0,0,0,0,0],
// Position the button in a wrapper span to the left of the input
positioned:"demo-5-button"
});
</script>
<!--
DEMO #6
-->
<fieldset>
<legend>Demo #6</legend>
<ul>
<li>Using a select list to represent both the month and year date parts</li>
</ul>
<p>Note: the high &amp; low ranges will be automatically calculated by the script when a select list is used to represent the year date part, so there&#8217;s no need to set a <code>rangeLow</code> or <code>rangeHigh</code> when creating the datepicker.</p>
<input type="text" class="w2em" id="demo-6" name="demo-6" maxlength="2" />
<select id="demo-6-1" name="demo-6-1">
<option value="-1">Month &amp; Year</option>
<option value="012008">January 2008</option>
<option value="022008">February 2008</option>
<option value="032008">March 2008</option>
<option value="042008">April 2008</option>
<option value="052008">May 2008</option>
<option value="062008">June 2008</option>
<option value="072008">July 2008</option>
<option value="082008">August 2008</option>
<option value="092008">September 2008</option>
<option value="102008">October 2008</option>
<option value="112008">November 2008</option>
<option value="122008">December 2008</option>
</select>
</fieldset>
<script>
datePickerController.createDatePicker({
formElements:{"demo-6-1":"%m%Y","demo-6":"%d"},
showWeeks:true,
fillGrid:true,
constrainSelection:false,
statusFormat:"%l, %d%S %F %Y"
});
</script>
<!--
DEMO #7
-->
<fieldset>
<legend>Demo #7</legend>
<ul>
<li>Using a select list to represent the day, month and year date parts (let&#8217;s be honest - you probably wouldn&#8217;t ever do this but the code makes allowances for it and so might as well be demoed)</li>
<li>Testing the <code>enable</code> and <code>disable</code> methods</li>
</ul>
<p>Note: the high &amp; low ranges will be automatically calculated by the script when a select list is used to represent the year date part, so there&#8217;s no need to set a <code>rangeLow</code> or <code>rangeHigh</code> when creating the datepicker.</p>
<select id="demo-7" name="demo-7">
<option value="-1">Day, Month &amp; Year</option>
<option value="01012008">01st January 2008</option>
<option value="06022008">06th February 2008</option>
<option value="09032008">09th March 2008</option>
<option value="22042008">22nd April 2008</option>
<option value="11052008">11th May 2008</option>
<option value="11062008">11th June 2008</option>
<option value="15072008">15th July 2008</option>
<option value="28082008">28th August 2008</option>
<option value="08092008">08th September 2008</option>
<option value="12102008">12th October 2008</option>
<option value="16112008">16th November 2008</option>
<option value="17122008">17th December 2008</option>
</select>
<button onclick="datePickerController.disable('demo-7'); return false;">Disable</button> <button onclick="datePickerController.enable('demo-7'); return false;">Enable</button>
</fieldset>
<script>
datePickerController.createDatePicker({
// Associate the select list above and set the date format to match
// the options value
formElements:{"demo-7":"%d%m%Y"},
showWeeks:true,
statusFormat:"%l, %d%S %F %Y"
});
</script>
<!--
DEMO #8
-->
<fieldset>
<legend>Demo #8</legend>
<ul>
<li>Setting bespoke statusbar titles for Christmas day, new years eve and new years day</li>
<li>Setting a callback function for the &#8220;redraw&#8221; event that dynamically calculates and disables Easter Monday for the given year and sets a bespoke title that reads &#8220;Easter Monday&#8221; for the date in question</li>
<li>Setting the <code>rangeLow</code> to be today&#8217;s date</li>
</ul>
<label for="demo-8">Date</label>
<input type="text" class="w8em" id="demo-8" name="demo-8" value="" />
</fieldset>
<script>
datePickerController.createDatePicker({
formElements:{"demo-8":"%d/%m/%Y"},
showWeeks:true,
// Set a list of titles to use in the statusbar for specific dates
bespokeTitles:{
// The 25th of December for all years
"****1225":"Christmas Day",
// The 31st of December for all years
"****1231":"New Years Eve",
// The 1st of January for all years
"****0101":"New Years Day"
},
statusFormat:"%l, %d%S %F %Y",
// Set the rangeLow to be today's date
rangeLow:datePickerController.dateToYYYYMMDDStr(new Date()),
// Set a callback function for the redraw event
callbackFunctions:{"redraw":[function(argObj) {
// Dynamically calculate Easter Monday - I've forgotten where this code
// was originally found and I don't even know if it returns a valid
// result in all cases.
// Only run the code if the month is March or April though
if(+argObj.mm < 3 || +argObj.mm > 4) {
return;
};
var y = argObj.yyyy,
a=y%4,
b=y%7,
c=y%19,
d=(19*c+15)%30,
e=(2*a+4*b-d+34)%7,
m=Math.floor((d+e+114)/31),
g=(d+e+114)%31+1,
yyyymmdd = y + "0" + m + String(g < 10 ? "0" + g : g),
ret = {},
titles = {};
// Disable the date
ret[yyyymmdd] = 1;
datePickerController.addDisabledDates(argObj.id, ret);
// Just for fun, also set an "Easter Monday" status bar title for the
// date we just calculated
ret[yyyymmdd] = "Easter Monday";
datePickerController.addBespokeTitles(argObj.id, ret);
}]}
});
</script>
<!--
DEMO #9
-->
<fieldset>
<legend>Demo #9</legend>
<ul>
<li>Creating a static (inline) datepicker</li>
<li>Setting the opacity to 90%</li>
</ul>
<label for="demo-9">Date</label>
<input type="text" class="w16em" id="demo-9" name="demo-9" value="" />
</fieldset>
<script>
datePickerController.createDatePicker({
formElements:{"demo-9":"%d/%m/%Y"},
showWeeks:true,
statusFormat:"%l, %d%S %F %Y",
// We want an inline datepicker
staticPos:true,
// Set an opacity of 90%
finalOpacity:90
});
</script>
<!--
DEMO #10
-->
<fieldset>
<legend>Demo #10</legend>
<ul>
<li>Creating a static (inline) datepicker</li>
<li>Filling the entire grid with dates</li>
<li>Enabling the selection of all dates rendered within the grid</li>
<li>Testing the <code>enable</code> and <code>disable</code> methods</li>
</ul>
<label for="demo-10">Date</label> <input type="text" class="w16em" id="demo-10" name="demo-10" value="" />
<button onclick="datePickerController.disable('demo-10'); return false;">Disable</button> <button onclick="datePickerController.enable('demo-10'); return false;">Enable</button>
</fieldset>
<script>
datePickerController.createDatePicker({
formElements:{"demo-10":"%d/%m/%Y"},
showWeeks:true,
statusFormat:"%l, %d%S %F %Y",
staticPos:true,
fillGrid:true,
// Enable the selection of all dates rendered within the grid
constrainSelection:false
});
</script>
<!--
DEMO #11
-->
<fieldset>
<legend>Demo #11</legend>
<ul>
<li>Removing the associated input from the U.I.</li>
</ul>
<input type="text" class="w16em" id="demo-11" name="demo-11" value="" />
</fieldset>
<script>
datePickerController.createDatePicker({
formElements:{"demo-11":"%d/%m/%Y"},
showWeeks:true,
statusFormat:"%l, %d%S %F %Y",
staticPos:true,
fillGrid:true,
// Remove the associated input from the U.I.
hideInput:true
});
</script>
</form>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.