Bootstrap - datepicker doesn't work

Help Requests
1

Hi all,

i need the datepicker of boostrap(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.

2

I noticed there is an aurelia port of this plugin

https://www.npmjs.com/package/aurelia-bootstrap-datepicker

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

2 Likes
3

Sorry man, but it gives to me this error…

image

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

4

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

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

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

For me $ doesn’t work :stuck_out_tongue: 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
image908×343 12.2 KB

i’m using typescript on Asp.Net Core.

6

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

7

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';
8

image
image.png651×603 36.1 KB

but i don’t have aurelia.json …

9

image
image.png1563×604 52.9 KB

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?

10

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

11

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": "_"
          }