We Keep Coding

Boostrap datetimepicker not pre-filling date

I'm using Boostrap datetime picker to make reservations in fullcalendar.
I would like to pre-fill my datetime piker with the selected date and time when clicking the calendar.
With the following code I can pre-fill the time but not the date and I don't know why. I found that I should just change the format I want to display, but after doing that, the date is not being pre-filled.
select: function(inform) {
var date_from= new Date(inform.startStr);
var date_to= new Date(inform.endStr) ;
let currentDate = new Date();
if (date_from >= currentDate) {
$('#exampleModalToggle').modal('show');
console.log(' date clicked bigger than current date, you can do reservation')
$(".fc-highlight").css("background", "#ffc800", "important!");
$(function() {
$("#start_date_picker").datetimepicker({
format: 'yyyy-MM-dd',
locale: "fr",
useCurrent:false,
defaultDate: date_from,
});
$("#start_hour_picker").datetimepicker({
format: 'HH:mm',
useCurrent:false,
defaultDate: date_from,
});
$("#end_date_picker").datetimepicker({
format: 'yyyy-MM-dd',
useCurrent:false,
defaultDate: date_to,
});
$("#end_hour_picker").datetimepicker({
format: 'HH:mm',
useCurrent:false,
defaultDate: date_to,
})
});
}
},
<!--Start Date-->
<div id="start_date" class="add_reservation_subtitles pb-3" style="margin-left: 28px;">
<input id="start_date_input" data-provide="datepicker" name="start_date" type="date"
lang="fr" id="datepicker_second" class="datepicker1" style="margin-left: 28px;" required>
<input name="start_hour" type="time" lang="fr" class="timepicker modal_rigth_elements"
required>
</div>
<!--End Date-->
<div id="end_date" style="margin-left: 28px;" class="add_reservation_subtitles pb-3 ">
<input id="end_date_input" type="date" lang="fr" class="date-picker"
style="margin-left: 28px;" required>
<input name="end_hour" type="time" lang="fr" class="timepicker modal_rigth_elements"
required>
</div>
I have tried different formats, like yyyy-mm-dd, 'mm-dd-yyyy' , 'mm/dd/yyyy' and nothing is working. I don't even have error messages. So I don't know what is happening.
I'm using this datetimepicker :
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
Thansk a lot for all your help

How does JqueryUI read data on your jquery request when downloading data?

I have date picker and want my date picker to be able get below data that is available, no matter if a user select last year date. eg. 2019-12-04.
On my jquery request I can only get this year date, anyone who can help me to achieve such logic. The logic is below if perhaps I am not making a sense.
HTML:
<!---DatePicker for startDate and endDate ---->
<div class="d-flex justify-content-start">
<div class="col-xl-10.5 col-lg-10.5 col-md-10 col-sm-10.5 col-10.5">
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="from" placeholder="startdate" />
<span class="input-group-addon">To</span>
<input type="text" class="input-sm form-control" placeholder="enddate" />
</div>
</div>
</div><br/>
<br/>
<br/>
Javascript:
// date functionality
$(document).ready(function() {
$('.input-daterange').datepicker({
dateFormat: "dd-mm-yy",
autoclose: true
});
});
//checking equality for channel fields on thingspeak.
$(function() {
$("#download").click(function(e) {
e.preventDefault();
var isTemperature = $('#temperature').is(':checked');
var isButtonState = $('#button_state').is(':checked');
if (isTemperature && isButtonState) {
window.open('https://api.thingspeak.com/channels/952961/feeds.csv?api_key=FDJCRN71YJM2R0FM&start=2020-01-06T00:00+02&end=2020-01-10T23:59+02:00&timezone=Africa/Johannesburg');
} else {
if (isTemperature) {
window.open('https://api.thingspeak.com/channels/952961/fields/1.csv?api_key=FDJCRN71YJM2R0FM&timezone=Africa/Johannesburg');
} else {
if (isButtonState) {
window.open('https://api.thingspeak.com/channels/952961/fields/8.csv?api_key=FDJCRN71YJM2R0FM&start=2020-01-06T00:00+02&end=2020-01-10T23:59+02:00&timezone=Africa/Johannesburg');
}
}
}
});
});

I made some attempts and finally got it working, but doing this logic below;
// date functionality
$(document).ready(function() {
var year = (new Date).getFullYear();
$('.input-daterange').datepicker({
format: "dd-mm-yyyy",
autoclose:true,
minDate: new Date(year, 0, 1),
maxDate:new Date(year, 11, 31)
});
});

Set start date and restrict dates in datepicker

I am trying to set start date to 14 days from today. Below 14 days date will not be selectable. I also need to lock the next 13 days as not selectable.
$('#sandbox-container input').datepicker({
format: 'mm/dd/yyyy',
keyboardNavigation: false,
forceParse: false,
startDate: new Date(),
autoclose: true
})
<input type="text" name="productDate" id="productDate" class="form-control" maxlength="20" placeholder="Date" value="{{ date('m/d/Y',strtotime($productDate))}}">

var newdate = new Date();
newdate.setDate(newdate.getDate() - 14);
$('input').datepicker({
format: 'mm/dd/yyyy',
keyboardNavigation: false,
forceParse: false,
minDate: newdate,
startDate: newdate,
autoclose: true
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.5.4/datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.5.4/datepicker.min.css" rel="stylesheet"/>
<input type="text" name="productDate" id="productDate" class="form-control" maxlength="20" placeholder="Date" value="">

Bootstrap datepicker show dates only

Is it possible to show only dates in Bootstrap datepicker ?
I am showing only months and years using following methods -
$("#year").datepicker({
format: " yyyy",
viewMode: "years",
minViewMode: "years"
});
$("#month").datepicker({
format: " mm",
viewMode: "months",
minViewMode: "months",
maxViewMode: 0
});
A live demo showing only year and month selection in Year and Month field. I want to show only date from 1 to 31 without Month, Year at the top and also without day's name, at the Date field.

Yes, it is possible, but a bit complicated, you have to:
Set the format option to d (or dd)
Set maxViewMode option to 0 (minViewMode is 0 by default)
Hide prev/next month buttons and the month name button, you can do it using CSS:
the days view of the datepicker is inside a table that has .datepicker-days class
the prev and next button are inside the .datepicker-days table and they have .prev and .next classes
the month name is in the same table and it has the .datepicker-switch class
The date datepicker should show the right number of days, so you have to dinamically update defaultViewDate when year and month are selected (see changeDate event)
Since the picker has no setter method for defaultViewDate, you can destroy it and then re-init it.
Here a full working sample:
$(document).ready(function() {
var dateOpt = {
format: 'dd',
maxViewMode: 0
};
$("#year").datepicker({
format: "yyyy",
viewMode: "years",
minViewMode: "years"
}).on('changeDate', function(e) {
var month = $('#month').datepicker('getDate');
if( !month ){
month = new Date();
}
dateOpt.defaultViewDate = {
year: e.date.getFullYear(),
month: month.getMonth(),
day: 1
};
// Reset date datepicker
$('#date').datepicker('destroy');
// Re-init with defaultViewDate option
$('#date').datepicker(dateOpt);
});
$("#month").datepicker({
format: "mm",
viewMode: "months",
minViewMode: "months",
maxViewMode: 0
}).on('changeDate', function(e) {
var year = $('#year').datepicker('getDate');
if( !year ){
year = new Date();
}
dateOpt.defaultViewDate = {
year: year.getFullYear(),
month: e.date.getMonth(),
day: 1
};
$('#date').datepicker('destroy');
$('#date').datepicker(dateOpt);
});
$("#date").datepicker(dateOpt)
});
/* Hide prev/next buttons and month name*/
.datepicker-days>table>thead>tr>th.prev,
.datepicker-days>table>thead>tr>th.datepicker-switch,
.datepicker-days>table>thead>tr>th.next {
display: none;
}
/* Hide days of previous month */
td.old.day{
visibility: hidden;
}
/* Hide days of next month */
td.new.day{
display: none;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<div class="container">
<div class="form-group row">
<label class="form-control-label col-md-3" for="year">Year</label>
<div class="col-md-9">
<input type="text" id="year" class="form-control">
</div>
</div>
<div class="form-group row">
<label class="form-control-label col-md-3" for="year">Month</label>
<div class="col-md-9">
<input type="text" id="month" class="form-control">
</div>
</div>
<div class="form-group row">
<label class="form-control-label col-md-3" for="year">Date</label>
<div class="col-md-9">
<input type="text" id="date" class="form-control">
</div>
</div>
</div>

How to put a default date in bootstrap datetimepicker

I want my datetimepicker to have a default value which is the current date. How can I achieve this? I already read the documentation but can't find anything to achieve that. Can someone help me? I want the format of the default value is MM dd, yyyy.
Here's my code.
<div class="form-group">
<label for="dtp_input2">Date</label>
<div class="input-group date form_date col-md-3" data-date="" data-date-format="MM dd, yyyy">
<input id="dtp_input2" name="date" class="form-control" size="10" type="text" value="" readonly>
<span class="input-group-addon">
<span class="glyphicon glyphicon-remove"></span>
</span>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
$('.form_date').datetimepicker({
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
});

In my case :
Insert this defaultDate: new Date() code into your javascript datetimepicker.
<script type="text/javascript">
$(function () {
$('#datetimepicker10').datetimepicker({
defaultDate: new Date(),
viewMode: 'years',
format: 'MM/DD/YYYY'
});
});

Just set the value after setting up the datetimepicker:
$('.form_date').datetimepicker({
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
});
$('#dtp_input2').val(Date());

Looks like from the documentation that you can set a defaultDate when instantiating the datetimepicker.
$(function () {
$('#datetimepicker5').datetimepicker({
defaultDate: "11/1/2013",
disabledDates: [
moment("12/25/2013"),
new Date(2013, 11 - 1, 21),
"11/22/2013 00:53"
]
});
});

This solution only uses the methods provided by the bootstrap datetimepicker.
You can declare your datetimepicker as you did and then do this:
$('#datepicker input').datepicker('setDate', new Date());
$('#datepicker input').datepicker('update');
$('#datepicker input').val('');
This way the date you set in the setDate() will be selectionned and the input will remain empty.
If you don't want the input to be empty, just remove these lines:
$('#datepicker input').datepicker('update');
$('#datepicker input').val('');
And if you want to play with that solution: Here is a jsFiddle
$('#datepicker input').datepicker({
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
});
$('#datepicker input').datepicker('setDate', new Date());
$('#datepicker input').datepicker('update');
$('#datepicker input').val('');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css" rel="stylesheet"/>
<div id="datepicker">
<input type="text" type="text" class="form-control" />
</div>

You can also set current Date to a text field with JS like :
var d = new Date();
document.getElementById("target").value = d.toDateString();
<input type="text" id="target">

Simply put the following one. It works fine for me.
$('.className').datepicker('setDate', 'now');