<link rel="stylesheet" href="css/base.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/functional_demos.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/chilli-recipes.css" type="text/css" media="screen">
+ <link rel="stylesheet" href="../../themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)" />
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<div id="content">
<div class="content-top"></div>
- <div class="content"><link rel="stylesheet" href="../../themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)" />
+ <div class="content">
<form id="components-fm" action="/actions/download_builder.php" method="post">
<div class="content-head">
.za_day { color: green !important; background: #eee url(templates/images/za.gif) no-repeat center !important; }\r
</style>\r
<script type="text/javascript">\r
-var natDays = [[1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'], [4, 27, 'za'], [5, 25, 'ar'], [6, 6, 'se'], \r
- [7, 4, 'us'], [8, 17, 'id'], [9, 7, 'br'], [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']]; \r
+var natDays = [[1, 26, "au"], [2, 6, "nz"], [3, 17, "ie"], [4, 27, "za"], [5, 25, "ar"], [6, 6, "se"], \r
+ [7, 4, "us"], [8, 17, "id"], [9, 7, "br"], [10, 1, "cn"], [11, 22, "lb"], [12, 12, "ke"]]; \r
\r
function nationalDays(date) { \r
for (i = 0; i < natDays.length; i++) { \r
if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) { \r
- return [false, natDays[i][2] + '_day']; \r
+ return [false, natDays[i][2] + "_day"]; \r
} \r
} \r
- return [true, '']; \r
+ return [true, ""]; \r
}\r
\r
function highlightToday(date, inst) { \r
var today = new Date(); \r
today = new Date(today.getFullYear(), today.getMonth(), today.getDate()); \r
return $.datepicker.dateStatus(date, inst) + \r
- (today.getTime() == date.getTime() ? ' (today)' : ''); \r
+ (today.getTime() == date.getTime() ? " (today)" : ""); \r
} \r
\r
function showDayOfYear(date) {\r
var lastYearEnd = new Date(date.getFullYear() - 1, 12 - 1, 31, 0, 0, 0, 0);\r
- return [true, '', 'Day ' + ((date.getTime() - lastYearEnd.getTime()) / 86400000) + ' of the year'];\r
+ return [true, "", "Day " + ((date.getTime() - lastYearEnd.getTime()) / 86400000) + " of the year"];\r
}\r
</script>
\ No newline at end of file
<input type="text" size="10" value="" id="dialog" readonly="readonly"/> <button id="dialogButton" type="button">Open dialog</button>\r
<script type="text/javascript">\r
function setDateFromDialog(date) { \r
- $('#dialog').val(date); \r
+ $("#dialog").val(date); \r
}\r
</script>
\ No newline at end of file
'<li>MM - month name long</li>' +
'<li>y - year (two digit)</li>' +
'<li>yy - year (four digit)</li>' +
+ '<li>@ - Unix timestamp (ms since 01/01/1970)</li>' +
'<li>\'...\' - literal text</li>' +
'<li>\'\' - single quote</li></ul>',
html: '<input type="text" size="30" value="" id="formatted"/>',
title: 'Inline Datepicker',
desc: 'A datepicker can also be shown inline, rather than popping-up, by targetting a division instead of an input field. ' +
'Use the <i>onSelect</i> callback to be notified of date selections.',
- html: '<div id="inline"></div>\n' +
- '<p style="clear: both;"><!-- See day-by-day example for highlighting days code --></p>',
- destroy: '$("#inline").datepicker("destroy");',
+ html: { url: 'templates/ui.datepicker.inl.html' },
+ destroy: '$("#inline").datepicker("destroy");$("#altInline").unbind("keyup");',
options: [
- { desc: 'Single month inline', source: '$("#inline").datepicker({onSelect: function(date) { alert("The chosen date is " + date); }});' },
- { desc: 'Range select inline', source: '$("#inline").datepicker({rangeSelect: true, onSelect: function(date) { alert("The chosen dates are " + date); }});' },
- { desc: 'Range select showing two months inline', source: '$("#inline").datepicker({rangeSelect: true, numberOfMonths: 2}).children("div").css("width", "370px");' },
- { desc: 'Highlight some national days (via CSS)', source: '$("#inline").datepicker({beforeShowDay: nationalDays});' }
+ { desc: 'Single month inline', source: '$("#inline").datepicker({onSelect: function(date) { alert("The chosen date is " + date); }});$("#altInline").hide();' },
+ { desc: 'Range select inline', source: '$("#inline").datepicker({rangeSelect: true, onSelect: function(date) { alert("The chosen dates are " + date); }});$("#altInline").hide();' },
+ { desc: 'Range select showing two months inline', source: '$("#inline").datepicker({rangeSelect: true, numberOfMonths: 2}).children("div").css("width", "370px");$("#altInline").hide();' },
+ { desc: 'Highlight some national days (via CSS)', source: '$("#inline").datepicker({beforeShowDay: nationalDays});$("#altInline").hide();' },
+ { desc: 'Inline linked to an input field', source: '$("#inline").datepicker({altField: "#altInline", altFormat: "mm/dd/yy"});$("#altInline").show().keyup(setInlineDate);' },
+ { desc: 'Disabled inline', source: '$("#inline").datepicker().datepicker("disable");$("#altInline").hide();' }
]
},
destroy: '',
options: [
- { desc: 'Open in a dialog', source: '$("#dialogButton").click(function() { $(this).datepicker("dialog", $("#dialog").val(), setDateFromDialog, {prompt: "Choose a date", duration: ""}) });' }
+ { desc: 'Open in a dialog', source: '$("#dialogButton").click(function() { $(this).datepicker("dialog", $("#dialog").val(), setDateFromDialog, {prompt: "Choose a date", duration: ""}); return false; });' }
]
},
{ desc: 'Append text to the datepicker', source: '$("#misc").datepicker({appendText: "(format mm/dd/yyyy)", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
{ desc: 'Move Clear/Close controls to the bottom', source: '$("#misc").datepicker({closeAtTop: false, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
{ desc: 'Make the datepicker mandatory (no Clear)', source: '$("#misc").datepicker({mandatory: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+ { desc: 'Show big Prev/Next links', source: '$("#misc").datepicker({showBigPrevNext: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
+ { desc: 'Show big Prev/Next links moving 6 months', source: '$("#misc").datepicker({showBigPrevNext: true, stepBigMonths: 6, prevText: "<", prevBigText: "<6M", nextText: ">", nextBigText: "6M>", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
{ desc: 'Hide Prev/Next links if not applicable', source: '$("#misc").datepicker({hideIfNoPrevNext: true, minDate: new Date(2008, 1 - 1, 26), maxDate: new Date(2008, 3 - 1, 26), showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
{ desc: 'Prev/Today/Next links as date formats', source: '$("#misc").datepicker({navigationAsDateFormat: true, prevText: "<M", currentText: "M y", nextText: "M>", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
{ desc: 'Prev/Today/Next links as date formats in French', source: '$("#misc").datepicker($.extend({}, $.datepicker.regional["fr"], {navigationAsDateFormat: true, prevText: "<MM", currentText: "MM yy", nextText: "MM>", numberOfMonths: 2, stepMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));' },
--- /dev/null
+<input type="text" id="altInline" size="10"/>\r
+<div id="inline"></div>\r
+<p style="clear: both;"><!-- See day-by-day example for highlighting days code --></p>\r
+<script type="text/javascript">\r
+function setInlineDate() {\r
+ try {\r
+ var date = $.datepicker.parseDate("mm/dd/yy", $("#altInline").val());\r
+ $("#inline").datepicker("setDate", date);\r
+ }\r
+ catch (e) {\r
+ // Ignore\r
+ }\r
+}\r
+</script>
\ No newline at end of file
<script type="text/javascript">\r
// Prepare to show a date picker linked to three select controls\r
function readLinked() {\r
- $('#linkedDates').val($('#selectMonth').val() + '/' +\r
- $('#selectDay').val() + '/' + $('#selectYear').val());\r
+ $("#linkedDates").val($("#selectMonth").val() + "/" +\r
+ $("#selectDay").val() + "/" + $("#selectYear").val());\r
return {};\r
}\r
\r
// Update three select controls to match a date picker selection\r
function updateLinked(date) {\r
- $('#selectMonth').val(date.substring(0, 2));\r
- $('#selectDay').val(date.substring(3, 5));\r
- $('#selectYear').val(date.substring(6, 10));\r
+ $("#selectMonth").val(date.substring(0, 2));\r
+ $("#selectDay").val(date.substring(3, 5));\r
+ $("#selectYear").val(date.substring(6, 10));\r
}\r
\r
// Prevent selection of invalid dates through the select controls\r
function checkLinkedDays() {\r
- var daysInMonth = 32 - new Date($('#selectYear').val(),\r
- $('#selectMonth').val() - 1, 32).getDate();\r
- $('#selectDay option').attr('disabled', '');\r
- $('#selectDay option:gt(' + (daysInMonth - 1) +')').attr('disabled', 'disabled');\r
- if ($('#selectDay').val() > daysInMonth) {\r
- $('#selectDay').val(daysInMonth);\r
+ var daysInMonth = 32 - new Date($("#selectYear").val(),\r
+ $("#selectMonth").val() - 1, 32).getDate();\r
+ $("#selectDay option").attr("disabled", "");\r
+ $("#selectDay option:gt(" + (daysInMonth - 1) +")").attr("disabled", "disabled");\r
+ if ($("#selectDay").val() > daysInMonth) {\r
+ $("#selectDay").val(daysInMonth);\r
}\r
}\r
</script>\r
projects / jquery-ui.git / commitdiff