CODEWITHSUNDEEP
javascripthtmlbootstrap-datetimepicker
aretai
aretai

Reputation: 1641

how to put the current date in bootstrap datetimepicker

Currently I have two input boxes one with the current date shown to the user and second one with datetimepicker to select the date and time. I want to combine the functionality of both into a single one where user is presented with the current date and has the opportunity to select date/time from the picker. The problem is that when I try to add the datetimepicker functionality the current date disappears.

Below is the code for the two input boxes and my early attempt to combine the two.

Start Date: <input type="text" class="date-time-input" name="sdate" id="sdatefield1"/><br/>
<script type="text/javascript"> 
    // window.addEventListener("load", function() {
    var now = new Date();
    var utcString = now.toISOString().substring(0,19);
    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    var day = now.getDate() - 1;
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    var localDatetime = 
    (day < 10 ? "0" + day.toString() : day) + "-" +
    (month < 10 ? "0" + month.toString() : month) + "-" +
    year + " " +
    //(day < 10 ? "0" + day.toString() : day) + "T" +
    (hour < 10 ? "0" + hour.toString() : hour) + ":" +
    (minute < 10 ? "0" + minute.toString() : minute) +
    utcString.substring(16,19);
    var datetimeField = document.getElementById("sdatefield");
    datetimeField.value = localDatetime;
//});
</script>

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

and combined:

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' 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>

<script type="text/javascript"> 
    // window.addEventListener("load", function() {
    var now = new Date();
    var utcString = now.toISOString().substring(0,19);
    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    var day = now.getDate() - 1;
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    var localDatetime = 
    (day < 10 ? "0" + day.toString() : day) + "-" +
    (month < 10 ? "0" + month.toString() : month) + "-" +
    year + " " +
    //(day < 10 ? "0" + day.toString() : day) + "T" +
    (hour < 10 ? "0" + hour.toString() : hour) + ":" +
    (minute < 10 ? "0" + minute.toString() : minute) +
    utcString.substring(16,19);
    var datetimeField = document.getElementById("sdatefield");
    datetimeField.value = localDatetime;
//});
</script>

Thanks for help

Upvotes: 1

Views: 2354

Answers (1)

TSmith
TSmith

Reputation: 111

When you initiate a datetimepicker, you can set the default date.

https://eonasdan.github.io/bootstrap-datetimepicker/#enableddisabled-dates (the js in that sections demonstrates it)

so your init would look like this: 

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

remember, you need to set the value of localDateTime before initiating initiating the datetimepicker with this method

Upvotes: 1

Related Questions