defaultDate for native Datepicker not working

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" 
                                  "canSave" id="next_date">
                                    <input type="radio""canSave" name="next_contact" value="N/C">
                                    <input type="radio"
                                        name="next_contact" value="plus"
                                    <input type="radio" name="next_contact" id="cal" 
                              "showCalendar()" value="cal">
                                        <span id="calendar">

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

Here is my javascript:

    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);

        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());

I have tried:

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


$('#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

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.

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