From 7a5f551dc17b55aa5fc7bf7ce9a671fe788a9534 Mon Sep 17 00:00:00 2001 From: Keith Wood Date: Tue, 10 Jun 2008 13:33:39 +0000 Subject: [PATCH] More datepicker demos --- demos/functional/templates/ui.datepicker.html | 73 +++++++++++++++++-- 1 file changed, 68 insertions(+), 5 deletions(-) diff --git a/demos/functional/templates/ui.datepicker.html b/demos/functional/templates/ui.datepicker.html index 01e041f9c..c53acfbda 100644 --- a/demos/functional/templates/ui.datepicker.html +++ b/demos/functional/templates/ui.datepicker.html @@ -9,13 +9,76 @@ demos: [ { - title: 'Datepicker', - desc: 'A date picker can easily be added to an input field with default settings.', - html: '', - destroy: '$("#defaultInput").datepicker("destroy");', + title: 'Datepicker Basics', + desc: 'A date picker can easily be added to an input field with default settings.
' + + 'You can also use keystrokes to drive the datepicker:
' + + '', + html: '', + destroy: '$("#basics").datepicker("destroy");', options: [ - { desc: 'Default datepicker', source: '$("#defaultFocus").datepicker();' } + { desc: 'Default datepicker - open on focus', source: '$("#basics").datepicker();' }, + { desc: 'Open on button only', source: '$("#basics").datepicker({showOn: "button"});' }, + { desc: 'Open on image button only', source: '$("#basics").datepicker({showOn: "button", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Open on focus or button', source: '$("#basics").datepicker({showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Disabled datepicker', source: '$("#basics").datepicker({showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true}).datepicker("disable");' } + ] + }, + + { + title: 'Restricting Datepicker', + desc: 'A date picker can have its basic functionality restricted in various ways.', + html: '', + destroy: '$("#restricting").datepicker("destroy");', + + options: [ + { desc: 'First day of week is Monday and can\'t change it', source: '$("#restricting").datepicker({firstDay: 1, changeFirstDay: false, showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Can\'t change month/year from dropdowns', source: '$("#restricting").datepicker({changeMonth: false, changeYear: false, showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Dates from Jan 26 2005 to Jan 26 2007 only', source: '$("#restricting").datepicker({minDate: new Date(2005, 1 - 1, 26), maxDate: new Date(2007, 1 - 1, 26), showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Dates within the next 365 days only', source: '$("#restricting").datepicker({minDate: 0, maxDate: 365, showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Dates from yesterday to 6 years away only', source: '$("#restricting").datepicker({minDate: "-1d", maxDate: "6y", showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' } + ] + }, + + { + title: 'Datepicker Formats', + desc: 'A date picker can display its value in numerous formats, with the default being "mm/dd/yy".', + html: '', + destroy: '$("#formatted").datepicker("destroy");', + + options: [ + { desc: 'Medium format', source: '$("#formatted").datepicker({dateFormat: "M d, yy", showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Long format', source: '$("#formatted").datepicker({dateFormat: "MM d, yy", showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Full format', source: '$("#formatted").datepicker({dateFormat: "DD, MM d, yy", showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'With no century', source: '$("#formatted").datepicker({dateFormat: "dd/mm/y", showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'French full format', source: '$("#formatted").datepicker($.datepicker.regional["fr"]).datepicker("change", {dateFormat: "DD, MM d, yy", showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' } + ] + }, + + { + title: 'International Datepickers', + desc: 'Numerous international packs are available for the datepicker.', + html: '', + destroy: '$("#i18n").datepicker("destroy");', + + options: [ + { desc: '简体中文 (Chinese Simplified)', source: '$("#i18n").datepicker($.datepicker.regional["zh-CN"]).datepicker("change", {showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, + { desc: '簡體中文 (Chinese Traditional)', source: '$("#i18n").datepicker($.datepicker.regional["zh-TW"]).datepicker("change", {showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Bahasa Indonesia (Indonesian)', source: '$("#i18n").datepicker($.datepicker.regional["id"]).datepicker("change", {showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'български език (Bulgarian)', source: '$("#i18n").datepicker($.datepicker.regional["bg"]).datepicker("change", {showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Català (Catalan)', source: '$("#i18n").datepicker($.datepicker.regional["ca"]).datepicker("change", {showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Čeština (Czech)', source: '$("#i18n").datepicker($.datepicker.regional["cs"]).datepicker("change", {showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Dansk (Danish)', source: '$("#i18n").datepicker($.datepicker.regional["da"]).datepicker("change", {showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Deutsch (German)', source: '$("#i18n").datepicker($.datepicker.regional["de"]).datepicker("change", {showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Español (Spanish)', source: '$("#i18n").datepicker($.datepicker.regional["es"]).datepicker("change", {showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' }, + { desc: 'Français (French)', source: '$("#i18n").datepicker($.datepicker.regional["fr"]).datepicker("change", {showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true});' } ] } -- 2.39.5