Setting yearRange datepicker option on single page

Developing with Concrete
1

I have a single page with a form. On it I have a c5 date() widget where I need to set a year ranging from 1995 to 2100, and the default for C5 appears to be giving me 1934-2034.

I know from other helpers on the old forums that I can probably change the default range for all of C5 by copying a jquery file and specifying the yearRange. However, I want to just set it in this one single page, as it has different needs from the rest of the site.

I know from the C5 widget documentation, that I can set jquery datepicker options by passing an array.
DateTime Widget documentation
jquery datepicker options, yearRange

From this documentation, and based on options passed in other c5 form widgets, I thought this would be the correct format for passing such an option:

print $dtt->date ('expire', $data['year'], array( "yearRange"=>"1995:2100" ) );

This doesn’t throw an error, but neither does it do anything. Can anyone shed light on the problem?

Thanks.

2

Hi Yamara,
What version of concrete are you using?

3

The system is running Concrete 8.5.4.

4

Date picker attributes are fourth argument, you set it as third. Try:

print $dtt->date ('expire', $data['year'], true, array( "yearRange"=>"1995:2100" ) );
5

Oof, I can’t believe I didn’t see that third argument in there. Thanks!

6

Okay, but now I have a bug.

I have a date set to 7/15/2040 in a database. When this loads the C5 date widget shows displays it as 7/15/40. If I keep my 1995:2100 range, and you click on the date to change it, it shows the date in the calendar as 7/15/1995.

If I set my range to 1930-2100, it shows the date in the calendar as 7/15/1940, even though it should be 2040.

I had thought previously that changing my available date range might solve this bug, but it doesn’t.

Checking the webpage source shows that the number is being loaded but not obeyed by the date widget (does it count months starting at 0? Huh). Partial paste:

{"yearRange":"1930:2100"})).datepicker('setDate', new Date(2040, 6, 15)).attr('autocomplete', 'off');

…Hm. I wonder if I can explicitly tell it 4 digit year somewhere in those settings, if that would fix it.

7

What value variable $data['year'] holds? Is it full date in sql format like “2040-15-07”?

8

You can always set third argument to false and write your own datepicker javascript code (only html form will be rendered). You can copy code when third argument is set to true (javascript code is rendered just below inputs) and modify it to your liking.

9

If anywhere in that process your date is passes through strtotime(), then it will be stuffed into the range 1970 - 2038. Then when pulled out of that range, anything could happen. (Not saying that is what has happened here, just a general warning about the dangers of date manipulation).

Instead of using the core DatePicker, you could also try an HTML date input. All browsers now support it, and its more reliable than years of wrappers built about an old jQueryUI picker.

10

TL;DR – Solution found!

The value grabbed is a full SQL datetime (I don’t know why it’s not just a date, not my creation): 2040-07-15 00:00:00

The value parsed is showing in the parsed HTML as I mentioned though, and passed in that snippet of JavaScript with the 4 digit year 2040. I also thought there was a chance it was then parsing it with something with a 2038 year limit, as mentioned, since years like 2024 would come up correctly but 2040 would switch to 1940. Seems odd since it’s already broken out correctly as 2040 in that code snippet though.

Setting the date manually to the string 2040-07-15 also results in the same problem, with the year being 1940, suggesting it wasn’t my input that was the culprit.
print $dtt->date ('expire', '2040-07-15', true, array( "yearRange"=>"1930:2100" ) );

I delved through the Datepicker options further, and tried an alternate date format:
print $dtt->date ('expire', $data['date'], true, array( "dateFormat"=>"m/d/yy", "yearRange"=>"1930:2100" ) );

This forced it to display a 4 digit year to the user, rather than the truncated 2 digit year it was displaying (even though it was being passed a 4 digit year which was clear in the parsed javascript being sent). Once this was set, the year started showing correctly in the picker.

Thanks everyone! Having suggestions helped me work at this from different angles.