[Solved] DateTimePicker display behind Bootstrap Modal Popup in AngularJS

Last Reply 29 days ago By dharmendr

Posted one month ago

Hi,

I am going to implement timepicker in popup but here it was not working properly

Implement DateTimePicker in AngularJS

I am going to implement timepicker in modal  popup after opering of modal popup need to pick releavant data and time from respective field

https://ibb.co/fH40jcM

Could you please check and help me

@{
    Layout = null;
}
<html>
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" />
    <link href="~/content/angularjs-datetime-picker.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.full.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="~/scripts/angularjs-datetime-picker.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['angularjs-datetime-picker'])
        app.controller('MyController', function ($scope, $http, $window) {
            $scope.Customers = [{
                Name: "John Hammond",
                Orders: [{ Freight: '', ShipCountry: 'France' },
                         { Freight: '', ShipCountry: 'Japan' },
                         { Freight: '', ShipCountry: 'Russia'}]
            }];
            $scope.Orders = [];
            $scope.order;
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th>Name</th>
                <th>Orders</th>
                <th></th>
            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>@*Content*@</tr>
            </tbody>
            <tfoot>
                <tr>
                    <td><input type="text" ng-model="Name" /></td>
                    <td><button type="button" ng-model="subitems" data-toggle="modal" data-target="#popup">Click</button></td>
                </tr>
            </tfoot>
        </table>
        <div class="modal fade" id="popup" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            ×</button>
                        <h4 class="modal-title">
                            Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <div class="s2vk-container">
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="panel panel-default">
                                        <table class="table table-condensed">
                                            <thead>
                                                <tr style="padding-left: 10px; padding-right: 10px;" class="active">
                                                    <th>Freight</th>
                                                    <th>ShipCountry</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr ng-repeat="subitem in Orders">
                                                </tr>
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <td><input datetime-picker date-format="yyyy-MM-dd HH:mm:ss" class="input-sm form-control" ng-model="Freight" /></td>
                                                    <td><input type="text" class="input-sm form-control" ng-model="ShipCountry" /></td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 

 

You are viewing reply posted by: dharmendr 29 days ago.
Posted 29 days ago

Hi mahesh213,

Add the following CSS.

<style type="text/css">
    .angularjs-datetime-picker
    {
        z-index: 100000 !important;
    }
</style>

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Index</title>
    <style type="text/css">
        .angularjs-datetime-picker
        {
            z-index: 100000 !important;
        }
    </style>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link href="../../Content/angularjs-datetime-picker.css" rel="stylesheet" />
    <script type="text/javascript" src="../../Scripts/angularjs-datetime-picker.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['angularjs-datetime-picker'])
        app.controller('MyController', function ($scope, $http, $window) {
            $scope.Customers = [{
                Name: "John Hammond",
                Orders: [{ Freight: '', ShipCountry: 'France' },
                         { Freight: '', ShipCountry: 'Japan' },
                         { Freight: '', ShipCountry: 'Russia'}]
            }];
            $scope.Orders = [];
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th>Name</th>
                <th>Orders</th>
                <th></th>
            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>@*Content*@</tr>
            </tbody>
            <tfoot>
                <tr>
                    <td><input type="text" ng-model="Name" /></td>
                    <td><button type="button" ng-model="subitems" data-toggle="modal" data-target="#popup">Click</button></td>
                </tr>
            </tfoot>
        </table>
        <div class="modal fade" id="popup" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            ×</button>
                        <h4 class="modal-title">
                            Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <div class="s2vk-container">
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="panel panel-default">
                                        <table class="table table-condensed">
                                            <thead>
                                                <tr style="padding-left: 10px; padding-right: 10px;" class="active">
                                                    <th>Freight</th>
                                                    <th>ShipCountry</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr ng-repeat="subitem in Orders">
                                                </tr>
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <td><input datetime-picker date-format="yyyy-MM-dd HH:mm:ss" class="input-sm form-control" ng-model="Freight" /></td>
                                                    <td><input type="text" class="input-sm form-control" ng-model="ShipCountry" /></td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Screenshot