jquery-ui-datepicker

Restrict date in jquery datepicker based on another datepicker or textbox

For example, in this sample code, startDatePicker is selected as 2010-12-12, change event of startDatePicker sets the minDate of endDatePicker 2010-12-13. It locks the cells before this date. This is a sample for what @Victor mentioned..I hope it helps…Regards…Ozlem. $(“#startDatePicker”).datepicker({ dateFormat: ‘yy-mm-dd’, changeMonth: true, minDate: new Date(), maxDate: ‘+2y’, onSelect: function(date){ var selectedDate = new … Read more

jQuery UI Datepicker onchange event issue

You can use the datepicker’s onSelect event. $(“.date”).datepicker({ onSelect: function(dateText) { console.log(“Selected date: ” + dateText + “; input’s current value: ” + this.value); } }); Live example: $(“.date”) .datepicker({ onSelect: function(dateText) { console.log(“Selected date: ” + dateText + “; input’s current value: ” + this.value); } }) .on(“change”, function() { console.log(“Got change event from … Read more

How to add/subtract dates with JavaScript?

Code: var date = new Date(‘2011′, ’01’, ’02’); alert(‘the original date is ‘ + date); var newdate = new Date(date); newdate.setDate(newdate.getDate() – 7); // minus the date var nd = new Date(newdate); alert(‘the new date is ‘ + nd); Using Datepicker: $(“#in”).datepicker({ minDate: 0, onSelect: function(dateText, inst) { var actualDate = new Date(dateText); var newDate … Read more

jQuery Date Picker – disable past dates

You must create a new date object and set it as minDate when you initialize the datepickers <label for=”from”>From</label> <input type=”text” id=”from” name=”from”/> <label for=”to”>to</label> <input type=”text” id=”to” name=”to”/> var dateToday = new Date(); var dates = $(“#from, #to”).datepicker({ defaultDate: “+1w”, changeMonth: true, numberOfMonths: 3, minDate: dateToday, onSelect: function(selectedDate) { var option = this.id == … Read more

jQuery Datepicker onchange event issue

You can use the datepicker’s onSelect event. $(“.date”).datepicker({ onSelect: function(dateText) { console.log(“Selected date: ” + dateText + “; input’s current value: ” + this.value); } }); Live example: $(“.date”) .datepicker({ onSelect: function(dateText) { console.log(“Selected date: ” + dateText + “; input’s current value: ” + this.value); } }) .on(“change”, function() { console.log(“Got change event from … Read more

jQuery UI DatePicker to show month year only

Here’s a hack (updated with entire .html file): <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”> <head> <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js”></script> <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js”></script> <link rel=”stylesheet” type=”text/css” media=”screen” href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css”> <script type=”text/javascript”> $(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)); … Read more