Jquery daterangepicker edit input

Question

I'm using this daterangepicker http://tamble.github.io/jquery-ui-daterangepicker. It renders the field with selected dates as a button. If I click this field, a calendar is opened. But I need to be able to edit that field manually (type the dates). Is it possible with a daterangepicker API, or I have to create some custom input above the button and add a couple of js lines?

for now, I just use standard settings

`this.calendar.daterangepicker({
        datepickerOptions: datepickerOptions,
        applyOnMenuSelect: true,
        icon: '',
        presetRanges: this.options.presetRanges,
        initialText: this.options.initialText,
        applyButtonText: this.options.buttonNames.apply,
        clearButtonText: this.options.buttonNames.clear,
        cancelButtonText: this.options.buttonNames.cancel,
        dateFormat: "dd.mm.yy"
    });`

initialText - is a value, that will be shown, it won't be editable.

Answer 1

I would say it is better to use their API if possible instead of trying some hacks, if you take a look at the hidden input value after selecting a date you will find it holds a special text: "{"start":"2017-08-29","end":"2017-08-29"}" which they need it to assign and read values internally.

Also the plugin doesn't show any inputs to let the user input any text by hand, it just show button, span and display: none; input in behind