Custom Prompt with DatePicker directive in AngularJS



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" />
                        <h3>Are you sure?</h3>
                        <div class="inlineError" ng-show="errorMessage"> 
                           Please provide an end date. 
                        <input type="text" datepicker class="textBoxStyle datetimePicker" 
                               placeholder="Effective End Date" data-ng-model="EndDate" />
                            <button id="btnOkRemove" class="confirm" tabindex="2" 
                            <button id="btnCanceRemove" class="cancel" tabindex="2" 
    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() {
                var options = {
                    dateFormat: "mm/dd/yy",
                    onSelect: function(dateText) {

    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;

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
UI and UX contributed by
Muhammad Zain Ansari

2 thoughts on “Custom Prompt with DatePicker directive in AngularJS

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s