Datetimepicker返回一個空字符串作爲值

我使用日期範圍的引導datetimepicker。我試圖在angularjs控制器中獲取日期值，如下所示。我也嘗試了一些從stackoverflow帖子的其他方法。但是，我做了什麼，我把日期值作爲控制檯日誌中的'空字符串'。Datetimepicker返回一個空字符串作爲值

我已經在這個順序

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

來源

2016-11-15 user3844782

你使用角js？ – Aravind

是的，我正在使用angularjs – user3844782

其中是angular.js腳本引用？請至少用控制器更新您的角碼。 btw任何下面的答案工作？ – Aravind

您可以使用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>

沿着請看看這個，讓我知道，如果這符合您的要求。

來源

2016-11-15 05:48:05 Nitheesh

如何解析日期？ – user3844782

我也加了 – Nitheesh

你可以用新的Date（$ scope.startDate）方法來做 – Nitheesh

用指令的日期選擇器。

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

     } 
    }; 
});

我希望這將幫助你解決你的問題。

來源

2016-11-15 05:00:22

我越來越錯誤：選項onSelect不被識別 – user3844782

@ user3844782，我使用的是jquery datepicker，並且您正在使用bootstrap，因此您必須選擇bootstrap datepicker，讓我更改我的代碼 –

@ user3844782，試試更新的答案 –

Datetimepicker返回一個空字符串作爲值

回答

相關問題