defaultDate for native Datepicker not working

Help Requests
1

I am trying to use the native jquery datepicker to facilitate choosing or changing a date in a form.

However, I am unable to set its defaultDate property and make it start at that date.

If I use setDate property, it automatically sets the input field’s date to the current day, no matter what, which is something I do not want to happen. If I do not use setDate, it shows me April of 2013, and then changes my input field to be 4/07/2013.

Here’s my html:

                                        <input type="text" value.bind="customerRecord[0].customer.next_contact_date" 
                                            name="next_date" onclick.call="showCalendar()" 
                                            data-value="customerRecord[0].customer.next_contact_date"
                                            onchange.call="canSave" id="next_date">
                                    </div>
                                    <input type="radio" onchange.call="canSave" name="next_contact" value="N/C">
                                    N/C
                                    <input type="radio"
                                        name="next_contact" value="plus"
                                        onchange.call="setPlusDate()">
                                    ${offset}
                                    <input type="radio" name="next_contact" id="cal" 
                                        onchange.call="showCalendar()" value="cal">
                                        <span id="calendar">
                                            Calendar
                                        </span>

The radio button Calendar opens the calendar datepicker as well as clicking on the input field.

Here is my javascript:


  showCalendar()
  {
    var dateArray = this.dbtr.next_contact_date.split('-');
    var newDate = dateArray[1] + '/' + dateArray[2] + '/' + dateArray[0];

    console.log('this.dbtr', this.dbtr.next_contact_date);

    $('#next_date').datepicker(
      {
        dateFormat: 'mm/dd/yyyy',
        showButtonPanel: true,
        setDate: new Date(newDate),
    });

    console.log('dateArray', dateArray);

    $('#next_date').datepicker('setDate', newDate);
//        console.log('datepicker', $('#next_date').datepicker());
    $('#next_date').datepicker('show');
  }

I have tried:

$('#next_date').datepicker('defaultDate', newDate);

and

$('#next_date').datepicker({defaultDate: newDate});

I have tried setting defaultDate inside the object creation itself.

None of these work.

What am I doing wrong?

1 Like
2

Have you been able to resolve this? One potential issue with your current setup is that it’s passing id as a selector to jQuery. If you have 2 instances of the same component on a page, it will always select both elements, which could be funny, and wrong at the same time.

3

I was never able to resolve this, but I found an addon for aurelia - aurelia-bootstrap-datetimepicker, and it has more features, and works better. So I am using that instead.

1 Like