locked
how to add set button for bootstrap datetime picker RRS feed

  • Question

  • User-1634604574 posted

    i have this date time picker i want to add set button inside popup bootstrap date time picker to set the date and time insdie text box when you click on that set button

    <head runat="server">
        <title></title>
    
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
    
    
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class='col-sm-12'>
                    <div>
                    <input type='text' class="form-control" id='datetimepicker4' />
    
                
                        </div>
                </div>
                <script type="text/javascript">
                    $('#datetimepicker4').datetimepicker({
    
                        format: 'DD/MM/YYYY HH:mm',
    
                    })
           
    
                </script>
            </div>
        </div>
                 
    </body>

    Thursday, July 23, 2020 7:55 AM

All replies

  • User-939850651 posted

    Hi zhyanadil.it,

    If you want to add buttons inside it, you could try to use icons. Please refer to this document.

    Code below:

    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#datetimepicker4").on("dp.show", function (e) {
                    $('.OK').html("Set");
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="container">
                <div class="row">
                    <div class='col-sm-3'>
                        <div>
                            <input type='text' class="form-control" id='datetimepicker4' />
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </body>
    <script type="text/javascript">
        $('#datetimepicker4').datetimepicker({
            format: 'DD/MM/YYYY HH:mm',
            showClose: true,
            icons: {
                close: 'OK'
            }
        });
    </script>

    Result:

    Best regards,

    Xudong Peng

    Thursday, July 23, 2020 11:05 AM