We Keep Coding

Get no of days in selected month in jQuery UI datepicker

I'm using JqueryUI datepicker. I want to calculate no of days on selected month & display in textbox.
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
.ui-datepicker-calendar {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
<input name="noofdays" id="noofdays" />

The onChangeMonthYear callback is used when a month or year is changed in the datepicker. For reference
Also, include the Jquery UI after including the Jquery.
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst){
var year = inst.selectedYear, month = inst.selectedMonth+1;
$(this).datepicker('setDate', new Date(year, month, 0));
$("#noofdays").val(new Date(year, month, 0).getDate())
},
onChangeMonthYear:function(year, month, date){
$("#noofdays").val(new Date(year, month,0).getDate());
}
});
.ui-datepicker-calendar {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
<input name="noofdays" id="noofdays" />

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

bootstrap-datepicker update value doesn't work

I'm trying to update the value of a datepicker for bootstrap when clicking a div, however it just does nothing (no errors). The datepicker itself works perfectly fine. Here's the javascript with the options:
$('#datepicker').datetimepicker({
format: 'DD-MM-YYYY',
pickTime: false,
defaultDate: moment(),
minDate: moment(),
maxDate: moment().add(10,'y'),
showClose: true,
autoclose: true,
keepOpen: false,
});
The javascript I am trying to change the date with:
$('.someDiv').click(function() {
$("#datepicker").datetimepicker('setDate', '2016-03-05');
});
And finally the HTML:
<div class='input-group date' id='datepicker'>
<input type='text' class="form-control" id="date"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Docs can be found under following link, however the provided method doesn't work: https://bootstrap-datepicker.readthedocs.org/en/latest/

$(function () {
$('#datepicker').datetimepicker({
pickTime: false,
format: 'DD-MM-YYYY',
pickTime: false,
defaultDate: moment(),
minDate: moment(),
maxDate: moment().add(10,'y'),
showClose: true,
autoclose: true,
keepOpen: false
});
$('.date-setter').click(function() {
alert('jj');
$('#datepicker').data("DateTimePicker").setDate('03-05-2016');
});
});

Answer to the current version
$('#deadline_picker').data("DateTimePicker").date(deadline);

Check valid datepicker

i have form search
<b><span>#Html.Raw(Generic.ToDate):&nbsp</span></b><span>#Html.DateEmpty("ToDate", (DateTime?)ViewBag.ToDate)</span>
<b><span>#Html.Raw(Generic.FromDate):&nbsp</span></b><span>#Html.DateEmpty("FromDate", (DateTime?)ViewBag.FromDate)</span>
I have code js input datepicker:
$("input[type=date]").each(function () { this.type = "input" }).datepicker();
I want check validate fromdate < todate and date > "30/9/2013". please who can help me.

Read date range
js
$(function () {
$("#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$("#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function (selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
});
});
HTML
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />