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
Advertisements

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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s