Skip to content

Commit 3c95ac8

Browse files
Add the 'yearRange' option to the date picker, which lets you specify the range of years you want to support in the datepicker select box.
1 parent abf0bde commit 3c95ac8

File tree

3 files changed

+32
-0
lines changed

3 files changed

+32
-0
lines changed

wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.css

+16
Original file line numberDiff line numberDiff line change
@@ -55,3 +55,19 @@
5555
#content .ui-datepicker-inline {
5656
padding-bottom: 0.5em;
5757
}
58+
59+
#ui-datepicker-div {
60+
/* hide the datepicker div, which shows up at the bottom of the form if not hidden */
61+
/* also set default type sizes, since it displays too large otherwise */
62+
font-size: 12px;
63+
line-height: 14px;
64+
display: none;
65+
}
66+
67+
button.ui-datepicker-trigger {
68+
/* tweak to datepicker trigger */
69+
margin: 0 0 0 0.5em;
70+
}
71+
72+
73+

wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.js

+3
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ jQuery(document).ready(function($) {
1111
var hasTimePicker = timeFormat.length > 0 && !pickerVisible;
1212
var showOn = $t.is(".InputfieldDatetimeDatepicker3") ? 'focus' : 'button';
1313
var ampm = parseInt($t.attr('data-ampm')) > 0;
14+
var yearRange = $t.attr('data-yearrange');
1415

1516
if(ts > 1) tsDate = new Date(ts);
1617

@@ -36,6 +37,8 @@ jQuery(document).ready(function($) {
3637
// dateFormat: config.date_format
3738
};
3839

40+
if(yearRange && yearRange.length) options.yearRange = yearRange;
41+
3942
if(hasTimePicker) {
4043
options.ampm = ampm;
4144
options.timeFormat = timeFormat;

wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.module

+13
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ class InputfieldDatetime extends Inputfield {
4646
$this->set('dateInputFormat', self::defaultDateInputFormat);
4747
$this->set('timeInputFormat', '');
4848
$this->set('datepicker', self::datepickerFocus);
49+
$this->set('yearRange', '');
4950
$this->set('defaultToday', 0);
5051

5152
if($this->languages) foreach($this->languages as $language) {
@@ -113,6 +114,7 @@ class InputfieldDatetime extends Inputfield {
113114

114115
if(strlen($timeFormatJS)) $timeFormatJS = htmlspecialchars($timeFormatJS, ENT_QUOTES, 'UTF-8');
115116
if(empty($value)) $value = '';
117+
$yearRange = htmlspecialchars($this->yearRange, ENT_QUOTES, 'UTF-8');
116118

117119
$out = "\n<p>" .
118120
"<input " . $this->getAttributesString($attrs) . " " .
@@ -121,6 +123,7 @@ class InputfieldDatetime extends Inputfield {
121123
"data-timeformat='$timeFormatJS' " .
122124
"data-ts='$valueTS' " .
123125
"data-ampm='$ampm' " .
126+
(strlen($yearRange) ? "data-yearrange='$yearRange' " : '') .
124127
"/></p>";
125128

126129
return $out;
@@ -164,6 +167,16 @@ class InputfieldDatetime extends Inputfield {
164167
$f->attr('value', (int) $this->datepicker);
165168
$inputfields->append($f);
166169

170+
$f = $this->modules->get("InputfieldText");
171+
$f->attr('name', 'yearRange');
172+
$f->attr('value', $this->yearRange);
173+
$f->attr('size', 10);
174+
$f->label = "Date Picker Year Range";
175+
$f->description = $this->_('When the date picker is used, it has a selectable year range minus and plus 10 years from the current year. To extend or reduce that, specify the quantity of years before and after [current year] in this format: "-30:+20", which would show 30 years before now and 20 years after now.');
176+
$f->notes = $this->_('Default when no value present is "-10:+10" which shows a date picker year range 10 years before now, and 10 years after now.');
177+
$f->collapsed = Inputfield::collapsedBlank;
178+
$inputfields->append($f);
179+
167180
$fieldset = $this->modules->get('InputfieldFieldset');
168181
$fieldset->label = $this->_('Date/Time Input Formats');
169182

0 commit comments

Comments
 (0)