Datetimepicker 返回一个空字符串作为值答案

【问题标题】：Datetimepicker return an empty string as valueDatetimepicker 返回一个空字符串作为值
【发布时间】：2016-11-15 04:55:12
【问题描述】：

我正在使用引导程序 datetimepicker 作为日期范围。我正在尝试在 angularjs 控制器中获取日期值，如下所示。我还尝试了 stackoverflow 帖子中的其他一些方法。但是无论我做什么，我都会在控制台日志中将日期值作为“空字符串”。

我已按此顺序添加资源

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

【问题讨论】：

你使用的 Angular js???
是的，我正在使用 angularjs
angular.js 脚本参考在哪里？请至少使用控制器更新您的角度代码。顺便说一句，以下任何答案都有效吗？
我忘了在这里添加。但我已经添加了。

标签： angularjs twitter-bootstrap bootstrap-datetimepicker

【解决方案1】：

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

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

请看一下，让我知道这是否符合您的要求。

【讨论】：

如何解析日期？
这个我也加了
你可以使用 new Date($scope.startDate) 方法来做到这一点
好的。它显示为 Wed Nov 02 2016 11:28:41 GMT+0530 。但我想在 YYYY-MM-DD HH:mm:ss
它是默认的javascript日期格式，你需要使用自定义函数来格式化它。

【解决方案2】：

对日期选择器使用指令。

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

        }
    };
});

希望这能帮助您解决问题。

【讨论】：

我收到错误：无法识别 onSelect 选项
@user3844782，我使用的是 jquery datepicker，而你使用的是 bootstrap，所以你必须设置 bootstrap datepicker 的 onselect，让我更改我的代码
你能给我一些控制台截图吗？
@user3844782 ，在这段代码中没有onselect ，尝试刷新更多时间并使用chrome中的调试器检查。
是的，刷新了很多次。同样在chrome中同样的错误。如果我删除指令，它就消失了。如果我把它加回来。