Angular UI Bootstrap Datetimepicker with seconds

Question

I want to get bootstrap datetimepicker input value in angularjs controller. I am using following custom directive to achieve this . But i am getting the value is undefined. I have added the code related to html and angular code related to the issue.

HTML

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/locale/en-gb.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-resource.js"></script>

    <div class="form-group">
          <div class='input-group date'  id='datetimepickerFrom' datetimepicker  
ng-model="fromDate" >

           <input type='text'  class="form-control" />

           <span class="input-group-addon"> 
           <span class="glyphicon glyphicon-calendar"></span>
           </span>
          </div>
         </div>

JS

'use strict';
var App = angular.module('app',['ngResource']);

App.directive('datetimepicker', function(){
    return {
        require: '?ngModel',
        restrict: 'A',

        link: function(scope, element, attrs, ngModel){

            if(!ngModel) return; // do nothing if no ng-model

            ngModel.$render = function(){
                element.find('#datetimepickerFrom').val( ngModel.$viewValue || '' );
            };

            element.datetimepicker({ 
                format : 'YYYY-MM-DD HH:mm:ss'

            });

            element.on('dp.change', function(){
                scope.$apply(read);
            });

            read();

            function read() {
                var value = element.find('#datetimepickerFrom').val();
                ngModel.$setViewValue(value);
                console.log(ngModel.$setViewValue(value));
            }
        }
    };
});

App.controller('myController', ['$scope', function($scope) {
    $scope.fromDate = moment();
}]);

Why are you using the class `date` for the div and not for the input? You should have the `ng-model` and the class `date` within the input element. — FDavidov, Nov 20 '16 at 06:04
I moved ng-model to input. But still the same result. Please help me solve this sir. — , Nov 20 '16 at 06:10
In this [link](http://eonasdan.github.io/bootstrap-datetimepicker/) they used class date. I followed that. — , Nov 20 '16 at 06:21
@user3844782 Why you are using this datepicker any specific reason? — Aravind, Nov 20 '16 at 06:23
@Aravind No not like that. Nothing worked. This came close to undefined. — , Nov 20 '16 at 06:24
Check that: (1) Element name is unique, (2) `ng-model` with the name of the $scope variable is unique. Once you have done that, add a print like this: `console.log($scope.fromDate);`. Make sure that you add this print to take place AFTER you select a value. — FDavidov, Nov 20 '16 at 06:26
@user3844782 You can use this https://angular-ui.github.io/bootstrap/#/datepicker — Aravind, Nov 20 '16 at 06:32
@user3844782 no. separately you need to include time picker. — Aravind, Nov 20 '16 at 06:53

Aravind · Accepted Answer · 2016-11-20T10:50:05.287

I have found a package for you to fix your problem which is in the link. LINK

Easy way to achieve it follow these below steps

Add this markup.
You need to include the following scripts
- //ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js
- //angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.0.1.js
- //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
- //cdn.rawgit.com/zhaber/datetimepicker/master/datetimepicker.js
- //cdn.rawgit.com/zhaber/datetimepicker/master/datetimepicker.css
Controller will hold the model value in $scope.date which contains the date and time.

Update 1

This control does not support Seconds, I would suggest you to go with Angular UI Bootstrap as below Include the above references expect last two and use the below markup.

<p class="input-group">
    <input type="text" class="form-control" uib-datepicker-popup is-open="popup1.opened"  ng-model="fromDate" datepicker-options="dateOptions" ng-required="true"  close-text="Close" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
</p>
<div uib-timepicker ng-model="fromTime" ng-change="changed()" hour-step="1" minute-step="1"  show-meridian="ismeridian" show-seconds="true"></div>

Add this module as a dependency ui.bootstrap

Use the below code to combine your value

$scope.changed = function () {
var month = $scope.fromDate.getMonth()+1;
var day = $scope.fromDate.getDate();
var year = $scope.fromDate.getFullYear();

var hour = $scope.fromTime.getHours();
if (hour < 10)
 hour = "0"+hour;

var min = $scope.fromTime.getMinutes();
if (min < 10)
 min = "0"+min;

var sec = $scope.fromTime.getSeconds();
if (sec < 10)
 sec = "0"+sec;

 //put it all togeter
var dateTimeString = month+'/'+day+'/'+year+' '+hour+':'+min+':'+sec;

$scope.fromDateTime= dateTimeString;
};

Your live ng-model value combined together

fromDateTime:{{fromDateTime |date : 'yyyy-MM-dd HH:mm:ss'}}

So by this if the seconds value is changed only you will get the actual Date Time

this format (YYYY-MM-DD HH:mm:ss) is not accepted ? Can you help me solve with a simple working custom directive for bootstrap? — , Nov 20 '16 at 08:27
I am not getting any error for this. It logs on console. But it does not work in the above date time format — , Nov 20 '16 at 08:59

Angular UI Bootstrap Datetimepicker with seconds

1 Answers1

Update 1