Eonasdan DateTIme Picker 不适用于 ASPX

Question

我正在使用 ASP，我尝试使用 Eonasdan 日期时间选择器，但不幸的是我没有用。我尝试更改不同的 jquery 表格 1.11.2 和 3.2.1 版本，但仍然没有用。

我也尝试重新排列每个 CDN 的位置，因为我之前经历过我需要先将这个 link 设置为另一个 link 但仍然是相同的结果，无法正常工作。

此外，即使我使用下面的代码在使用 Bootstrap 4.

以下代码位于下方。

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="index.aspx.vb" Inherits="MySystemSPX.index" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head runat="server">
        <title></title>

        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <!--Bootstrap 3.3.7-->
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <!--DataTable-->
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">

        <!--Date Timepicker-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">

        <!--Bootstrap-Select-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
        <!--SweetAlert-->
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.min.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.min.js"></script>
        <!--Font-awesome 4.7.0-->
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <!--Custom-->
        <link rel="stylesheet" type="text/css" href="custom.css">
    </head>

    <body>
        <form id="form1" runat="server">
            <nav class="navbar navbar-default" id="navigation"></nav>
            <div class="container-fluid" id="main">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0);" onclick="window.location=''">Home</a></li>
                    <li class="breadcrumb-item"><a href="javascript:void(0);" onclick="window.location=''">In-Charge</a></li>
                    <li class="breadcrumb-item active">Job Schedule Status</li>
                </ol>
                <h1>Job Schedules Status</h1>
                <hr>
                <button type="button" class="btn btn-primary addjobstatus"><i class="fa fa-plus" ></i> Add Job Status</button>
                <table id="tb_jobsched" class="display nowrap table table-bordered" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th rowspan="2">#</th>
                            <th rowspan="2">Machine Name</th>
                            <th rowspan="2">Quantity Finished</th>
                            <th rowspan="2">Quantity Reject</th>
                            <th rowspan="2">Set To Finished</th>
                            <th colspan="2">Set Date Time </th>
                            <th rowspan="2">Keyin Label Info</th>
                            <th colspan="2">Machine Counter</th>
                            <th rowspan="2">Remarks</th>
                            <th rowspan="2"></th>
                        </tr>
                        <tr>
                            <th>Started</th>
                            <th>Finished</th>
                            <th>Started</th>
                            <th>Finished</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Mach7 Interosis</td>
                            <td>12312</td>
                            <td>1141414143</td>
                            <td><span class="label label-success">Success</span></td>
                            <td>2011/04/25</td>
                            <td>2011/04/25</td>
                            <td></td>
                            <td>12312</td>
                            <td>1141414143</td>
                            <td>adafsafsafsafas</td>
                            <td>
                                <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                                    <button type="button" class="btn btn-primary updatejobstatus">Update</button>
                                    <button type="button" class="btn btn-primary">Delete</button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Mach9 Fambu</td>
                            <td>12312</td>
                            <td>1141414143</td>
                            <td><span class="label label-success">Success</span></td>
                            <td>2011/04/25</td>
                            <td>2011/04/25</td>
                            <td></td>
                            <td>12312</td>
                            <td>1141414143</td>
                            <td>adafsafsafsafas</td>
                            <td>
                                <a></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <hr>
                <footer id="footer"></footer>
            </div>

            <!-- Modal -->
            <div class="modal fade" id="setjobstatus" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="machinename">Machine Name</label>
                                        <!--Use Select2 For All of The Select-->
                                        <select class="selectpicker" data-live-search="true" data-width="100%" class="form-control" id="machinename">
                                            <option data-tokens="Machine Name 1" value="Machine Name 1">Machine Name 1</option>
                                            <option data-tokens="Machine Name 2" value="Machine Name 2">Machine Name 2</option>
                                            <option data-tokens="Machine Name 3" value="Machine Name 3">Machine Name 3</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="settofinished">Set To Finished</label>
                                        <select class="selectpicker" data-live-search="true" data-width="100%" id="settofinished">
                                            <option data-tokens="Status 1" value="Status 1">Status 1</option>
                                            <option data-tokens="Status 2" value="Status 2">Status 2</option>
                                            <option data-tokens="Status 3" value="Status 3">Status 3</option>
                                        </select>
                                    </div>
                                </div>
                                <!--Use Bootstrap TouchSpin Not Use For Now Coz Not Codes Caompatible For Bootstrap 4 | http://www.virtuosoft.eu/code/bootstrap-touchspin/# -->
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="qtyfinished">Quantity Finished</label>
                                        <input type="number" class="form-control" id="qtyfinished" placeholder="Quantity Finished">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="qtyreject">Reject Finished</label>
                                        <input type="number" class="form-control" id="qtyreject" placeholder="Reject Finished">
                                    </div>
                                </div>
                                <!--Use Eonasdan Link Picker -->
                                <div class="col-lg-6">
                                    <label for="datestarted">Date Started</label>
                                    <div class="form-group">
                                        <div class='input-group date' id='datestarted'>
                                            <input type='text' class="form-control" placeholder="Date Started" />
                                            <span class="input-group-addon">
                              <span class="glyphicon glyphicon-time"></span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <label for="dateended">Date Finished</label>
                                    <div class="form-group">
                                        <div class='input-group date' id='dateended'>
                                            <input type='text' class="form-control" placeholder="Date Finished" />
                                            <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-time"></span>
                                            </span>
                                        </div>
                                    </div>
                                    <script type="text/javascript">
                                        $(function () {
                                            $('#dateended').datetimepicker();
                                        });
                                    </script>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="keyinlabelinfo">KeyIn Label Info</label>
                                        <input type="number" class="form-control" id="keyinlabelinfo" placeholder="KeyIn Label Info">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="mach_countstart">Machine Counter Start</label>
                                        <input type="number" class="form-control" id="mach_countstart" placeholder="Machine Counter Start">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="mach_countfinished">Machine Counter Finished</label>
                                        <input type="number" class="form-control" id="mach_countfinished" placeholder="Machine Counter Finished">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="remarks">Remarks</label>
                                        <textarea class="form-control" id="remarks" placeholder="Remarks" rows="2"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            <button type="button" id="savestatus" class="btn btn-primary" data-dismiss="modal" onclick="savestatus()">Save</button>
                            <button type="button" id="updatestatus" class="btn btn-primary" data-dismiss="modal" onclick="updatestatus()">Save Changes</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="col-sm-6" style="height:130px;">
                    <div class="form-group">
                        <div class='input-group date' id='datetimepicker10'>
                            <input type='text' class="form-control" />
                            <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar">
                    </span>
                            </span>
                        </div>
                    </div>
                </div>
                <script type="text/javascript">
                    $(function () {
                        $('#datetimepicker10').datetimepicker({
                            viewMode: 'years',
                            format: 'MM/YYYY'
                        });
                    });
                </script>
            </div>
        </form>
    </body>

    </html>
    <script type="text/javascript">
                    $(document).ready(function () {
                        $("#navigation").load("navigation.html");
                        $("#footer").load("../footer.html");

                        $('.CommonReports').on('click', function () {
                            $('#commonreports').addClass('reveal');
                            $('.overlay').show();
                            document.body.style.overflow = 'hidden';
                        });

                        $('#tb_jobsched').DataTable({
                            responsive: true
                        });
                    });

                    $(function () {
                        $('.updatejobstatus').click(function (e) {
                            e.preventDefault();
                            var mymodal = $('#setjobstatus');
                            mymodal.find('.modal-title').text('Update Job Status');
                            mymodal.modal('show');
                            $('#savestatus').hide();
                            $('#updatestatus').show();
                        });
                    });

                    $(function () {
                        $('.addjobstatus').click(function (e) {
                            e.preventDefault();
                            var mymodal = $('#setjobstatus');
                            mymodal.find('.modal-title').text('Add Job Status');
                            mymodal.modal('show');
                            $('#savestatus').show();
                            $('#updatestatus').hide();
                        });
                    });

                    function savestatus() {
                        swal(
                            'Good job!',
                            'You job status has been save successfully!',
                            'success'
                        )
                    }

                    function updatestatus() {
                        swal({
                            title: 'Are you sure?',
                            text: "You won't be able to revert this!",
                            type: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'Yes, save it!'
                        }).then(function () {
                            swal(
                                'Deleted!',
                                'Your file has been deleted.',
                                'success'
                            )
                        })
                    }
    </script>

Answer 1

第一期：jQueryV3.2.1 与您的代码不兼容。您需要使用以前的版本：

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

第二个问题：updatestatus 是一个全局变量，因此您需要将它与您的内联函数区分开来。例如，我建议您使用 updatestatusCall，因此内联代码将是：

....onclick="updatestatusCall()"....

同样适用于保存状态功能。

对于 updatejobstatus 您需要将其委托给文档：

$(document).on('click', '.updatejobstatus', function (e) {

最后一点：避免内联代码，将所有 dom 个现成的函数放在一起，而不是有更多 dom 个现成的调用。

运行片段：

$(document).ready(function () {

    $('#dateended').datetimepicker();
    
    $('#datetimepicker10').datetimepicker({
        viewMode: 'years',
        format: 'MM/YYYY'
    });

    $("#navigation").load("navigation.html");
    $("#footer").load("../footer.html");

    $('.CommonReports').on('click', function () {
        $('#commonreports').addClass('reveal');
        $('.overlay').show();
        document.body.style.overflow = 'hidden';
    });

    $('#tb_jobsched').DataTable({
        responsive: true
    });
    $(document).on('click', '.updatejobstatus', function (e) {
        e.preventDefault();
        var mymodal = $('#setjobstatus');
        mymodal.find('.modal-title').text('Update Job Status');
        mymodal.modal('show');
        $('#savestatus').hide();
        $('#updatestatus').show();
    });
    $('.addjobstatus').click(function (e) {
        e.preventDefault();
        var mymodal = $('#setjobstatus');
        mymodal.find('.modal-title').text('Add Job Status');
        mymodal.modal('show');
        $('#savestatus').show();
        $('#updatestatus').hide();
    });
});


function savestatusCall() {
    swal(
            'Good job!',
            'You job status has been save successfully!',
            'success'
    )
}

function updatestatusCall() {
    swal({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, save it!'
    }).then(function () {
        swal(
                'Deleted!',
                'Your file has been deleted.',
                'success'
        )
    })
}

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<!--Bootstrap 3.3.7-->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--DataTable-->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">

<!--Date Timepicker-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">

<!--Bootstrap-Select-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<!--SweetAlert-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.min.js"></script>
<!--Font-awesome 4.7.0-->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Custom-->
<link rel="stylesheet" type="text/css" href="custom.css">


<form id="form1" runat="server">
    <nav class="navbar navbar-default" id="navigation"></nav>
    <div class="container-fluid" id="main">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);" onclick="window.location=''">Home</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0);" onclick="window.location=''">In-Charge</a></li>
            <li class="breadcrumb-item active">Job Schedule Status</li>
        </ol>
        <h1>Job Schedules Status</h1>
        <hr>
        <button type="button" class="btn btn-primary addjobstatus"><i class="fa fa-plus" ></i> Add Job Status</button>
        <table id="tb_jobsched" class="display nowrap table table-bordered" width="100%" cellspacing="0">
            <thead>
            <tr>
                <th rowspan="2">#</th>
                <th rowspan="2">Machine Name</th>
                <th rowspan="2">Quantity Finished</th>
                <th rowspan="2">Quantity Reject</th>
                <th rowspan="2">Set To Finished</th>
                <th colspan="2">Set Date Time </th>
                <th rowspan="2">Keyin Label Info</th>
                <th colspan="2">Machine Counter</th>
                <th rowspan="2">Remarks</th>
                <th rowspan="2"></th>
            </tr>
            <tr>
                <th>Started</th>
                <th>Finished</th>
                <th>Started</th>
                <th>Finished</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>Mach7 Interosis</td>
                <td>12312</td>
                <td>1141414143</td>
                <td><span class="label label-success">Success</span></td>
                <td>2011/04/25</td>
                <td>2011/04/25</td>
                <td></td>
                <td>12312</td>
                <td>1141414143</td>
                <td>adafsafsafsafas</td>
                <td>
                    <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                        <button type="button" class="btn btn-primary updatejobstatus">Update</button>
                        <button type="button" class="btn btn-primary">Delete</button>
                    </div>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>Mach9 Fambu</td>
                <td>12312</td>
                <td>1141414143</td>
                <td><span class="label label-success">Success</span></td>
                <td>2011/04/25</td>
                <td>2011/04/25</td>
                <td></td>
                <td>12312</td>
                <td>1141414143</td>
                <td>adafsafsafsafas</td>
                <td>
                    <a></a>
                </td>
            </tr>
            </tbody>
        </table>
        <hr>
        <footer id="footer"></footer>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="setjobstatus" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="machinename">Machine Name</label>
                                <!--Use Select2 For All of The Select-->
                                <select class="selectpicker" data-live-search="true" data-width="100%" class="form-control" id="machinename">
                                    <option data-tokens="Machine Name 1" value="Machine Name 1">Machine Name 1</option>
                                    <option data-tokens="Machine Name 2" value="Machine Name 2">Machine Name 2</option>
                                    <option data-tokens="Machine Name 3" value="Machine Name 3">Machine Name 3</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="settofinished">Set To Finished</label>
                                <select class="selectpicker" data-live-search="true" data-width="100%" id="settofinished">
                                    <option data-tokens="Status 1" value="Status 1">Status 1</option>
                                    <option data-tokens="Status 2" value="Status 2">Status 2</option>
                                    <option data-tokens="Status 3" value="Status 3">Status 3</option>
                                </select>
                            </div>
                        </div>
                        <!--Use Bootstrap TouchSpin Not Use For Now Coz Not Codes Caompatible For Bootstrap 4 | http://www.virtuosoft.eu/code/bootstrap-touchspin/# -->
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="qtyfinished">Quantity Finished</label>
                                <input type="number" class="form-control" id="qtyfinished" placeholder="Quantity Finished">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="qtyreject">Reject Finished</label>
                                <input type="number" class="form-control" id="qtyreject" placeholder="Reject Finished">
                            </div>
                        </div>
                        <!--Use Eonasdan Link Picker -->
                        <div class="col-lg-6">
                            <label for="datestarted">Date Started</label>
                            <div class="form-group">
                                <div class='input-group date' id='datestarted'>
                                    <input type='text' class="form-control" placeholder="Date Started" />
                                            <span class="input-group-addon">
                              <span class="glyphicon glyphicon-time"></span>
                                            </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <label for="dateended">Date Finished</label>1111
                            <div class="form-group">
                                <div class='input-group date' id='dateended'>
                                    <input type='text' class="form-control" placeholder="Date Finished" />
                                            <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-time"></span>
                                            </span>
                                </div>
                            </div>
                            <script type="text/javascript">
                                $(function () {

                                });
                            </script>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="keyinlabelinfo">KeyIn Label Info</label>
                                <input type="number" class="form-control" id="keyinlabelinfo" placeholder="KeyIn Label Info">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="mach_countstart">Machine Counter Start</label>
                                <input type="number" class="form-control" id="mach_countstart" placeholder="Machine Counter Start">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="mach_countfinished">Machine Counter Finished</label>
                                <input type="number" class="form-control" id="mach_countfinished" placeholder="Machine Counter Finished">
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="remarks">Remarks</label>
                                <textarea class="form-control" id="remarks" placeholder="Remarks" rows="2"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" id="savestatus" class="btn btn-primary" data-dismiss="modal" onclick="savestatusCall()">Save</button>
                    <button type="button" id="updatestatus" class="btn btn-primary" data-dismiss="modal" onclick="updatestatusCall()">Save Changes</button>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="col-sm-6" style="height:130px;">
            <div class="form-group">
                <div class='input-group date' id='datetimepicker10'>
                    <input type='text' class="form-control" />
                            <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar">
                    </span>
                            </span>
                </div>
            </div>
        </div>
    </div>
</form>

Eonasdan DateTIme Picker 不适用于 ASPX

Eonasdan DateTIme Picker Not working With ASPX

jquery

html

asp.net

twitter-bootstrap-3

eonasdan-datetimepicker