Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to catch the bootstrap datepicker change event?

Now I am trying to do something after user change the date. But seems like my ng-change is ignored.

Here is my code sample:

 <input ng-change='changedate()'
                       type="text" 
                       starting-day="2" 
                       show-button-bar="false" 
                       show-weeks="false" 
                       class="form-control addTicketDateInput" 
                       datepicker-popup="dd MMM" 
                       ng-model="startdate" 
                       is-open="openstart"                         
                       datepicker-options="dateOptions"           
                       ng-required="true"
                       close-text="Close" />

In my controller:

$scope.changedate=function(){
  console.log($scope.startdate);
}

Any idea?

like image 525
linyuanxie Avatar asked Apr 07 '15 17:04

linyuanxie


People also ask

How can we get the current date using datepicker?

To set current date in control to which jQuery UI datepicker bind, use setDate() method. Pass date object which needs to be set as an argument to setDate() method. If you want to set it to current date then you can pass 'today' as argument.

How do I know if my datepicker is loaded?

You can check to see if the datepicker script has loaded using: if ($. fn. datepicker) { // ... }

Why bootstrap datepicker is not working?

Because you're defining the code in the head the body and its contents haven't been loaded yet; so the selector finds no elements to initialize datepicker. If you don't want to use document. ready functionality you could also move the script to the end of the body tag.


3 Answers

You could keep an eye on when the $scope changed.

Something like this:

$scope.startdate;

$scope.$watch("startdate", function(newValue, oldValue) {
    console.log("I've changed : ", startdate);
});
like image 145
Michael Tot Korsgaard Avatar answered Sep 28 '22 15:09

Michael Tot Korsgaard


Simple solution: Try passing the value:

HTML

ng-change="selectDate(dt)"

JavaScript

$scope.selectDate = function(dt) {
  console.log(dt);
}
like image 26
Ashwin Avatar answered Sep 28 '22 13:09

Ashwin


The way I've done this before is to wrap the datepicker jQuery stuff in an angular directive. This is rough but here's the idea:

app.directive('dateDirective', function() {
    return {
        restrict: 'A',
        scope: {
            onChange: '&'
        },
        link: function(scope, element, attrs) {
          element.datetimepicker({
            format: "MM-yyyy"
            //all your options here
          }).on('changeDate', function(e) {
            scope.$apply(function(scope) {
              scope.onChange(e.date);
            });
          });
        }
    };
});

You can capture the change event from the jQuery element and use it to call a function in your controller, or just use it to set scope values or whatever:

var app = angular.module('myApp', []);

app.controller('myAppCtrl', function($scope) {
  $scope.current = '';
  $scope.changedate = function(date){
    $scope.current = date;
  };
});

Then you just need to add the directive to your dom element:

<input date-directive
                   type="text" 
                   starting-day="2" 
                   show-button-bar="false" 
                   show-weeks="false" 
                   class="form-control addTicketDateInput" 
                   datepicker-popup="dd MMM" 
                   ng-model="startdate" 
                   is-open="openstart"                         
                   datepicker-options="dateOptions"           
                   ng-required="true"
                   close-text="Close" />

Then tell it which scope function to call:

<input date-directive onChange='changedate(date)'
                   type="text" 
                   starting-day="2" 
                   show-button-bar="false" 
                   show-weeks="false" 
                   class="form-control addTicketDateInput" 
                   datepicker-popup="dd MMM" 
                   ng-model="startdate" 
                   is-open="openstart"                         
                   datepicker-options="dateOptions"           
                   ng-required="true"
                   close-text="Close" />

Like I said this is rough just recalled it quickly. If this doesn't help I'll dig out a sample that is tested.

Hope that helps!

also, there's a datepicker directive here that might be halpful:

https://angular-ui.github.io/bootstrap/

like image 23
Chris Avatar answered Sep 28 '22 15:09

Chris