CODEWITHSUNDEEP
javascriptjqueryangularjstwitter-bootstrap
goldlife
goldlife

Reputation: 1989

how to trigger angular controller function after bootstrap datetimepicker changes

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;
        });
    };
});

Upvotes: 0

Views: 929

Answers (2)

Shrikant
Shrikant

Reputation: 538

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');
};

Upvotes: 1

Martijn Welker
Martijn Welker

Reputation: 5605

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/

Upvotes: 4

Related Questions