# Datepicker not working fully

**URL:** <https://discourse.cakephp.org/t/datepicker-not-working-fully/4424>\
**Category:** Need Help\
**Created:** [June 19, 2018, 5:57pm UTC](https://discourse.cakephp.org/t/datepicker-not-working-fully/4424 "2018-06-19T17:57:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![zakblack](https://avatars.discourse-cdn.com/v4/letter/z/b9bd4f/32.png) [@zakblack](https://discourse.cakephp.org/u/zakblack)\
**Post date:** [June 19, 2018, 5:57pm UTC](https://discourse.cakephp.org/t/datepicker-not-working-fully/4424/1 "2018-06-19T17:57:51Z")

</div>

Im having hard time making this Datepicker works in all my fields  
It works only in one field if try to do the same in another it doesnt appear

default.ctp

```
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 <script>
 $(function() {
   $(".datepicker").datepicker(
    {
                       dateFormat: 'dd-mm-yy',
                       onSelect: function(dateText, inst){
                             $('#select_date').val(dateText);
                             $("#datepicker").datepicker("destroy");
                      }
    }
   );
  });
 </script>    

```

add.ctp

```
 echo $this->Form->input('support_start_date', array(
       'id'=>'datepicker',
       'type'=>'text'
    ), ['empty' => true]);
        echo $this->Form->input('end_date_support', array(
       'id'=>'datepicker',
       'type'=>'text'
    ), ['empty' => true]);

```

Here it works on support\_start\_date  
But when I try to do the same on end\_date\_support it doesn’t show at all

ContactTable.php

```
   $validator
        ->dateTime('support_start_date')
        ->allowEmpty('support_start_date');

    $validator
        ->dateTime('end_date_support')
        ->allowEmpty('end_date_support');
```

---

<div class="post-metadata">

**Author:** ![rrd](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/rrd/32/113_2.png) [@rrd](https://discourse.cakephp.org/u/rrd)\
**Post date:** [June 20, 2018, 6:42pm UTC](https://discourse.cakephp.org/t/datepicker-not-working-fully/4424/2 "2018-06-20T18:42:28Z")

</div>

you can not have two input fields with the same id (datepicker)

---

<div class="post-metadata">

**Author:** ![zakblack](https://avatars.discourse-cdn.com/v4/letter/z/b9bd4f/32.png) [@zakblack](https://discourse.cakephp.org/u/zakblack)\
**Post date:** [June 21, 2018, 6:02am UTC](https://discourse.cakephp.org/t/datepicker-not-working-fully/4424/3 "2018-06-21T06:02:11Z")

</div>

I tried this way but not work

```
 echo $this->Form->input('end_date_support', array(
        'class'=>'datepicker',
       'type'=>'text'
    ), ['empty' => true]);
```

---

<div class="post-metadata">

**Author:** ![rrd](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/rrd/32/113_2.png) [@rrd](https://discourse.cakephp.org/u/rrd)\
**Post date:** [June 21, 2018, 8:51am UTC](https://discourse.cakephp.org/t/datepicker-not-working-fully/4424/4 "2018-06-21T08:51:12Z")

</div>

you should have 2 datepickers in your javascript also corresponding with the the id-s of the inputs

---

<div class="post-metadata">

**Author:** ![zakblack](https://avatars.discourse-cdn.com/v4/letter/z/b9bd4f/32.png) [@zakblack](https://discourse.cakephp.org/u/zakblack)\
**Post date:** [June 21, 2018, 5:12pm UTC](https://discourse.cakephp.org/t/datepicker-not-working-fully/4424/5 "2018-06-21T17:12:44Z")

</div>

Honestly some exemple would be helpful

I tried this way

```
  echo $this->Form->control('support_start_date', array(
        'class'=>'datepicker',
        'type'=>'text',
        'label' => "DatePicker",
        ), ['empty' => true]);

```

Still not work

```
    <script>
  $(function() {
$(".datepicker").datepicker({
dateFormat: 'dd-mm-yy',
 onSelect: function(dateText, inst) {
  $('#select_date').val(dateText);
  $("#datepicker").datepicker("destroy");
}
 });
 $("#datepicker").datepicker({
 dateFormat: 'dd-mm-yy',
onSelect: function(dateText, inst) {
  $('#select_date').val(dateText);
  $("#datepicker").datepicker("destroy");
}
</script>
```

---

<div class="post-metadata">

**Author:** ![rrd](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/rrd/32/113_2.png) [@rrd](https://discourse.cakephp.org/u/rrd)\
**Post date:** [June 22, 2018, 9:55am UTC](https://discourse.cakephp.org/t/datepicker-not-working-fully/4424/6 "2018-06-22T09:55:17Z")

</div>

you have to use  
`$("#support_start_date").datepicker` and `$("#end_date_support").datepicker` and NOT `$(".datepicker").datepicker` in your js file.

I think you can remove $("#datepicker").datepicker(“destroy”); also.

But your problem is not in cakephp side but jQuery. So read the datepicker docs more carefully.