private createTimePicker()

in src/UXClient/Components/DateTimePicker/DateTimePicker.ts [546:603]
58 lines of code
7 McCabe index (conditional complexity)

    private createTimePicker () {
        var timeInputContainer = this.timeControls.append("div").attr("class", "tsi-timeInputContainer");
        var createTimePicker = (startOrEnd) => {
            var fromOrToContainer = timeInputContainer.append("div").classed("tsi-" + startOrEnd + "Container", true);
            let inputLabelID = Utils.guid();
            let inputID = inputLabelID + 'Input';
            let timeLabel = fromOrToContainer.append("label")
                .classed("tsi-timeLabel", true)
                .attr('id', inputLabelID)
                .attr('for', inputID)
                .attr('aria-label', `${startOrEnd === 'start' ? this.getString('Start time input') : this.getString('End time input')}`)
                .text(this.getString(startOrEnd));
            timeLabel.append("span")
                .classed("tsi-timeRequired", true)
                .text(this.getString('*'));
            let inputName = startOrEnd === 'start' ? 'fromInput' : 'toInput'
            this[inputName] = fromOrToContainer.append('input')
                .attr('class', 'tsi-dateTimeInput', true)
                .attr('aria-labelledby', inputLabelID)
                .attr('required', true)
                .attr('id', inputID)
                .on('input', () => {
                    let rangeErrorCheck: any = this.checkDateTimeValidity();
                    this.isSettingStartTime = true;
                    if (this.isValid) {
                        if (startOrEnd === 'start') {
                            let parsedFrom = Utils.parseUserInputDateTime(this.fromInput.node().value, this.chartOptions.offset);
                            this.setFromMillis(parsedFrom);
                            this.updateDisplayedFromDateTime(true);
                            this.calendarPicker.draw();
                        } else {
                            let parsedTo = Utils.parseUserInputDateTime(this.toInput.node().value, this.chartOptions.offset);
                            this.setToMillis(parsedTo);
                            this.updateDisplayedToDateTime(true);
                            this.calendarPicker.draw();
                        }
                    }
                });
            if (startOrEnd == 'end') {
                fromOrToContainer.append("button")
                    .attr("class", "tsi-snapToEndRangeButton")
                    .text(this.getString("Latest"))
                    .attr('aria-label', this.getString('snap end time to latest'))
                    .on("click", () => {
                        if (!this.isSettingStartTime) {
                            this.setFromDate(this.startRange);
                        }
                        this.setToMillis(this.maxMillis);
                        this.updateDisplayedFromDateTime();
                        this.updateDisplayedToDateTime();
                        this.isSettingStartTime = true;
                        this.calendarPicker.draw();
                    });
            }
        }
        createTimePicker("start");
        createTimePicker("end");
    }