Question

我正在使用bootstrap 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);
        });
    });

Answer 1

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

dp.change

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

Answer 2

使用datepicker的指令。

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

        }
    };
});

我希望这可以帮助您解决问题。

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

2 个答案: