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.