How to create dynamic datetimepicker value?

Question

My HTML code like this:

$(function () {                
    $('#datetimepicker').datetimepicker({
        minDate: moment().startOf('minute').add(300, 'm'),
    });
    
    $("#btnSubmit").click(function() {
        value = document.getElementById('datetimepicker').value;
        console.log(value)
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>


<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <input type='text' class="form-control" id='datetimepicker' />
            </div>
        </div>
    </div>
</div>
<button id="btnSubmit">
    Submit
</button>

Demo like this : https://jsfiddle.net/oscar11/8jpmkcr5/83/

If I click submit button, I successfully get the datetime value 300 minutes from now

But if before submitting, I wait 10 minutes, the result does not match my expectations

For example now at 6 o'clock. Before submit I wait 10 minutes. After submit, the time value I get is 11.10. So I want to like it

How can I do that? How do I make the automatic datetime value increase?

Update :

Whether the time value in textfield can be automatically increased based on current time?

Decameter

you want the time to be 300 minutes from the current time it is clicked submit? and the day/monthe/year is the one picked by user, or also the current one? – Equinox

@sadlyblue, Yes, the day/month/year is also the current one – Decameter

Answer 1

Not sure why would you need it, but you can use something like:

$("#btnSubmit").click(function() {
    var targetDate = new Date(new Date().getTime() + (300 * 60 * 1000));
    $('#datetimepicker').data("DateTimePicker").date(targetDate);

   value = document.getElementById('datetimepicker').value;
   console.log(targetDate, value);
});

On click, it will change the datetimepicker to the current date + 300 minutes. I've updated the example: https://jsfiddle.net/8jpmkcr5/86/

EDIT: Based on your latest comment, i believe you want the use to be able to pick the date (day/month/year) but the time (hour/minutes) keep changing as time passes to current time + 3 hours. If thats the case you can use something like:

$(function () {                
  $('#datetimepicker').datetimepicker({
        minDate: moment().startOf('minute').add(180, 'm'),
    });
});

setInterval(function(){
    var pickedDate = $('#datetimepicker').data('DateTimePicker').date();
    var currentDate = moment();
    pickedDate = pickedDate.set({
            'hour' : currentDate.get('hour') + 3,
            'minute'  : currentDate.get('minute'), 
            'second' : currentDate.get('second')
         });
    $('#datetimepicker').data("DateTimePicker").date(pickedDate);
 },1000);

You can test here: https://jsfiddle.net/8jpmkcr5/98/

Equinox

Whether the time value in textfield can be automatically increased based on current time? – Decameter

so you don't need the datepicker? just a field that shows the current time plus 300 minutes? – Equinox

I need a datepicker too. But I want the time automatic to increase without clicking submit button – Decameter

Answer 2

You can update it every click and/or every minute

function updateTime(){
$('#datetimepicker').data("DateTimePicker").date(moment().startOf('minute').add(180, 'm'));
};

$(function () {                
  $('#datetimepicker').datetimepicker({
        minDate: moment().startOf('minute').add(180, 'm'),
    });
});


$("#btnSubmit").click(function() {
    updateTime();
  value = document.getElementById('datetimepicker').value;
  console.log(value)
  });

setInterval(function(){
   updateTime();
},60000);

check https://jsfiddle.net/8jpmkcr5/88/

Anyway the idea of the picker is to let user choose, what's the point using it and forcing some date?

Mezzorilievo

Whether the time value in textfield can be automatically increased based on current time? – Decameter

The same way as DateTimePicker. There is no strict solution to update DateTimePicker, because it has another role. You should look for some clock. – Mezzorilievo

Yeah, if so, there is probably the same way to do it with textfield also, so what's the point to use DateTimePicker a the moment? – Mezzorilievo

Answer 3

You can try a different approach and add the 300 minutes on submit like this:

$(function () {                
    $('#datetimepicker').datetimepicker({
        minDate: moment().startOf('minute').add(300, 'm'),
    });
    
    $("#btnSubmit").click(function() {
        value = document.getElementById('datetimepicker').value;
        var d1 = new Date (),
        d2 = new Date ( value );
        d2.setMinutes ( d1.getMinutes() + 300 );
        console.log(moment(d2).format("YYYY-MM-DD HH:mm:ss"));
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
  <script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                    <input type='text' class="form-control" id='datetimepicker' />
            </div>
        </div>
    </div>
</div>
<button id="btnSubmit">
Submit
</button>

Crayfish

Whether the time value in textfield can be automatically increased based on current time? – Decameter

@SuccessMan yes. you can check that by running the snippet and waiting for some time and then press submit. – Crayfish

I mean the time automatically increases without clicking submit button – Decameter

Answer 4

  var date = convertUTCDateToLocalDate(new Date(startdate));
    date = moment(date, 'DD/MM/YYYY HH:mm').format("DD/MM/YYYY HH:mm");
    date = date.toLocaleString();
    $('#datetimepicker7').data("DateTimePicker").date(date);
//Covert date to universal date
function convertUTCDateToLocalDate(date) {
    var newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);

    var offset = date.getTimezoneOffset() / 60;
    var hours = date.getHours();

    newDate.setHours(hours - offset);

    return newDate;
}

Elisabetta

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Loree