connecting datetimepicker to angularjs

Question

I need to create one input field with date and time using angular + bootstrap. I found this datetime picker it looks excatly i need - date and time in one field, and blocking user wrong editions. I writed a directive, datepickers started, but it changes the view and the model doesn't changes... I also tried onSelect, but nothing happens too

<div class="container container-fluid" ng-controller="Ctrl1">
2+2={{2+2}}, var1={{var1}}
    <form class="form-horizontal" novalidate name="form" ng-submit="submit()">
    <div class="well">
        <div id="date" class="input-append" datetimez ng_model="var1">
            <input data-format="MM/dd/yyyy HH:mm:ss PP" type="text" id="input1" name="input1" ng_model="var1"></input>
    <span class="add-on">
      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
      </i>
    </span>
        </div>
    </div>
</form>

</div>

js

var project = angular.module('project',['ui.bootstrap']);

project.directive('datetimez', function() {
    return {
        restrict: 'A',
        require : 'ngModel',
        link: function(scope, element, attrs, ngModelCtrl) {
            $(function(){
                element.datetimepicker({
                    dateFormat:'dd/MM/yyyy hh:mm:ss',
                    language: 'pt-BR',
                    onSelect:function (date) {
                        //alert('zz');
                        ngModelCtrl.$setViewValue(date);
                        scope.$apply();
                    }
                });
            });
        }
    };
});

project.controller('Ctrl1', ['$scope', '$rootScope',  function(scope, rootScope){

    scope.var1="123";

}]);

How to fix it? to make connection?

i dont understand how to move it to jsfiddle, ill try to add max code there — Sol
– Sol, Commented Oct 20, 2013 at 22:02
jsfiddle.net/sLmyz i copied all code included all files bu date dialog not appears ( here is screenshot of both files img5.imageshack.us/img5/8231/9xbp.png — Sol
– Sol, Commented Oct 20, 2013 at 22:25
and screen of action date in input changed but var1 steel old value img62.imageshack.us/img62/3882/5enm.png — Sol
– Sol, Commented Oct 20, 2013 at 22:27

Caio Cunha · Accepted Answer · 2013-10-20 23:16:03Z

11

So, the problems are:

change ng_modelper ng-model in the div id=date element;
remove ng_model from the input element and implement ngModelCtrl.$render function in order to render model changes to the element
as per the component docs:

The only event exposed is ‘changeDate’, which will expose ‘date’ and ‘localDate’ properties on the event object

So you need to handle the change event other ways, look:

element.datetimepicker({
  dateFormat:'dd/MM/yyyy hh:mm:ss',
    language: 'pt-BR'
  }).on('changeDate', function(e) {
    ngModelCtrl.$setViewValue(e.date);
    scope.$apply();
  });

Here is a working Plnkr.

Some additional tips:

as said before, remove the internal ng-model and implement ngModelCtrl.$render to handle model changes
use the template property in order to encapsulate the internal elements of the component

A pretty simple example of using $render:

var picker = element.data('datetimepicker');

ngModelCtrl.$render = function() {
  if (ngModelCtrl.$modelValue) {
    picker.setLocalDate(ngModelCtrl.$modelValue);
  } else {
    picker.setLocalDate(null);
  }
}

edited Oct 20, 2013 at 23:16

answered Oct 20, 2013 at 22:55

Caio Cunha

23.4k6 gold badges81 silver badges74 bronze badges

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

4 Comments

Sol Over a year ago

Thank you! "and implement ngModelCtrl.$render to handle model changes" what do you mean? Does "ngModelCtrl.$setViewValue(e.date);" not enough? Actualy i dont understand the way new value comes to input ( we setted new value to div(it's the div who has directive 'datetimez') not input so how does date value jumped to input? It's because of class="input-append"? it's bootstrap who do this value move?

Caio Cunha Over a year ago

Answering both your questions, you use $setViewValue to update the model upon a change in the view. And you use $render to update the view when there is a change in the model. Take a look in here. Will add a small example to the answer.

Caio Cunha Over a year ago

Just added a example of how to implement the ngModelCtrl.$render function.

Sol Over a year ago

ok, i understand that we setted ViewValue for DIV element but how this value comes to input?? Input has no ngModel atribute at all... They are connected somehow via css - id="input1" and class="input-append"? and also a question about data-format="MM/dd/yyyy HH:mm:ss PP" attribute of input. If we hardcoded dateFormat:'dd/MM/yyyy hh:mm:ss' in out derictive then it will be ignored?

Gillardo · Accepted Answer · 2015-03-11 18:58:10Z

2

Late answer, but you could always use this one

Bootstrap-ui/datetime-picker it uses the datepicker and timepicker from bootstrap-ui without using jquery or moment.js

answered Mar 11, 2015 at 18:58

Gillardo

9,85818 gold badges83 silver badges152 bronze badges

Comments

nikib3ro · Accepted Answer · 2014-11-01 00:27:42Z

1

CaioToOn solution is pretty nice. But on top of that it seems that there is "official" wrapper now on following address:

https://gist.github.com/derfbn/73350e5f8eb92c3967d7

answered Nov 1, 2014 at 0:27

nikib3ro

20.7k25 gold badges124 silver badges185 bronze badges

1 Comment

Kentonbmax Over a year ago

You should never use JQuery with Angular!

Collectives™ on Stack Overflow

connecting datetimepicker to angularjs

3 Answers 3

4 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Linked

Related