datetimepicker input automatically filled with current date and disable days before current date

user_17559001 0
Viewed 1114

i have a datetimepicker input, i want the input automatically filled with current date, but user still can change the date in the input.

i also want to disable the days before current date.

i've tried to use var today = new Date(); $('#datetimepicker1').value = today;, but it didn't work. When i alert the value, it still shows that the date is undefined.

i've also tried to use

var today = new Date();
$('#datetimepicker1').datepicker({
    format: 'dd/mm/yyyy',
    defaultDate: today
});

but it only show table of dates like this enter image description here

the desired output is datetimepicker automatically filled with current date and the days before current date is disabled. also, the datetimepicker input automatically updated with the selected date's value. enter image description here filled with selected date. the date table shows when the calendar icon clicked.

my html code:

<div class='input-group date' id='datetimepicker1'>
    <input type="date" class="btn isi datetime px-3 py-1" id="datetime" name="date" placeholder="3/22/2022">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar" onclick="date()"></span>
        </span>
</div>
bootstrap-datetimepicker datetimepicker input html javascript
3 Answers

try this "minDate": 0, to disable the days before current date and "setDate": new Date() automatically filled with current date.

$("#datepicker").datepicker(
{
  "minDate": 0,
   onSelect: function() { 
        var dateObject = $(this).datepicker('getDate'); 
        console.log(dateObject);
    } 
});




$("#datepicker").datepicker('setDate', new Date());


 var obj = $("#datepicker").datepicker('getDate'); 
 console.log(obj);
<!-- load jQuery and jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<!-- load jQuery UI CSS theme -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

<!-- the datepicker input -->
<input type='text' id='datepicker' placeholder='Select date' />

user_27731840

setDate with the current date in will generate a preselected date that is today, minDate 0 disables previous dates. min:current_date also works.

$('#datepicker').datepicker({
    "setDate": new Date(),
    "autoclose": true,
    "minDate": 0,
});
user_48571500 
$(function(){
$("#tgl").datepicker({
autoclose: true,
todayHighlight: true,
startDate: "dateToday",
format:'yyyy-mm-dd'
});
}):

'''

you can add atribute starDate

user_183093360
Related