Change of date in input should update date in calendar

[bjarnef]

When changing date in input it should update the date in calendar, e.g. like this example here: http://eternicode.github.io/bootstrap-datepicker/

[bogdancss]

Is there a way to do this?

[Gwen42]

On mousedown of the input element, you can call selectDate() and set the date attribute of the datepicker. Remember to transform the String to a Date object and maybe validate it before setting or you might see a lot of NaN. Would appreciate if the datepicker will be able to do that by itself in the future.

[modean]

@Gwen42 mousedown excludes those that navigate the screen using their keyboard.

[gxenakis]

at main js file :
// events
onBeforeShow: '',
find below and add:
show: function () {
this.opts.onBeforeShow(this);

on calling :
onBeforeShow: function(inst) { if (inst.elIsInput && $(inst.el).val() != ''){ //sets date from input var $selDate = parseDateFromInput($(inst.el).val()); inst.selectDate($selDate); } }

parseDateFromInput is custom fuction like new Date();

[idautocfator]

I think this might also fix the selection of the current date in the picker when the associated input has a date value in it prior to datepicker initialization.

[DuudeXX8]

Any solutions in this way?

[jbreuer95]

@DuudeXX8 I made something custom for our company with the help of momentjs

You may need to add some more conversions to momentjs format, these are the only ones we use

PS. this is for v2 but the same applies for v3

            $('#selector').on('input', function() {
                if ($(this).data('datepicker')) {
                    const picker = $(this).data('datepicker');
                    const value = $(this).val();
                    
                    if (!value) {
                        picker.date = new Date();
                        picker.clear();
                        return;
                    }

                    let formatDate = null;
                    let formatTime = null;
                    if (picker.opts.dateFormat) {
                        formatDate = picker.opts.dateFormat.replace('dd', 'DD').replace('mm', 'MM').replace('yyyy', 'YYYY')
                    }
                    if (picker.opts.timeFormat) {
                        formatTime = picker.opts.timeFormat.replace('hh', 'HH').replace('ii', 'mm')
                    }
                    let format = [formatDate, formatTime].filter(n => n).join(picker.opts.dateTimeSeparator);

                    const parsed = moment(value, format, true)
                    if (parsed.isValid()) {
                        const autoClose = picker.opts.autoClose;
                        if (autoClose) {
                            picker.update('autoClose', false);
                        }

                        const date = parsed.toDate();
                        picker.date = date;
                        picker.selectDate(date);

                        if (autoClose) {
                            picker.update('autoClose', true);
                        }
                    }
                }
            });

You can also add something similar to the blur event to remove invalid values

           $(selector).on('blur', function() {
                if ($(this).data('datepicker')) {
                    const picker = $(this).data('datepicker');
                    const value = $(this).val();

                    if (!value) {
                        return;
                    }

                    let formatDate = null;
                    let formatTime = null;
                    if (picker.opts.dateFormat) {
                        formatDate = picker.opts.dateFormat.replace('dd', 'DD').replace('mm', 'MM').replace('yyyy', 'YYYY')
                    }
                    if (picker.opts.timeFormat) {
                        formatTime = picker.opts.timeFormat.replace('hh', 'HH').replace('ii', 'mm')
                    }
                    let format = [formatDate, formatTime].filter(n => n).join(picker.opts.dateTimeSeparator);

                    const parsed = moment(value, format, true)
                    if (!parsed.isValid()) {
                        picker.date = new Date();
                        picker.clear();
                    }
                }
            });

[alexpechkarev]

You can try the following: it allows me to edit the date in the input field and reflect changes in the Air Datepicker. Using Alpine JS.

...
<div x-data="{init(){initDatepicker(this.$refs.picker, d);}}">
    <input type="text" x-model="d.open_date" x-ref="picker" :id="$id('picker')">
</div>

...
 initDatepicker(picker, d){
      let ap = new AirDatepicker(picker,{
          selectedDates: [d.open_date || new Date() ],
          onSelect(date) {
              d.open_date = date.formattedDate;
          },
      });

      ap.$el.addEventListener('input', (e ) => {
          try{
              let currDate = ap.formatDate(ap.selectedDates[0], 'yyyy-mm-dd'); 
              let regEx = /^\d{4}-\d{2}-\d{2}$/;
              if(e.target.value.match(regEx) && currDate != e.target.value){
                 // set the date
                 ap.selectDate(e.target.value);
                 // open datepicker
                 ap.show();
                 // close datepicker in 1sec
                 setTimeout(() => {
                     ap.hide();
                 }, 1000);
          }
          }catch(err){
              console.log(err)
          }
      });
  }

[cloudymeatball]

I found a workaround while submitting an issue on #589 (comment)

let localDate = new Date(input)
localDate.setDate(localDate.getUTCDate())
datepicker.selectDate(localDate)

it allows the datepicker to properly format the user input, as long it's valid.
I am using the focusout event, input or change could be problematic when changing the year or month.