Custom Prompt with DatePicker directive in AngularJS

Muhammad Hassan Tariq

5.00/5 (2 votes)

Apr 4, 2015

CPOL

16760

Integration of datepicker as directive in custom prompt in AngularJS

Download source code from GitHub

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 the below code helps you to achieve custom prompt with datepicker integration in it with basic validation. It's a custom prompt, you may change it to confirm box as per your requirement.

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 your requirements. Value of selected date will be available in scope within model name 'EndDate'.

Output will be as mentioned in images below:

For the complete source code, please see https://github.com/m-hassan-tariq/PromptWithDatePickerDirectiveAngularJS.