Skip to content

Commit

Permalink
Detailled the available settings
Browse files Browse the repository at this point in the history
  • Loading branch information
Julien Poumailloux committed Nov 2, 2011
1 parent 1cc0064 commit bf9f9b1
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 6 deletions.
47 changes: 47 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,53 @@ Demo

[Here!](http://ec2-46-137-53-243.eu-west-1.compute.amazonaws.com/jquery-ui-monthpicker/)

Available settings and their defaults
---

General settings:
showOn: 'focus', // 'focus' for popup on focus,
// 'button' for trigger button, or 'both' for either
showAnim: 'fadeIn', // Name of jQuery animation for popup
buttonText: '...', // Text for trigger button
buttonImage: '', // URL for trigger button image
changeYear: false, // True if year can be selected directly, false if only prev/next
yearRange: 'c-10:c+10', // Range of years to display in drop-down,
// either relative to today's year (-nn:+nn), relative to currently displayed year
// (c-nn:c+nn), absolute (nnnn:nnnn), or a combination of the above (nnnn:-n)
beforeShow: null, // Function that takes an input field and
// returns a set of custom settings for the date picker
onSelect: null, // Define a callback function when a date is selected
onChangeYear: null, // Define a callback function when the year is changed
onClose: null, // Define a callback function when the monthpicker is closed
stepYears: 1, // Number of months to step back/forward
altField: '', // Selector for an alternate field to store selected dates into
altFormat: '', // The date format to use for the alternate field
disabled: false // The initial disabled state

L10N:
dateFormat: 'mm/yy',
yearSuffix: '' // Additional text to append to the year in the month headers
prevText: 'Prev', // Display text for previous month link
nextText: 'Next', // Display text for next month link
monthNames: ['January','February','March','April','May','June',
'July','August','September','October',
'November','December'], // Names of months for drop-down and formatting
monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], // For formatting</pre>

Date Formatting:
The format can be combinations of the following:
m - month of year (no leading zero)
mm - month of year (two digit)
M - month name short
MM - month name long
y - year (two digit)
yy - year (four digit)
@ - Unix timestamp (ms since 01/01/1970)
! - Windows ticks (100ns since 01/01/0001)
'...' - literal text
'' - single quote

Alternatives
---

Expand Down
57 changes: 51 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,53 @@
<div id="container">
<h1>jquery-ui-monthpicker</h1>
<h2>Monthpicker #1</h2><input type='text' id='month1'><br />
<h2>Monthpicker #2 (with callbacks)</h2><input type='text' id='month2'>
<h2>Monthpicker #2 (different settings)</h2><input type='text' id='month2'>
<h2>Standard JQuery UI Datepicker</h2><input type='text' id='date1'>
<h2>Available settings and their defaults</h2>
<h3>General settings</h3>
<pre>
showOn: 'focus', // 'focus' for popup on focus,
// 'button' for trigger button, or 'both' for either
showAnim: 'fadeIn', // Name of jQuery animation for popup
buttonText: '...', // Text for trigger button
buttonImage: '', // URL for trigger button image
changeYear: false, // True if year can be selected directly, false if only prev/next
yearRange: 'c-10:c+10', // Range of years to display in drop-down,
// either relative to today's year (-nn:+nn), relative to currently displayed year
// (c-nn:c+nn), absolute (nnnn:nnnn), or a combination of the above (nnnn:-n)
beforeShow: null, // Function that takes an input field and
// returns a set of custom settings for the date picker
onSelect: null, // Define a callback function when a date is selected
onChangeYear: null, // Define a callback function when the year is changed
onClose: null, // Define a callback function when the monthpicker is closed
stepYears: 1, // Number of months to step back/forward
altField: '', // Selector for an alternate field to store selected dates into
altFormat: '', // The date format to use for the alternate field
disabled: false // The initial disabled state</pre>
<h3>L10N</h3>
<pre>
dateFormat: 'mm/yy',
yearSuffix: '' // Additional text to append to the year in the month headers
prevText: 'Prev', // Display text for previous month link
nextText: 'Next', // Display text for next month link
monthNames: ['January','February','March','April','May','June',
'July','August','September','October',
'November','December'], // Names of months for drop-down and formatting
monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], // For formatting</pre>
<h3>Date Formatting</h3>
<pre>
The format can be combinations of the following:
m - month of year (no leading zero)
mm - month of year (two digit)
M - month name short
MM - month name long
y - year (two digit)
yy - year (four digit)
@ - Unix timestamp (ms since 01/01/1970)
! - Windows ticks (100ns since 01/01/0001)
'...' - literal text
'' - single quote</pre>
<h2>Contribute!</h2>
<pre>$ git clone <a href='http://github.com/thebrowser/jquery.ui.monthpicker'>http://github.com/thebrowser/jquery.ui.monthpicker</a></pre>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
Expand All @@ -46,19 +91,19 @@ <h2>Contribute!</h2>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#month1").monthpicker({
'monthNamesShort' : ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
showOn: "both",
buttonImage: "images/calendar.png",
buttonImageOnly: true
});
jQuery("#month2").monthpicker({
monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin', 'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jui', 'Jul','Aoû','Sep','Oct','Nov','Déc'],
showOn: "both",
buttonImage: "images/calendar.png",
buttonImageOnly: true,
beforeShow: function() { alert('beforeShow'); },
onSelect: function() { alert('onSelect'); },
onChangeYear: function() { alert('onChangeYear'); },
onClose: function() { alert('onClose'); }
changeYear: false,
yearRange: 'c-2:c+2',
dateFormat: 'MM y'
});
jQuery("#date1").datepicker({
showOn: "both",
Expand Down

0 comments on commit bf9f9b1

Please sign in to comment.