# defaultDate for native Datepicker not working

**URL:** <https://discourse.aurelia.io/t/defaultdate-for-native-datepicker-not-working/3652>\
**Category:** Help Requests\
**Created:** [July 17, 2020, 6:39pm UTC](https://discourse.aurelia.io/t/defaultdate-for-native-datepicker-not-working/3652 "2020-07-17T18:39:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rhysshadow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rhysshadow/32/1959_2.png) [@rhysshadow](https://discourse.aurelia.io/u/rhysshadow)\
**Post date:** [July 17, 2020, 6:39pm UTC](https://discourse.aurelia.io/t/defaultdate-for-native-datepicker-not-working/3652/1 "2020-07-17T18:39:17Z")

</div>

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:

```auto
                                        <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:

```auto

  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:

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

```

and

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

```

I have tried setting `defaultDate` inside the object creation itself.

None of these work.

What am I doing wrong?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [September 9, 2020, 11:49am UTC](https://discourse.aurelia.io/t/defaultdate-for-native-datepicker-not-working/3652/2 "2020-09-09T11:49:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rhysshadow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rhysshadow/32/1959_2.png) [@rhysshadow](https://discourse.aurelia.io/u/rhysshadow)\
**Post date:** [September 10, 2020, 2:39pm UTC](https://discourse.aurelia.io/t/defaultdate-for-native-datepicker-not-working/3652/3 "2020-09-10T14:39:11Z")

</div>

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.