We Keep Coding

How to do something when date is selected from date picker

I am using this date picker http://bootstrap-datepicker.readthedocs.io/en/latest/events.html#hide.
The code is written as,
<div class="form-group" id="purchasedatediv">
<label class="col-sm-3 control-label">Purchase Date *</label>
<div class="col-sm-9">
<div class="input-group date">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input type="text" value="<?php if($result != '') echo date('m/d/Y', $result->purchasedate->sec); ?>"
name="purchasedate" id="purchasedate" class="form-control required">
</div>
</div>
</div>
$('#purchasedatediv .input-group.date').datepicker({
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true,
format: formatToApply
});
I am trying to find the event when the date is selected and do something on that event but in this document, I am not able to find that. Please help!

Please Try
$('#datepicker').datepicker().on("change", function(e) {
console.log("Date changed: ", e.target.value);
});

Since you are using bootstrap plugin for datepicker, you can check reference manual for it.
Trigger to changeDate event event like
$('#purchasedatediv .input-group.date').datepicker({
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true,
format: formatToApply
}).on('changeDate', function(e) {
//Print e variable
console.log('date changed', e);
//Do your stuff here, read date, parse it, whatever.
});
Date is stored in callback parameter e.date.

$('#purchasedatediv .input-group.date').datepicker({
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true,
format: formatToApply
}). on(picker_event, function(e){
//do your stuf
}) ;
this code will hold everything you need

Try to below code
<input type="text" value=""
name="purchasedate" id="purchasedate" class="form-control required" onChange="functionname(this)">
JS Code
function functionname(e){
your logic
}
Click Here to show demo in jsFiddle

$('#purchasedate').off('change').on('change', function(){
// enter code here
})

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="">

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');

Set mindate in bootstrap datepicker

I have 2 date picker on change of 1st date picker i need to set selected date as mindate value of the 2nd date picker . Here is my coe for that
<input type="text" size="30" class="date_picker_from form-control valid" id="start" value="" name="start" aria-invalid="false">
<input type="text" size="30" class="date_picker_to form-control valid" id="end" value="" name="end" aria-invalid="false">
$('.date_picker_from').datepicker({
setDate: new Date(),
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose:true,
startDate: '-0m',
minDate:0,
});
$('.date_picker_to').datepicker({
//setDate: new Date(),
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose:true,
startDate: '+1d',
minDate:0,
});
$("#start").change( function() {
var secondDate = new Date($("#start").datepicker( "getDate" ));
var date2 = new Date(secondDate.getTime());
date2.setDate(date2.getDate() + 1);
$("#end").datepicker("setDate", date2);
$("#end").datepicker("minDate", date2);
$('#end').datepicker( "option", "minDate", date2 );
});
Here is the jsfiddle link

This is only thing you need to do for set mindate.This is the way to set mindate using datepicker.
$("#start").change( function() {
$( ".date_picker_hotel_to" ).datepicker("option", "minDate", $("#start").val());
});

Use the onSelect callback option
$('.date_picker_hotel_from').datepicker({
setDate: new Date(),
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose: true,
startDate: '-0m',
minDate: 0,
onSelect: function(text, dt) {
$('#end').datepicker('option', 'minDate', text);
}
});
$('.date_picker_hotel_to').datepicker({
//setDate: new Date(),
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose: true,
startDate: '+1d',
minDate: 0,
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet" />
<input type="text" size="30" class="date_picker_hotel_from form-control valid" id="start" value="" name="start" aria-invalid="false">
<input type="text" size="30" class="date_picker_hotel_to form-control valid" id="end" value="" name="end" aria-invalid="false">

$(function () {
$("#start").change(() => {
let secondDate = $("#start").datepicker("getDate");
secondDate.setDate(secondDate.getDate() + 1);
$("#end").datepicker("setStartDate", secondDate);
$("#end").datepicker('setDate', fromDate);
});
});

<html>
<input asp-for="StartDate" class="form-control datepicker" type="text" autocomplete="off" />
<input asp-for="EndDate" class="form-control datepicker" asp-format="{0:dd.MM.yyyy}" type="text" autocomplete="off" />
<script>
$('#StartDate').datepicker({
keyboardNavigation: false,
autoclose: true,
changeMonth: true,
changeYear: true,
format: "dd.mm.yyyy",
language: "tr",
startDate: new Date('2021,1,1'),
});
$('#EndDate').datepicker({
keyboardNavigation: false,
autoclose: true,
changeMonth: true,
changeYear: true,
format: "dd.mm.yyyy",
language: "tr",
});
$("#StartDate").on("change", function (e) {
var secondDate = $("#StartDate").datepicker("getDate");
secondDate.setDate(secondDate.getDate() + 1);
$("#EndDate").datepicker("setStartDate", secondDate);
});
</script>
</html>

How to disable future months from current months in bootstrap datepicker

In am using a calendar in bootsrtap datepicker, in that I have displaying only month and year (mm-yyy). I want to disable future months from current month. I have searched a lot but I didn't find an answer. Please help me, I have attached my code below
JS :
$(document).ready(function () {
var cou = $('#rolecount').val();
var c;
for (c = 0; c <=cou; c++){
$('#datepicker'+c).datepicker({
format: 'mm-yyyy',
endDate: '+0d',
viewMode: "months",
minViewMode: "months",
});
$('#datepicker'+c).datepicker().on('monthSelected', function(ev){
$(this).datepicker('hide');
});
}
});
HTML:
<div class="input-group date">
<input type="text" id="datepicker<?=$j?>" required name="joindate<?=$j?>" class="date_picker form-control" placeholder="show datepicker" maxlength="100" autocomplete="off"><span class="input-group-addon" id="basic-addon2"><i class="fa fa-calendar"></i></span>
<input type="hidden" name="roleid<?=$j?>" value="<?=$str[$j]?>" />
</div>

You need to redefine your endDate option value:
$('.input-daterange').datepicker({
format: 'mm-yyyy',
// You used '+0d' that is for days instead of '+0m' that is for months.
endDate: '+0m',
viewMode: "months",
minViewMode: "months"
})