Develop Reference

jQuery UI datepicker functionality to select only year or year-month or year-month-date

I'm using jQuery UI plugin for datepicker and I need some features in it. I want users to be able to select date in following three formats:
User can select only year.
User can select year and month.
User can select year, month and date from calendar.
Last one is obviously simple that user can select any date from calendar, I can also made datepicker to display year and month like below:
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
http://jsfiddle.net/bopperben/DBpJe/
But I can't find any way to achieve all above point together in same datepicker. If this is not possible in this plugin can you suggest me any other plugin which is user friendly. Thanks!

Telerik's Kendo UI datepicker plugin you can use. It has many functionality and can be easily customized.
Also found this link, which might help you
http://www.telerik.com/forums/date-picker-setting-for-selecting-only-month-and-year

Set min/max Date of jquery Datepicker

I am having trouble understanding how to set the min/max Date of the jquery Datepicker. When I check the docs, i see that the dateformat is expected in new Date(2009, 1 - 1, 26).
What does the 1-1 mean? When I chec w3c schools for js dateformats, I cannot find this one.
So I tried
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yyyy-mm',
minDate: new Date(2001-01),
maxDate: '+15Y'
});
But that leaves me with completely random results... It starts 2006 and ends 2026.
Here is fiddle
http://jsfiddle.net/ANF2y/58/

In JavaScript month is calculated from 0 to 11. So while creating a new Date use current month - 1.
1 - 1 equates to 0. So that is a valid month (0 - January).
In your case set minDate as below.
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
minDate: new Date(2001, 0, 1),
maxDate: '+15Y',
dateFormat: 'yyyy-mm'
});
that is because the jquery date picker only shows 15 items at a time, there is no max date set so you can go as far in the future as you want. When it is set to 2001 you see 2006 in the dropdown as it is limited to 15 items. Select 2006 and then you'll see 2001 in the dropdown. Is your question can I show more items in the year dropdown list?

I'm not going to go into minDate or maxDate as that has been well covered. But in addition to that, what you are looking for is yearRange will set the number of visible items in the year dropdown of the jquery date picker.
The documentation states:
The range of years displayed in the year drop-down: either relative to today's year ("-nn:+nn"), relative to the currently selected year ("c-nn:c+nn"), absolute ("nnnn:nnnn"), or combinations of these formats ("nnnn:-nn"). Note that this option only affects what appears in the drop-down.
Reference

how to set min month at bootstrap datepicker

I have a web application which requires a month/year date to be entered.Currently i am using bootstrap datepicker to show the month of the year.
var minDate = new Date();
minDate.setMonth(minDate.getMonth()-1, 1);
$("#datepicker").datepicker( {
minDate: minDate,
format: "mm-yyyy",
viewMode: "months",
minViewMode: "months"
});
The code above allow the user to select previous month or last month.How can i restrict the user to select previous month or last month by modify the code above?
JSFiddle

You can set a selectable range, using startDate and endDate
For further info, on the available options, check the docs https://bootstrap-datepicker.readthedocs.org/en/latest/options.html

How to validate to allow only current and next date in the date picker using javascript

I have two date pickers one to select the start date and the other for end date.Now I need to validate so that the user can only select current and next date from the date picker and not the other dates.How to validate using javascript

If its about jQuery UI Datepicker, you can provide date selection range as:
$( "#datepicker" ).datepicker({ minDate: 0, maxDate: "+1D" });
In this minDate : 0 represents Today and maxDate: +1D is Tomorrow
Here is Demo for your requirement.

jQueryUI datepicker for date-range is failing to validate when date text box is cleared with keyboard

I am using jqueryUI datepicker for a date range as in this demo. This is failing to validate To as future date to From in the following case:
In FROM date choose 11/19/2011. Now go to Nov month of the 2011 in the TO datepicker, you can't pick the date before "11/19/2011". This is fine and expected behaviour
Now place your cursor in FROM date picker textbox using the mouse. Select the picked date i.e 11/19/2011 and delete i.e make the textbox empty. At this point of time 2 textboxes are empty.
Now go to 'TO' datepicker Check for NOV 2011. All the dates before 11/19/2011 are still disabled which is not required behaviour.
To solve this I made textboxes readonly but i want a better solution for this issue so that user can enter the date with keyboard as well as pick with mouse.

This is because the logic for setting minDate and maxDate is located in the select event listener (which does not get fired off when you completely remove a date from a datepicker field). You could bind to the change event instead:
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
}).bind("change", function() {
var option = this.id == "from" ? "minDate" : "maxDate",
selectedDate = this.value,
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
});
Example: http://jsfiddle.net/TMnRX/