Mantis - datetimepicker

Question

I've posted this question on Mantis forum but no one has answered to me so I've decided to ask the same question here. I've been asked for my training to make some development into the bug tracker Mantis. One of them is about preventing the user from choosing a date after the today date. If it seems simple, none of the solutions I've found have been working for me. Here is the input provided by default by Mantis :

<input tabindex="16" type="text" name="date_intervention" id="mydatetime" class="datetimepicker input-sm" data-picker-locale="fr-ca" data-picker-format="YYYY-MM-DD" size="16" data-date-end-date="0d" maxlength="20" value="2017-10-18">

This version of Mantis is using the 3.3.6 Bootstrap version. Here are the solutions I've tried without success:

Using the maxDate attribute through Javascript

$(function() {$( "#mydatetime" ).datetimepicker({ maxDate: new Date });});

Using the data-date-start-date and data-date-end-date attributes directly into my inputs

data-date-start-date="0d" data-date-end-date="0d"

Using the endDate attribute through Javascript

$(function() { $( "#mydatetime" ).datetimepicker({ endDate: +0d });});

I've found those solutions into this forum but it didn't work for me. Is there anyone who could help me please ? Thanks in advance,

Answer 1

The reason is you're using wrongly the option for eonasdan, for this you must use maxDate either with new Date() , as you were doing, or using moment (which should be included for the plugin o work)

So for your example will be this:

$("#mydatetime").datetimepicker({
  maxDate: moment().endOf('day') //This will set max day to choose today
});

And for a live example:

 $('#myDatepicker').datetimepicker({ maxDate: moment().endOf('day') }); 

 <link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/25c11d79/build/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <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.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> <br/> <!--Space for the fiddle--> <div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='myDatepicker'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> </div> 

If you don't want to pick a time just setup your preferred format without hour like:

format: 'DD/MM/YYYY'

Answer 2

Finally one of my colleague has found the solution, so I share it with you here:

var today= new Date(); 
$('#myDateTime').data("DateTimePicker").maxDate(today);

Here's the site where we found the solution: https://eonasdan.github.io/bootstrap-datetimepicker/

Thanks again William for your time.