Custom Prompt with DatePicker directive in AngularJS

Standard

Introduction

Due to design constraints there is a slight possibility, you are advised not to use Angular UI model in order to display prompt box in your angular web application, however below code help you to achieve custom prompt with dataepicker intgration in it with basic validation. its a custom prompt, you may change it to confirm box as per need.

Using the code

<body ng-app="popup">
        <div ng-controller="popupController">
            <input type="button" value="Show Popup" ng-click="isPopupVisble()" />
            <div ng-show="showPopup">
                <div class="alertBg">
                    <div class="alertPlaceholder ">
                        <div class="alertIcon">
                            <img src="Content/infoiconlarge.jpg" />
                        </div>
                        <h3>Are you sure?</h3>
                        <div class="inlineError" ng-show="errorMessage"> 
                           Please provide an end date. 
                        </div>
                        <input type="text" datepicker class="textBoxStyle datetimePicker" 
                               placeholder="Effective End Date" data-ng-model="EndDate" />
                        <div>
                            <button id="btnOkRemove" class="confirm" tabindex="2" 
                                       data-ng-click="deleteRecord()">OK</button>
                            <button id="btnCanceRemove" class="cancel" tabindex="2" 
                                        data-ng-click="hidePrompt()">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
//Module
    var sample = angular.module('popup', ['ngRoute']);

    sample.directive("datepicker", function() {
        return {
            restrict: "A",
            require: "ngModel",
            link: function(scope, elem, attrs, ngModelCtrl) {
                var updateModel = function(dateText) {
                    scope.$apply(function() {
                        ngModelCtrl.$setViewValue(dateText);
                    });
                };
                var options = {
                    dateFormat: "mm/dd/yy",
                    onSelect: function(dateText) {
                        updateModel(dateText);
                    }
                };
                elem.datepicker(options);
            }
        }
    });

//Controller
    sample.controller('popupController', function ($scope) {
        $scope.showPopup = false;
        $scope.errorMessage = false;

        $scope.isPopupVisble = function () {
            $scope.showPopup = true;
        };
        $scope.hidePrompt = function () {
            $scope.EndDate = "";
            $scope.errorMessage = false;
            $scope.showPopup = false;
        };
        $scope.deleteRecord = function() {
            var endDate = $scope.EndDate != null ? new Date($scope.EndDate) : "Invalid Date";
            if (endDate == "Invalid Date") {
                $scope.errorMessage = true;
                return;
            }
            $scope.hidePrompt();
        };
    });

Points of Interest

Basic validation has been implemented, you may extend it as per need.  Value of selected date will be available in scope within model name ‘EndDate’

For the complete source code, please see https://github.com/m-hassan-tariq/PromptWithDatePickerDirectiveAngularJS
UI and UX contributed by
Muhammad Zain Ansari
adnanansari86pk@gmail.com

2 thoughts on “Custom Prompt with DatePicker directive in AngularJS”

  1. elem.datepicker(options); I can’t understand this function. while I use above code I got below error.

    angular.min.js:107 TypeError: elem.datepicker is not a function
    at link (http://localhost/Date/app.js:20:22)
    at ea (http://localhost/Date/angular.min.js:73:293)
    at D (http://localhost/Date/angular.min.js:62:190)
    at g (http://localhost/Date/angular.min.js:55:105)
    at g (http://localhost/Date/angular.min.js:55:122)
    at g (http://localhost/Date/angular.min.js:55:122)
    at D (http://localhost/Date/angular.min.js:62:134)
    at g (http://localhost/Date/angular.min.js:55:105)
    at D (http://localhost/Date/angular.min.js:62:134)
    at g (http://localhost/Date/angular.min.js:55:105)

    Like

Leave a comment