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