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"?

 

[Jaxel]

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"?

Is XF2.3 still using PikaDay?

How would I do this in XF2.3?

 

[Jeremy P]

Is XF2.3 still using PikaDay?

No, we just use native browser inputs now.

How would I do this in XF2.3?

You can create a JS handler that sets the min/max attributes:

<input type="date"> - HTML: HyperText Markup Language | MDN

<input> elements of type="date" create input fields that let the user enter a date. The appearance of the date picker input UI varies based on the browser and operating system. The value is normalized to the format yyyy-mm-dd.

developer.mozilla.org

 

[Jaxel]

No, we just use native browser inputs now.


You can create a JS handler that sets the min/max attributes:

<input type="date"> - HTML: HyperText Markup Language | MDN

<input> elements of type="date" create input fields that let the user enter a date. The appearance of the date picker input UI varies based on the browser and operating system. The value is normalized to the format yyyy-mm-dd.

developer.mozilla.org

Fantastic. I didn't know there were native browser inputs. Much easier to work with.

 

[Jaxel]

I was able to replace this complicated block:

		focus: function(e)
		{
			var str = new Date($strDate.val()+' '+$strTime.val());
			var cur = new Date($endDate.val()+' '+$endTime.val());
			var end = new Date(str.getTime() + (length * 3600000));
			
			if (handlers = $endDate.data('xf-element-handlers'))
			{
				if (picker = handlers['date-input'].picker)
				{
					picker.setMinDate(str);
					
					if (cur.getTime() < str.getTime())
					{
						picker.setDate(str);
					}
					
					if (length)
					{
						picker.setMaxDate(end);
						
						if (cur.getTime() > end.getTime())
						{
							picker.setDate(str);
						}
					}
					
				}
			}
		},

With:

		focus: function(e)
		{
			var endMax = new Date(this.strDateTime.value);
				endMax.setTime(endMax.getTime() + (this.length * 3600000));
			
			this.endDateTime.min = this.strDateTime.value;
			this.endDateTime.max = endMax.toISOString().slice(0, 16);
		},