Datetimepickerは値として空の文字列を返します

私は日付範囲のためのブートストラップdatetimepickerを使用しています。私は、以下に示すように、anglejsコントローラで日付の値を取得しようとしています。私はまた、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

はいanglejsを使用しています – user3844782

ここでangular.jsスクリプトリファレンスはありますか？あなたの角度コードは、少なくともコントローラで更新してください。下の答えのどれかが働いた？ – 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を使用していて、ブートストラップを使用しているので、ブートストラップdatepickerを置く必要があります。コードを変更しましょう –

@ user3844782、 –

Datetimepickerは値として空の文字列を返します

答えて

関連する問題