# Bootstrap - datepicker doesn't work

**URL:** <https://discourse.aurelia.io/t/bootstrap-datepicker-doesnt-work/1354>\
**Category:** Help Requests\
**Created:** [June 19, 2018, 7:57am UTC](https://discourse.aurelia.io/t/bootstrap-datepicker-doesnt-work/1354 "2018-06-19T07:57:33Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![AndreaProgrammerIt](https://avatars.discourse-cdn.com/v4/letter/a/e9a140/32.png) [@AndreaProgrammerIt](https://discourse.aurelia.io/u/AndreaProgrammerIt)\
**Post date:** [June 19, 2018, 7:57am UTC](https://discourse.aurelia.io/t/bootstrap-datepicker-doesnt-work/1354/1 "2018-06-19T07:57:33Z")

</div>

Hi all,

i need the datepicker of boostrap([http://bootstrap-datepicker.readthedocs.io/en/latest/](http://bootstrap-datepicker.readthedocs.io/en/latest/))

How can i take the value of the date?!

```
<div class="form-group">
   <div class="col-sm-2">
      <label class="control-label">Entro Data 2</label>
   </div>
   <div class="col-sm-10">
      <div class="input-group">
         <div class="input-group-addon">
            <img width="15" height="15" src="../../assets/images/icon_esclamation.png" />
         </div>
         <input class="form-control" id="date" value.bind="dateEntered" model.bind="dateObject" name="date" placeholder="MM/DD/YYY" type="text" />
      </div>
   </div>
</div>

```

“dateEntered” and “dateObject” are undefined always.

---

<div class="post-metadata">

**Author:** ![mroeling](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mroeling/32/781_2.png) [@mroeling](https://discourse.aurelia.io/u/mroeling)\
**Post date:** [June 19, 2018, 8:06am UTC](https://discourse.aurelia.io/t/bootstrap-datepicker-doesnt-work/1354/2 "2018-06-19T08:06:55Z")

</div>

I noticed there is an aurelia port of this plugin

[https://www.npmjs.com/package/aurelia-bootstrap-datepicker](https://www.npmjs.com/package/aurelia-bootstrap-datepicker)

Perhaps you can find your answer within that code. Good luck!

---

<div class="post-metadata">

**Author:** ![AndreaProgrammerIt](https://avatars.discourse-cdn.com/v4/letter/a/e9a140/32.png) [@AndreaProgrammerIt](https://discourse.aurelia.io/u/AndreaProgrammerIt)\
**Post date:** [June 19, 2018, 8:40am UTC](https://discourse.aurelia.io/t/bootstrap-datepicker-doesnt-work/1354/3 "2018-06-19T08:40:47Z")

</div>

Sorry man, but it gives to me this error…

![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/96c779508e79731b55fdfe5efce221f1a9c68c67.png)

I see always this error with all package that i install by NPM… infact my solution is to download the source of the package and “link” the “dist/js” and “dist/css” that i need… any solution?

Thank you,  
Andrea

---

<div class="post-metadata">

**Author:** ![arabsight](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/arabsight/32/33_2.png) [@arabsight](https://discourse.aurelia.io/u/arabsight)\
**Post date:** [June 19, 2018, 10:49am UTC](https://discourse.aurelia.io/t/bootstrap-datepicker-doesnt-work/1354/4 "2018-06-19T10:49:44Z")

</div>

you can get the value of the date from the ‘changeDate’ event:

```auto
    attached() {
      this.picker = $('#date').datepicker();

      this.picker.on('changeDate', e => {
        this.dateEntered = e.date;
      });
    }

```

---

<div class="post-metadata">

**Author:** ![AndreaProgrammerIt](https://avatars.discourse-cdn.com/v4/letter/a/e9a140/32.png) [@AndreaProgrammerIt](https://discourse.aurelia.io/u/AndreaProgrammerIt)\
**Post date:** [June 19, 2018, 1:31pm UTC](https://discourse.aurelia.io/t/bootstrap-datepicker-doesnt-work/1354/5 "2018-06-19T13:31:01Z")

</div>

> [@arabsight](#):
>
> $

For me $ doesn’t work 😛 i don’t know but i tryied all methods that i found in intenet hahaha but i’m not able to take the elements from the DOM.

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/70350395f303cfdc56f973c2fa5e015240366847.png)

i’m using typescript on [Asp.Net](http://Asp.Net) Core.

---

<div class="post-metadata">

**Author:** ![arabsight](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/arabsight/32/33_2.png) [@arabsight](https://discourse.aurelia.io/u/arabsight)\
**Post date:** [June 19, 2018, 4:18pm UTC](https://discourse.aurelia.io/t/bootstrap-datepicker-doesnt-work/1354/6 "2018-06-19T16:18:57Z")

</div>

you need to import jquery, something like : `import * as $ from 'jquery'`

---

<div class="post-metadata">

**Author:** ![ViktorDimitrievski](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/viktordimitrievski/32/134_2.png) [@ViktorDimitrievski](https://discourse.aurelia.io/u/ViktorDimitrievski)\
**Post date:** [June 20, 2018, 7:44am UTC](https://discourse.aurelia.io/t/bootstrap-datepicker-doesnt-work/1354/7 "2018-06-20T07:44:39Z")

</div>

First install jquery and add in aurelia.json, then install bootstrap datepicker and also add in aurelia.json

```
"jquery",    
{
     "name": "bootstrap-datepicker",
     "path": "../node_modules/bootstrap-datepicker/dist",
     "main": "js/bootstrap-datepicker",
     "deps": ["jquery"]
    }

```

Then you can use it in creating custom element or in the view

```
import * as $ from 'jquery';
import 'bootstrap-datepicker';
```

---

<div class="post-metadata">

**Author:** ![AndreaProgrammerIt](https://avatars.discourse-cdn.com/v4/letter/a/e9a140/32.png) [@AndreaProgrammerIt](https://discourse.aurelia.io/u/AndreaProgrammerIt)\
**Post date:** [June 20, 2018, 11:50am UTC](https://discourse.aurelia.io/t/bootstrap-datepicker-doesnt-work/1354/8 "2018-06-20T11:50:34Z")

</div>

![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/e8882201cf63c25e0594141aea0cdf5e037a3cab.png)

but i don’t have aurelia.json …

---

<div class="post-metadata">

**Author:** ![AndreaProgrammerIt](https://avatars.discourse-cdn.com/v4/letter/a/e9a140/32.png) [@AndreaProgrammerIt](https://discourse.aurelia.io/u/AndreaProgrammerIt)\
**Post date:** [June 20, 2018, 12:56pm UTC](https://discourse.aurelia.io/t/bootstrap-datepicker-doesnt-work/1354/9 "2018-06-20T12:56:02Z")

</div>

![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/8b7c554072f9e46877ca14e983294dd95e1840c0.png)

I have the value, but i want to set the “minDate” of other datepicker to create a datepicker range.

I’m not able to “update” the graphics of the control… any suggestion?

---

<div class="post-metadata">

**Author:** ![ViktorDimitrievski](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/viktordimitrievski/32/134_2.png) [@ViktorDimitrievski](https://discourse.aurelia.io/u/ViktorDimitrievski)\
**Post date:** [June 21, 2018, 9:00am UTC](https://discourse.aurelia.io/t/bootstrap-datepicker-doesnt-work/1354/10 "2018-06-21T09:00:40Z")

</div>

Because you are using webpack have a look at this  
[https://www.npmjs.com/package/aurelia-bootstrap-datetimepicker#aurelia-webpack](https://www.npmjs.com/package/aurelia-bootstrap-datetimepicker#aurelia-webpack)

---

<div class="post-metadata">

**Author:** ![dmongrel](https://avatars.discourse-cdn.com/v4/letter/d/5f8ce5/32.png) [@dmongrel](https://discourse.aurelia.io/u/dmongrel)\
**Post date:** [June 22, 2018, 4:27pm UTC](https://discourse.aurelia.io/t/bootstrap-datepicker-doesnt-work/1354/11 "2018-06-22T16:27:59Z")

</div>

If you can’t use dollar sign, you might be having trouble with exports of your libraries. Take a look at how I setup bootstrap (which re-exports doillar sign from jquery) and lodash from my aurelia.json. I use requireJS so I can’t speak to any WebPack-iness.

```
{
            "name": "bootstrap",
            "path": "../node_modules/bootstrap/dist",
            "main": "js/bootstrap.min.js",
            "deps": [
              "jquery",
              "popper.js"
            ],
            "exports": "$",
            "resources": [
              "css/bootstrap.css"
            ]
          },
          {
            "name": "lodash",
            "path": "../node_modules/lodash",
            "main": "lodash.min",
            "exports": "_"
          }
```