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>
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);
}
}
});
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.
Five+ years of demonstrated work experience in developing and implementing business technology applications, systems integration and testing solutions with in-depth domain knowledge of industries like Healthcare, Telecom, Call Center, Financial Instruments, Payroll, HR, and skills including, but not limited to, software analysis, design and development.
Comprehensive understanding of NET Framework 4.5, 4.0, 2.0 and C#, ASP.Net, ADO.Net, Entity Framework, LINQ, Web Service, WCF, AJAX Control Toolkit, Advanced JavaScript, HTML 5.0, CSS3.0, jQuery, SSIS, SSRS, XML, XSLT, JSON.
Expertise in end to end development of enterprise web application and Single Page Application (SPA) using ASP.NET MVC, ASP.NET Web Forms, ASP.NET Web API, AngularJS, TypeScript, NodeJS, SQL Server and Design Pattern fanatic.
Submit an article or tip
