Date time picker is not working in angular ui modal

Question

I have a modal which gets open by using angular ui modal

$scope.pdcPayment = function () {


    var modalInstance = $modal.open({
        templateUrl: 'pdc.html',
        windowClass: 'app-modal-window',
        backdrop: true,
        keyboard: false,
        modalFade: true,
        scope: $scope,
        controller: function ($scope, $modalInstance, $http) {
            $scope.submitMyForm = function (form) {
                if (form.bookingForm.$valid) {
                    $modalInstance.dismiss('cancel');

                }
                else {

                }
            };

            $scope.cancel = function () {
                $modalInstance.dismiss('cancel');
            };
        }
    });
};

Here is my html :

<div class="col-xs-4 form-group">
                        <label class="col-xs-12" for="pdcDatePicker">Date on Cheque: </label>
                        <div class="col-xs-12">
                            <input type="text" id="pdcDatePicker" name="pdcDatePicker" class="form-control"/>
                        </div>

Also please take a look at the method that I used to call date time picker :

<script>


    jQuery('#pdcDatePicker').datetimepicker();

For some reason the date time picker is not shwn when I click on the text box

Answer 1

Here is how I used a datepicker on ui-modal, once you have the right date-picker library it is going to be very easy.

• I used this native angular-js date-picker library
• Follow the steps listed on this page to set up this library for use, Once you set up this, the following code examples will help you show the date-time picker on a ui-modal, I do hope you have no trouble with the ui-modal itself.

Here is my html code, put this inside your pdc.html template html.

<div class="form-group col-md-6">
<label class="font-bold  small">Date on Cheque:</label>
<div class="dropdown">
    <a class="dropdown-toggle" id="dateModelId" role="button" data-toggle="dropdown" data-target="#" href="#">
        <div class="input-group dropdown">
            <input type="text" 
                   name="date"
                   class="form-control"
                   data-ng-model="dateModel">
            <span class="input-group-addon"> <i class="fa fa-calendar"></i></span>
        </div>
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <datetimepicker
                data-ng-model="dateModel"
                data-datetimepicker-config="{startView:'day', minView:'day',dropdownSelector: '#dateModelId' }">
        </datetimepicker>
    </ul>
</div>

and your angular code will not be any different as this date-picker is a native angular-js library, there is no need to write Jquery code, you can get the data by accessing $scope.dateModel.

If in case you want to know how I triggered the ui-modal from my main controller, here it is.

$scope.onShowDialog = function (ev) {
        $mdDialog.show({
            controller: 'dialogController',
            templateUrl: 'pdc.html',
            parent: angular.element(document.body),
            targetEvent: ev,
            clickOutsideToClose: false,
            hasBackdrop: false,
            escapeToClose: true,
        })
            .then(function (answer) {

            }, function () {

            });
    }

The controller can be either inline or a call to the dialog controller inside your project as shown above.

This is how you call the dialog then,

<a class="btn btn-default" type="button" ng-click="onShowDialog('$event)">
            Show Dialog</a>