connecting datetimepicker to angularjs


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">



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

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

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



How to fix it? to make connection?

Problem courtesy of: Sol


So, the problems are:

  1. change ng_modelper ng-model in the div id=date element;
  2. remove ng_model from the input element and implement ngModelCtrl.$render function in order to render model changes to the element
  3. 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:

  dateFormat:'dd/MM/yyyy hh:mm:ss',
    language: 'pt-BR'
  }).on('changeDate', function(e) {

Here is a working Plnkr.

Some additional tips:

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

A pretty simple example of using $render:

var picker ='datetimepicker');

ngModelCtrl.$render = function() {
  if (ngModelCtrl.$modelValue) {
  } else {
Solution courtesy of: Caio Cunha


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

Discussion courtesy of: Gillardo

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

Discussion courtesy of: kape123

This recipe can be found in it's original form on Stack Over Flow.