Magento 2.1.2 Ui- Component formElement select from multiple dropdowns
Here's a way to do it by making a custom ui component. It requires the backing field to be a varchar.
Define the ui component in Your_Module/view/base/web/js/form/element/time.js
:
define([
'Magento_Ui/js/form/element/abstract'
], function (AbstractElement) {
'use strict';
return AbstractElement.extend({
defaults: {
elementTmpl: 'Your_Module/form/time'
},
initialize: function () {
this._super();
this.hours = '00';
this.minutes = '00';
this.observe(['hours', 'minutes']);
var value = this.value();
this.hours(value.slice(0,2));
this.minutes(value.slice(2));
},
userChanges: function () {
this._super();
this.value(this.hours() + this.minutes());
},
hoursOpts: (function () {
var opts = [];
for (var i=0; i<24; i++) {
opts.push({
label: i.toString(),
value: ('0' + i).slice(-2)
})
}
return opts;
})(),
minutesOpts: (function () {
var opts = [];
for (var i=0; i<60; i++) {
opts.push({
label: ('0' + i).slice(-2),
value: ('0' + i).slice(-2)
})
}
return opts;
})()
});
});
and the template, in Your_Module/view/base/web/template/form/time.html
:
<select class="admin__control-select"
data-bind="
optgroup: hoursOpts,
optionsValue: 'value',
optionsText: 'label',
value: hours,
event: {change: userChanges}"/>
<select class="admin__control-select"
data-bind="
optgroup: minutesOpts,
optionsValue: 'value',
optionsText: 'label',
value: minutes,
event: {change: userChanges}"/>
Use it in your form xml like this:
<field name="start_date">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Monday Opening Time</item>
<item name="component" xsi:type="string">Your_Module/js/form/element/time</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">item</item>
<item name="dataScope" xsi:type="string">start_date</item>
<item name="sortOrder" xsi:type="number">220</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
The value from the two drop downs is merged to produce a string like '0130'
to represent the time 1:30
, so your data type needs to be varchar otherwise the leading '0' will be dropped.