Угловой пользовательский интерфейс Bootstrap Datetimepicker с секундами

Question

Я хочу получить загрузочное значение datetimepicker в контроллере angularjs. Я использую следующую пользовательскую директиву для достижения этой цели. Но я получаю значение не определено. Я добавил код, связанный с HTML и угловой код, связанный с проблемой.

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

Answer 1

Я нашел пакет для вас, чтобы исправить вашу проблему, которая находится в ссылке. ССЫЛКА НА САЙТ

Простой способ добиться этого, выполните следующие действия

1. Добавьте эту разметку.

2. Вам необходимо включить следующие сценарии

   • //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

3. Контроллер будет хранить значение модели в $scope.date который содержит дату и время.

Обновление 1

Этот элемент управления не поддерживает секунды, я бы посоветовал вам использовать Angular UI Bootstrap, как показано ниже. Включите приведенные выше ссылки, ожидайте последние два и используйте приведенную ниже разметку.

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

Добавьте этот модуль в качестве зависимости ui.bootstrap

Используйте приведенный ниже код, чтобы объединить вашу ценность

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

Ваше значение NG-модели в реальном времени, объединенное вместе

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

Таким образом, если значение секунд будет изменено, вы получите фактическую дату и время.