Search code examples
angularjstwitter-bootstrapbootstrap-datetimepicker

Datetimepicker return an empty string as value

I am using bootstrap datetimepicker for date range. I am trying to get the date value in angularjs controller like shown below. I also tried some other methods from stackoverflow posts. But what ever i do i get the date value as 'an empty string' in console log.

I have added resources in this order

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

Minimal HTML code related to issue.

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

In Controller

$(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);
        });
    });
Solution

  • You can use e.date value inside the dp.change event. I have attached a small code snippet along with

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

    Please look at this and let me know if this fit your requirement.