Post
Ask Question

Custom Prompt With DatePicker Directive in AngularJS

Introduction

Due to design constraints there is a slight possibility of something so you are advised not to use the Angular UI model to display a prompt box in your Angular web application, however the following code helps you to create a custom prompt with dataepicker intgration in it with basic validation. It's a custom prompt, you may change it to a confirmation box as needed.

Using the code

  1. <body ng-app="popup">  
  2.     <div ng-controller="popupController">  
  3.         <input type="button" value="Show Popup" ng-click="isPopupVisble()" />  
  4.         <div ng-show="showPopup">  
  5.             <div class="alertBg">  
  6.                 <div class="alertPlaceholder ">  
  7.                     <div class="alertIcon">  
  8.                         <img src="Content/infoiconlarge.jpg" />  
  9.                     </div>  
  10.                     <h3>Are you sure?</h3>  
  11.                     <div class="inlineError" ng-show="errorMessage">   
  12.                        Please provide an end date.   
  13.                     </div>  
  14.                     <input type="text" datepicker class="textBoxStyle datetimePicker"   
  15.                            placeholder="Effective End Date" data-ng-model="EndDate" />  
  16.                     <div>  
  17.                         <button id="btnOkRemove" class="confirm" tabindex="2"   
  18.                                    data-ng-click="deleteRecord()">OK</button>  
  19.                         <button id="btnCanceRemove" class="cancel" tabindex="2"   
  20.                                     data-ng-click="hidePrompt()">Cancel</button>  
  21.                     </div>  
  22.                 </div>  
  23.             </div>  
  24.         </div>  
  25.     </div>  
  26. </body> 

  1. //Module  
  2.     var sample = angular.module('popup', ['ngRoute']);  
  3.   
  4.     sample.directive("datepicker", function() {  
  5.         return {  
  6.             restrict: "A",  
  7.             require: "ngModel",  
  8.             link: function(scope, elem, attrs, ngModelCtrl) {  
  9.                 var updateModel = function(dateText) {  
  10.                     scope.$apply(function() {  
  11.                         ngModelCtrl.$setViewValue(dateText);  
  12.                     });  
  13.                 };  
  14.                 var options = {  
  15.                     dateFormat: "mm/dd/yy",  
  16.                     onSelect: function(dateText) {  
  17.                         updateModel(dateText);  
  18.                     }  
  19.                 };  
  20.                 elem.datepicker(options);  
  21.             }  
  22.         }  
  23.     });  
  24.   
  25. //Controller  
  26.     sample.controller('popupController', function ($scope) {  
  27.         $scope.showPopup = false;  
  28.         $scope.errorMessage = false;  
  29.   
  30.         $scope.isPopupVisble = function () {  
  31.             $scope.showPopup = true;  
  32.         };  
  33.         $scope.hidePrompt = function () {  
  34.             $scope.EndDate = "";  
  35.             $scope.errorMessage = false;  
  36.             $scope.showPopup = false;  
  37.         };  
  38.         $scope.deleteRecord = function() {  
  39.             var endDate = $scope.EndDate != null ? new Date($scope.EndDate) : "Invalid Date";  
  40.             if (endDate == "Invalid Date") {  
  41.                 $scope.errorMessage = true;  
  42.                 return;  
  43.             }  
  44.             $scope.hidePrompt();  
  45.         };  
  46.     }); 

Points of Interest

Basic validation has been implemented, you may extend it as needed. The value of the selected date will be available in the scope within the model name "EndDate".

The output will be as mentioned in the images below.
 
 


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


Similar Articles