Angular UI Bootstrap 带秒数的日期时间选择器

Question

我想在 angularjs 控制器中获取 bootstrap datetimepicker 输入值。我正在使用以下自定义指令来实现这一点。但我得到的值是未定义的。我添加了与 html 相关的代码和与该问题相关的 angular 代码。

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

我在 link 中为您找到了解决问题的软件包。 LINK

实现它的简单方法遵循以下步骤

添加此标记。
您需要包含以下脚本
- //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
控制器将在 $scope.date 中保存模型值，其中包含 日期和时间 。

更新 1

这个控件不支持Seconds，我建议你使用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-model 值组合在一起

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

因此，如果秒值发生变化，您将获得实际的日期时间

Angular UI Bootstrap 带秒数的日期时间选择器

Angular UI Bootstrap Datetimepicker with seconds

angularjs

angular-ui-bootstrap

bootstrap-datetimepicker

angular-ui-datepicker

更新 1