Datetimepicker return 一个空字符串作为值

Question

我正在使用 bootstrap datetimepicker 作为日期范围。我正在尝试获取 angularjs 控制器中的日期值，如下所示。我还尝试了 Whosebug 帖子中的其他一些方法。但是无论我做什么，我都会在控制台日志中得到 'an empty string' 的日期值。

我已按此顺序添加资源

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

与问题相关的最少 HTML 代码。

<div class="container"> 
  <div class='col-md-3'>
    <div class="form-group">
      <div ng-show="value == 'showSearch2'" class='input-group date'  id='datetimepicker6'>

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

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

在控制器中

$(function() {
        $('#datetimepicker6').datetimepicker({
            format : 'YYYY-MM-DD HH:mm:ss'
        });
        $("#datetimepicker6").on("dp.change", function(e) {
            $('#datetimepicker7').data("DateTimePicker").minDate(e.date);

             $scope.startDate = $("#datetimepicker6").val();
             alert("selected date is " + $scope.startDate);
        });
    });

Answer 1

为日期选择器使用指令。

HTML代码：

<input class="form-control input-sm ll-skin-melon" jqdatepicker placeholder="2015-06-15" id="duedate" name = "duedate" ng-model="duedate">

指令代码：

var drctv = angular.module('yourapp.directives', []);

drctv.directive('jqdatepicker', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModelCtrl) {
            console.log(element);
            element.datepicker({
                dateFormat: 'yy-mm-dd',
                minDate: 0 
            });

            element.on("dp.change", function(date) {
                  scope.$apply(function() {
                            ngModelCtrl.$setViewValue(date);
                        });
             });

           /*You can also try this code*/

           element.datepicker().on('changeDate', function (ev) {
                  scope.$apply(function() {
                            ngModelCtrl.$setViewValue(date);
                  });
           });  

        }
    };
});

希望本文能帮助您解决问题。

Answer 2

您可以在 dp.change 事件中使用 e.date 值。我附上了一个小代码片段

<!DOCTYPE html>
<html>

<head>
    <script src="http://ajax.googleapis.bootcss.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <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>
</head>

<body>

<script>
    var app = angular.module("myTestApp", []);
    app.controller("myCtrl", function ($scope) {
        $('#datetimepicker1').datetimepicker({
            format: "YYYY-MM-DD HH:mm:ss"
        });
        $("#datetimepicker1").on("dp.change", function (e) {
            $scope.startDate = e.date;
    $scope.startDate = new Date($scope.startDate);
    var year = $scope.startDate.getFullYear();
    var month = $scope.startDate.getMonth() + 1;
    var date = $scope.startDate.getDate(); 
    var hour = $scope.startDate.getHours();
    var minute = $scope.startDate.getMinutes();
    var second = $scope.startDate.getSeconds();
    var DateString = year.toString() + "-" +
                            (((month.toString()).length ==1)? ("0" + month.toString()) : month.toString()) + "-" +
                            (((date.toString()).length ==1)? ("0" + date.toString()) : date.toString()) + " " +
                            (((hour.toString()).length ==1)? ("0" + hour.toString()) : hour.toString()) + ":" +
                            (((minute.toString()).length ==1)? ("0" + minute.toString()) : minute.toString()) + ":" +
                            (((second.toString()).length ==1)? ("0" + second.toString()) : second.toString());
                            
                              
            console.log("selected date is " + DateString);
        });
    });
</script>

<div ng-app="myTestApp" ng-controller="myCtrl">
    <div class="container">
        <div class="row">
            <div class='col-sm-6'>
                <div class="form-group">
                    <div class='input-group date' id='datetimepicker1'>
                        <input type='text' class="form-control" />
                        <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

</html>

请看看这个，如果这符合您的要求，请告诉我。

Datetimepicker return 一个空字符串作为值

Datetimepicker return an empty string as value

twitter-bootstrap

angularjs

bootstrap-datetimepicker