We Keep Coding

How to disable click on month in calendar

As you can see on the image I want to disable click on December 2017 (black box). How can I do this?
My javascript function for the calendar.
$('#datepicker').datepicker({
changeYear: true,
multidate: true,
maxViewMode: 0,
startDate: today,
})

Maybe you could use changeMonth option as following :
$('#datepicker').datepicker({
changeYear: true,
changeMonth: false,
multidate: true,
maxViewMode: 0,
startDate: new Date(),
});
$('#datepicker2').datepicker({
changeYear: true,
changeMonth: true,
multidate: true,
maxViewMode: 0,
startDate: new Date(),
});
input {
width: 25%;
margin: 1%;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="datepicker" placeholder="You can't change my month !" />
<input type="text" id="datepicker2" placeholder="You can change my month !" />

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
})

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>

Datepicker and clone function from JQuery issue?

this is the part from the js, which does the cloning stuff.
$(document).on("click", ".adauga_incasare", function () {
$('.incasari:last').clone(true).insertAfter('.incasari:last');
$(".incasari:last").find(".data_incasare_container label b").remove(); //remove label
$(".incasari:last").find(".suma_incasare_container label b").remove();
$(".coscos").css("padding-top", "4px");
$(".incasari:first").find(".coscos").css("padding-top", "20px");)
};
this is the html code :
<div class="incasari first hasData">
<div class="data_incasare_container">
<label><b>Data</b>
</label>
<input class="data_incasare datepicker_incasare" name="data_incasare" type="text">
<label class="data_incasare_hidden">
<?php echo $value->date; ?></label>
</div>
<div class="suma_incasare_container">
<label><b>Suma</b>
</label>
<input class="suma_incasare" type="text" maxlength="8" name="suma_incasare">
<label class="suma_incasare_hidden">
<?php echo $value->received; ?></label>
</div>
<div class="coscos"> <a class="stergereIncasare" href="javascript:void(0);"><i class="icon-trash sterge_incasare" id = "<?php echo $value->id; ?>"></i></a>
<div style="clear:both;"></div>
<div class="incasare_action">
<input class="btn btn-success salveaza_incasare" type="button" style="margin-left:50px;width:80px;height:30px;float:left;" value="Salveaza"></input>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div> + Adauga incasare noua
and the code from the datepicker :
$('.datepicker_incasare').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
minDate: "-2Y",
maxDate: "+2Y"
});
The problem appears when I press a button, which does the cloning stuff, and after that the datepicker does not work on the input.
In the image below you can see the result:
When I save a new row and it refreshes the page, it works. But it does not work after cloning.
What should I do ? thx
for this script :
$foo = $('.incasari:last').clone(true).insertAfter('.incasari:last');
$(".incasari:last").find(".data_incasare_container label b").remove(); //remove label
$(".incasari:last").find(".suma_incasare_container label b").remove();
$(".coscos").css("padding-top", "4px");
$(".incasari:first").find(".coscos").css("padding-top", "20px");
$foo.datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
minDate: "-2Y",
maxDate: "+2Y"
});
this is the result:

you have to initialize the cloned datepicker by simpy put the call into your click handler
$(document).on("click", ".adauga_incasare", function () {
$foo = $('.incasari:last').clone(true).insertAfter('.incasari:last');
$(".incasari:last").find(".data_incasare_container label b").remove(); //remove label
$(".incasari:last").find(".suma_incasare_container label b").remove();
$(".coscos").css("padding-top", "4px");
$(".incasari:first").find(".coscos").css("padding-top", "20px");)
$foo.datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
minDate: "-2Y",
maxDate: "+2Y"
});
};

As in my comment you need to bind after insertion.
$(document).on("click", ".adauga_incasare", function () {
$foo = $('.incasari:last').clone(true).insertAfter('.incasari:last');
$(".incasari:last").find(".data_incasare_container label b").remove(); //remove label
$(".incasari:last").find(".suma_incasare_container label b").remove();
$(".coscos").css("padding-top", "4px");
$(".incasari:first").find(".coscos").css("padding-top", "20px");)
$foo.datepicker({ //really this should be just the init executed in a callback
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
minDate: "-2Y",
maxDate: "+2Y"
});
};
function initDatePicker(){
$('.datepicker_incasari').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
minDate: "-2Y",
maxDate: "+2Y"
});
}
then in your document load call initDatePicker for first initialization
$(function() {
initDatePicker();
});