Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML5

Custom Prompt with DatePicker directive in AngularJS

5.00/5 (2 votes)
4 Apr 2015CPOL 16.8K  
Integration of datepicker as directive in custom prompt in AngularJS

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

HTML
<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>
JavaScript
//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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)