1

我想在 angularjs 控制器中获取引导 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();
}]);
4

1 回答 1

0

我在链接中找到了一个包来解决您的问题。 关联

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

  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

此控件不支持 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'}}

因此，如果秒值仅更改，您将获得实际的日期时间

于 2016-11-20T07:14:03.593 回答