how to trigger angular controller function after bootstrap datetimepicker changes

Question

I want to trigger a function inside my angular controller after I change a input with my datetimepicker. But how can I implement this? Here is my code so far:

HTML:

<div class="col-md-6">
   <div class="input-group">
       <input id="fromDateFilter"
          type="hidden"
          class="input-sm form-control"
          placeholder="{{trans('mission/mission.fields.from') }}"
          name="from"
       />
       <input type="text" class="form-control" id="datepickerFromFilter" />
       <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar"></span>
       </span>
    </div>
</div>
<div class="col-md-6">
    <div class="input-group">
        <input id="toDateFilter"
            type="hidden"
            class="input-sm form-control"
            placeholder="{{trans('mission/mission.fields.to') }}"
            name="to"
         />
         <input type="text" class="form-control" id="datepickerToFilter" />
         <span class="input-group-addon">
             <span class="glyphicon glyphicon-calendar"></span>
         </span>
     </div>
</div>

Jquery:

$( document ).ready(function() {

    var fromFilter    = $('#fromDateFilter').val(),
    toFilter      = $('#toDateFilter').val();

    var fromDateFilter    = new Date(Date.parse(fromFilter.replace('-','/','g'))),
        toDateFilter      = new Date(Date.parse(toFilter.replace('-','/','g')));

    $('#datepickerFromFilter').datetimepicker({
        beforeShow: function (input, inst) {
            setTimeout(function () {
                inst.dpDiv.css({
                    top: 100
                });
            }, 0);
        },
        dateFormat: "dd.mm.yy",
        timeFormat: "HH:mm:ss",
        altFormat: "yy-mm-dd",
        altTimeFormat: "HH:mm:ss",
        altFieldTimeOnly: false,
        showSecond: false,
        stepMinute: 15,
        altField: "#fromDateFilter"
    }).datetimepicker("setDate", fromDateFilter);


    $('#datepickerToFilter').datetimepicker({
        beforeShow: function (input, inst) {
            setTimeout(function () {
                inst.dpDiv.css({
                    top: 100
                });
            }, 0);
        },
        dateFormat: "dd.mm.yy",
        timeFormat: "HH:mm:ss",
        altFormat: "yy-mm-dd",
        altTimeFormat: "HH:mm:ss",
        altFieldTimeOnly: false,
        showSecond: false,
        stepMinute: 15,
        altField: "#toDateFilter"
    }).datetimepicker("setDate", toDateFilter);
});

AngularJS:

app.controller('missionController', function($scope, $http, $attrs) {

    $scope.apiUrl = '/ajax/mission';
    $scope.missions = [];

    $scope.searchActualMissions = function(from, to) {
        $http.post($scope.apiUrl+'/actual', {
            from: from,
            to: to
        }).success(function(data, status, headers, config) {
            $scope.missions = data;
        });
    };
});

Martijn Welker · Accepted Answer · 2016-01-14 09:32:11Z

4

I strongly recommend you to look into ui-bootstrap, it's a collection of angular-directives with bootstrap functions, this way you can do all of your bootstrap stuff the 'angular way'.

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

answered Jan 14, 2016 at 9:32

Martijn Welker

5,6151 gold badge19 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shrikant · Accepted Answer · 2016-01-14 10:29:14Z

1

HTML

 <div class="row">
    <div class="col-md-6">
        <p class="input-group">
          <input type="text" class="form-control" ng-change="fun()" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
    </div>

    <div class="col-md-6">
        <p class="input-group">
          <input type="date" class="form-control" ng-change="fun()" uib-datepicker-popup ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
    </div>
</div>

JS

$scope.fun=function()
{
  console.log('hellllllllllllo');
};

edited Jan 14, 2016 at 10:29

answered Jan 14, 2016 at 9:42

Shrikant

5385 silver badges16 bronze badges

4 Comments

Shrikant Over a year ago

try with ng-change as mentioned above to invoke function when date picker changes.

goldlife Over a year ago

this does not work.. I got error: Error: [$compile:ctreq] errors.angularjs.org/1.4.6/$compile/… I/<@ttos2.localhost/vendor/angularjs/angular-1.4.6.min.js:6:416 t@ttos2.localhost/vendor/angularjs/angular-1.4.6.min.js:59:241 K@ttos2.localhost/vendor/angularjs/angular-1.4.6.min.js:62:89

goldlife Over a year ago

ok... your code does not work because you have forget to specify a ng-model to the input field. Now I got no error, but it does not work. Changing the date does not call my function.

Shrikant Over a year ago

its work for me.take a look once might be help you too

Collectives™ on Stack Overflow

how to trigger angular controller function after bootstrap datetimepicker changes

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related