All geek questions in one place

Angular Bootstrap DatePicker Directive (Eternicode Version) Does Not Remain Open

I am working on incorporating Eternicode Bootstrap Datepicker into my application. I was not sure how to connect it to my model, so I found a directive that uses it from here . Now I have a datepicker on my page, but it will not stay open when I click on the input field. Datpicker opens and closes almost instantly. If I click on the adjacent field and the tab in the datepicker field, it will remain open, as expected. I also have problems getting him to appear where I would like. When it opens, it is under some other elements and inappropriate. It should open directly below the input field. See screenshot below.

inappropriate

:

$scope.dateOptions = {
    format: 'dd/mm/yyyy',
    autoclose: false,
    clearBtn: true,
    container: '#datepicker',
    showOnFocus: true,
    startDate: new Date(),
    todayBtn: true,
    todayHighlight: true,
    weekStart: 1,
    zIndexOffset: 5000
}
$scope.newPost = {
    token: $scope.token,
    post: $scope.post,
    posts: {
        twitter: null,
        facebook: null,
        linkedin: null
    },
    attachment_url: $scope.attachment_url,
    media_url: $scope.media_url,
    services: {
        twitter: $scope.twitter,
        facebook: $scope.facebook,
        linkedin: $scope.linkedin
    },
    dateObject: today,
    timeObject: today
};

:

.directive('bDatepicker', function(){
    return {
        require: '?ngModel',
        restrict: 'A',
        link: function ($scope, element, attrs, controller) {
            var updateModel, onblur;

            if (controller != null) {

                updateModel = function (event) {
                    element.datepicker('hide');
                    element.blur();
                };

                onblur = function () {
                    //we'll update the model in the blur() handler
                    //because it possible the user put in an invalid date
                    //in the input box directly.
                    //Bootstrap datepicker will have overwritten invalid values
                    //on blur with today date so we'll stick that in the model.
                    //this assumes that the forceParse option has been left as default(true)
                    //https://github.com/eternicode/bootstrap-datepicker#forceparse
                    var date = element.val();
                    return $scope.$apply(function () {
                        return controller.$setViewValue(date);
                    });
                };

                controller.$render = function () {
                    var date = controller.$viewValue;
                    if (angular.isDefined(date) && date != null && angular.isDate(date))
                    {
                        element.datepicker().data().datepicker.date = date;
                        element.datepicker('setValue');
                        element.datepicker('update');
                    } else if (angular.isDefined(date)) {
                        throw new Error('ng-Model value must be a Date object - currently it is a ' + typeof date + ' - use ui-date-format to convert it from a string');
                    }
                    return controller.$viewValue;
                };
            }
            return attrs.$observe('bDatepicker', function (value) {
                var options;
                options = { }; //<--- insert your own defaults here!
                if (angular.isObject(value)) {
                    options = value;
                }
                if (typeof (value) === "string" && value.length > 0) {
                    options = angular.fromJson(value);
                }
                return element.datepicker(options).on('changeDate', updateModel).on('blur', onblur);
            })
        }
    }
});

, , :

<input b-datepicker="{{dateOptions}}" ng-model="newPost.dateObject" id="datepicker">

, . Uncaught Error: [$injector:modulerr], , . : https://jsfiddle.net/kxge3cqf/

social_media_posts.json:

[
    {
        id: 50,
        company_id: 94,
        employer_id: 3,
        post: "testing without attachments",
        attachment_url: null,
        twitter: true,
        facebook: false,
        linkedin: false,
        post_date: "Fri, Oct 30, 2015",
        post_time: " 2:50 PM EDT"
    },
    {
        total_count: 1
    }
]

groups.json:

{
    groups: {
        1: {
            id: 1,
            name: "Human Resources",
            created_at: "2015-10-27T16:23:07.287Z",
            updated_at: "2015-11-01T16:11:43.329Z",
            company_id: 94
        },
        2: {
            id: 2,
            name: "Marketing",
            created_at: "2015-11-01T15:32:28.988Z",
            updated_at: "2015-11-01T16:11:43.354Z",
            company_id: 94
        }
    }
}

contacts.json:

{
    contacts: {
        1: {
            id: 1,
            first_name: "Foo",
            last_name: "Bar",
            email: "foo.bar@baz.biz",
            created_at: "2015-10-27T16:24:00.832Z",
            updated_at: "2015-11-01T16:11:52.426Z",
            company_id: 94
        }
    }
}
+4
1

.

$event.stopPropagation();


angular.module('peskyDatepicker', ['ui.bootstrap'])
.controller('DatepickerDemoCtrl', ['$scope',
function ($scope) {
  
  var vm = this;
  
  vm.valuationDate = new Date();
  vm.valuationDatePickerIsOpen = false;
  vm.opens = [];
  
  $scope.$watch(function () {
       return vm.valuationDatePickerIsOpen;
   },function(value){
      vm.opens.push("valuationDatePickerIsOpen: " + value + " at: " + new Date());
   });
  
  vm.valuationDatePickerOpen = function ($event) {
    
      if ($event) {
          $event.preventDefault();
          $event.stopPropagation(); // This is the magic
      }
      this.valuationDatePickerIsOpen = true;
  };
}]);
<!DOCTYPE html>
<html ng-app="peskyDatepicker">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="DatepickerDemoCtrl as vm">
      <pre>Selected date is: <em>{{vm.valuationDate | date:'fullDate' }}</em>
      </pre>
      <div class="row">
        <div class="col-md-3">
          <p class="input-group">
            <span class="input-group-btn">
              <button type="button" class="btn btn-default" 
                      ng-click="vm.valuationDatePickerOpen()">
                <i class="glyphicon glyphicon-calendar"></i>
              </button>
            </span>
            <input type="text" class="form-control" 
                   datepicker-popup="mediumDate" 
                   is-open="vm.valuationDatePickerIsOpen" 
                   ng-click="vm.valuationDatePickerOpen()" 
                   ng-model="vm.valuationDate" />
            <span class="input-group-btn">
              <button type="button" class="btn btn-default" 
                      ng-click="vm.valuationDatePickerOpen($event)">
                <i class="glyphicon glyphicon-calendar"></i>
              </button>
            </span>
          </p>
        </div>
      </div>
      <p class="col-md-3">
        The left button <em>doesn't</em> work (opens the picker and closes right away).<br />
        The right button <em>does</em> work (opens the picker and stays open).<br />
        And it all down to <code>$event.stopPropagation();</code> - funny huh?</code>
      </p>
      <ul>
        <li ng-repeat="open in vm.opens">{{open}}</li>
      </ul>
    </div>
  </body>

</html>
Hide result

http://blog.johnnyreilly.com/2015/05/angular-ui-bootstrap-datepicker-weirdness.html

, , , .

Edit1

default type = "date",

<input type="date" ng-model="date" value="{{ date | date: 'yyyy/MM/dd' }}" />
<br />{{ date | date: 'dd/MM/yyyy' }}

Edit2

ok , , .

, - , . , ,

angular.module('ui.bootstrap.demo', ['ngAnimate']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function($scope,$filter) {
    $scope.dateOptions = {
        format: 'dd/mm/yyyy',
        autoclose: false,
        clearBtn: true,
        // container: '#datepicker',
        showOnFocus: true,
        startDate: new Date(),
        todayBtn: true,
        todayHighlight: true,
        weekStart: 1,
        zIndexOffset: 5000
    }
});

angular.module('ui.bootstrap.demo').directive('bDatepicker', function() {
    return {
        require: '?ngModel',
        restrict: 'A',
        link: function($scope, element, attrs, controller) {
            var updateModel, onblur;

            if (controller != null) {

                updateModel = function(event) {
                    console.log($scope.dateObject);
                    element.datepicker('hide');
                    element.blur();
                };

                onblur = function() {
                    //we'll update the model in the blur() handler
                    //because it possible the user put in an invalid date
                    //in the input box directly.
                    //Bootstrap datepicker will have overwritten invalid values
                    //on blur with today date so we'll stick that in the model.
                    //this assumes that the forceParse option has been left as default(true)
                    //https://github.com/eternicode/bootstrap-datepicker#forceparse
                    var date = element.val();
                    return $scope.$apply(function() {
                        return controller.$setViewValue(date);
                    });
                };

                controller.$render = function() {
                    var date = controller.$viewValue;
                    if (angular.isDefined(date) && date != null && angular.isDate(date)) {
                        // element.datepicker().data().datepicker.date = date;
                        element.datepicker('update', date);
                        element.datepicker('setValue');
                        element.datepicker('update');
                    } else if (angular.isDefined(date)) {
                        throw new Error('ng-Model value must be a Date object - currently it is a ' + typeof date + ' - use ui-date-format to convert it from a string');
                    }
                    return controller.$viewValue;
                };
            }
            return attrs.$observe('bDatepicker', function(value) {
                var options;
                options = {}; //<--- insert your own defaults here!
                if (angular.isObject(value)) {
                    options = value;
                }
                if (typeof(value) === "string" && value.length > 0) {
                    options = angular.fromJson(value);
                }
                return element.datepicker(options).on('changeDate', updateModel).on('blur', onblur);
            })
        }
    }
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
    <script src="example.js"></script>
    <!-- <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet">
</head>

<body ng-controller="DatepickerDemoCtrl">
    <input b-datepicker="{{dateOptions}}" ng-model="dateObject" id="datepicker" >
    </br>
    Date: {{dateObject}}
</body>

</html>
Hide result

git /, , . , . , .

+2

Source: https://habr.com/ru/post/1613231/

More articles:


All Articles