how to get variable value from div

Question

I have the code that is getting the value in the form of get variable. The problem is that I want now to place the variable into a div (for datetimepicker). When I put it like that the variable is not passed. Any help will be appreciated. My current code below:

Working variable:

Start Date: <input type="text" class="date-time-input" name="sdate" id="sdatefield"/><br/>

Not working variable inside div:

Start Date: <div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' name="sdate" id='sdatefield'>
                    <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 () {
                $('#sdatefield').datetimepicker({
                sideBySide: true,
                format: 'DD-MM-YYYY HH:mm:ss', 
                });
            });
        </script>
    </div>
</div>

Answer 1

observed that you added id="sdatefield" to the <div id="sdatefield"> rather then <input id="sdatefield"> which is causing this issue, Because you binding datetimepicker to this input field.

Try like the below

 $(function () {
                $('#sdatefield').datetimepicker({
                sideBySide: true,
                format: 'DD-MM-YYYY HH:mm:ss', 
                });
            });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.js"> </script>

Start Date: <div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' name="sdate" >
                    <input type='text' class="form-control" id="sdatefield"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
           
        </script>
    </div>
</div>

Thanks