XF 2.1 Modifying xf:dateinput via code?

[Jaxel]

Lets say I have a dateinput:

<xf:dateinput name="date" class="date-picker" value="{{ date($xf.time+86400, 'Y-m-d') }}" />

Then in my JS, I am connecting to that date picker as follows:

$datepicker = this.$target.find('.date-picker');

How can I then change the contents of the data picker, and the options for minDate and maxDate in the JS code?

 

[Jaxel]

Anyone?

 

[Jeremy P]

It depends on what exactly you're trying to do.

Generally speaking, you can get an array of handlers on an element (indexed by identifier) via var handlers = $element.data('xf-element-handlers');. You could then access a corresponding date input handler via var handler = handlers['date-input'];

It looks like those options are used during initialization though, so you can't really change them at run-time. You'd probably want to pass the options via data attributes in the template, or, if further customization is required, extend the XF.DateInput handler entirely and create your own date input templates/macros.

 

[Jaxel]

I want to link two date pickers together. So I can set the min/max date variables of the second picker based on what the first picker has selected.

 

[Jeremy P]

The underlying library, Pikaday, has a few methods you can use for this. You can access the Pikaday instance using the picker property of the handler. So something like this should work:

var $datePicker = this.$target.find('.date-picker');

var handlers = $datePicker.data('xf-element-handlers');
var handler = handlers['date-input'];

var picker = handler.picker;
picker.setMinDate(new Date());

 

[Jaxel]

Having issues getting that working...
Uncaught TypeError: Cannot read property 'setMinDate' of null

picker always ends up being null.

 

[Jeremy P]

Works for me. Go up the chain until you find the problem. Is handler an instance of XF.DatePicker? Is $datePicker even an element with data-xf-init="date-input"?