Skip to content

Commit bf9f9b1

Browse files
author
Julien Poumailloux
committed
Detailled the available settings
1 parent 1cc0064 commit bf9f9b1

File tree

2 files changed

+98
-6
lines changed

2 files changed

+98
-6
lines changed

‎README.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,53 @@ Demo
1515

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

18+
Available settings and their defaults
19+
---
20+
21+
General settings:
22+
showOn: 'focus', // 'focus' for popup on focus,
23+
// 'button' for trigger button, or 'both' for either
24+
showAnim: 'fadeIn', // Name of jQuery animation for popup
25+
buttonText: '...', // Text for trigger button
26+
buttonImage: '', // URL for trigger button image
27+
changeYear: false, // True if year can be selected directly, false if only prev/next
28+
yearRange: 'c-10:c+10', // Range of years to display in drop-down,
29+
// either relative to today's year (-nn:+nn), relative to currently displayed year
30+
// (c-nn:c+nn), absolute (nnnn:nnnn), or a combination of the above (nnnn:-n)
31+
beforeShow: null, // Function that takes an input field and
32+
// returns a set of custom settings for the date picker
33+
onSelect: null, // Define a callback function when a date is selected
34+
onChangeYear: null, // Define a callback function when the year is changed
35+
onClose: null, // Define a callback function when the monthpicker is closed
36+
stepYears: 1, // Number of months to step back/forward
37+
altField: '', // Selector for an alternate field to store selected dates into
38+
altFormat: '', // The date format to use for the alternate field
39+
disabled: false // The initial disabled state
40+
41+
L10N:
42+
dateFormat: 'mm/yy',
43+
yearSuffix: '' // Additional text to append to the year in the month headers
44+
prevText: 'Prev', // Display text for previous month link
45+
nextText: 'Next', // Display text for next month link
46+
monthNames: ['January','February','March','April','May','June',
47+
'July','August','September','October',
48+
'November','December'], // Names of months for drop-down and formatting
49+
monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
50+
'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], // For formatting</pre>
51+
52+
Date Formatting:
53+
The format can be combinations of the following:
54+
m - month of year (no leading zero)
55+
mm - month of year (two digit)
56+
M - month name short
57+
MM - month name long
58+
y - year (two digit)
59+
yy - year (four digit)
60+
@ - Unix timestamp (ms since 01/01/1970)
61+
! - Windows ticks (100ns since 01/01/0001)
62+
'...' - literal text
63+
'' - single quote
64+
1865
Alternatives
1966
---
2067

‎index.html‎

Lines changed: 51 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,53 @@
3636
<div id="container">
3737
<h1>jquery-ui-monthpicker</h1>
3838
<h2>Monthpicker #1</h2><input type='text' id='month1'><br />
39-
<h2>Monthpicker #2 (with callbacks)</h2><input type='text' id='month2'>
39+
<h2>Monthpicker #2 (different settings)</h2><input type='text' id='month2'>
4040
<h2>Standard JQuery UI Datepicker</h2><input type='text' id='date1'>
41+
<h2>Available settings and their defaults</h2>
42+
<h3>General settings</h3>
43+
<pre>
44+
showOn: 'focus', // 'focus' for popup on focus,
45+
// 'button' for trigger button, or 'both' for either
46+
showAnim: 'fadeIn', // Name of jQuery animation for popup
47+
buttonText: '...', // Text for trigger button
48+
buttonImage: '', // URL for trigger button image
49+
changeYear: false, // True if year can be selected directly, false if only prev/next
50+
yearRange: 'c-10:c+10', // Range of years to display in drop-down,
51+
// either relative to today's year (-nn:+nn), relative to currently displayed year
52+
// (c-nn:c+nn), absolute (nnnn:nnnn), or a combination of the above (nnnn:-n)
53+
beforeShow: null, // Function that takes an input field and
54+
// returns a set of custom settings for the date picker
55+
onSelect: null, // Define a callback function when a date is selected
56+
onChangeYear: null, // Define a callback function when the year is changed
57+
onClose: null, // Define a callback function when the monthpicker is closed
58+
stepYears: 1, // Number of months to step back/forward
59+
altField: '', // Selector for an alternate field to store selected dates into
60+
altFormat: '', // The date format to use for the alternate field
61+
disabled: false // The initial disabled state</pre>
62+
<h3>L10N</h3>
63+
<pre>
64+
dateFormat: 'mm/yy',
65+
yearSuffix: '' // Additional text to append to the year in the month headers
66+
prevText: 'Prev', // Display text for previous month link
67+
nextText: 'Next', // Display text for next month link
68+
monthNames: ['January','February','March','April','May','June',
69+
'July','August','September','October',
70+
'November','December'], // Names of months for drop-down and formatting
71+
monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
72+
'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], // For formatting</pre>
73+
<h3>Date Formatting</h3>
74+
<pre>
75+
The format can be combinations of the following:
76+
m - month of year (no leading zero)
77+
mm - month of year (two digit)
78+
M - month name short
79+
MM - month name long
80+
y - year (two digit)
81+
yy - year (four digit)
82+
@ - Unix timestamp (ms since 01/01/1970)
83+
! - Windows ticks (100ns since 01/01/0001)
84+
'...' - literal text
85+
'' - single quote</pre>
4186
<h2>Contribute!</h2>
4287
<pre>$ git clone <a href='http://github.com/thebrowser/jquery.ui.monthpicker'>http://github.com/thebrowser/jquery.ui.monthpicker</a></pre>
4388
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
@@ -46,19 +91,19 @@ <h2>Contribute!</h2>
4691
<script type="text/javascript">
4792
jQuery(document).ready(function() {
4893
jQuery("#month1").monthpicker({
49-
'monthNamesShort' : ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
5094
showOn: "both",
5195
buttonImage: "images/calendar.png",
5296
buttonImageOnly: true
5397
});
5498
jQuery("#month2").monthpicker({
99+
monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin', 'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
100+
monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jui', 'Jul','Aoû','Sep','Oct','Nov','Déc'],
55101
showOn: "both",
56102
buttonImage: "images/calendar.png",
57103
buttonImageOnly: true,
58-
beforeShow: function() { alert('beforeShow'); },
59-
onSelect: function() { alert('onSelect'); },
60-
onChangeYear: function() { alert('onChangeYear'); },
61-
onClose: function() { alert('onClose'); }
104+
changeYear: false,
105+
yearRange: 'c-2:c+2',
106+
dateFormat: 'MM y'
62107
});
63108
jQuery("#date1").datepicker({
64109
showOn: "both",

0 commit comments

Comments
 (0)