[jQuery] jEditable - simple datepicker
Hello
I'm using the excellent jEditable plugin to edit my data in place and
am adapting the "Time Picker 2" custom input to provide a simple date
picker - i.e. select boxes for day, month, year. It works fine so far,
but I'm hoping to be able to add some additional functionality to it,
namely the ability to select a max and min year, so that it can be
used for different purposes (e.g. a date of birth field where min year
is date-70 and max year is date-16, or another kind of date, which
may require years in the future).
Here's my code so far, as used for a dob field... can anyone help me
by letting me know how to add parameters that I can pass to the type
option?
$.editable.addInputType('datepicker', {
element: function(settings, original) {
var dayselect = $('<select id="day_">');
var monthselect = $('<select id="month_">');
var yearselect = $('<select id="year_">');
for(var day=1; day <=31; day++) {
if(day < 10) {
day = '0' + day;
}
var option = $('<option>').val(day).append(day);
dayselect.append(option);
}
$(this).append(dayselect);
for(var month=1; month <= 12; month++) {
var monthname = [];
monthname[1] = "January";
monthname[2] = "February";
monthname[3] = "March";
monthname[4] = "April";
monthname[5] = "May";
monthname[6] = "June";
monthname[7] = "July";
monthname[8] = "August";
monthname[9] = "September";
monthname[10] = "October";
monthname[11] = "November";
monthname[12] = "December";
if(month < 10) {
monthnum = '0' + month;
} else {
monthnum = month;
}
var option = $('<option>').val(monthnum).append(monthname[month]);
monthselect.append(option);
}
$(this).append(monthselect);
for(var year=<?php echo date('Y')-16; ?>; year >= <?php echo
date('Y')-70; ?>; year--) {
var option = $('<option>').val(year).append(year);
yearselect.append(option);
}
$(this).append(yearselect);
var hidden = $('<input type="hidden">');
$(this).append(hidden);
return(hidden);
},
content: function(string, settings, original) {
var day = parseInt(string.substr(0,2));
var month = parseInt(string.substr(3,2));
var year = parseInt(string.substr(6,4));
$("#day_", this).children().each(function() {
if(day == $(this).val()) {
$(this).attr('selected', 'selected');
}
});
$("#month_", this).children().each(function() {
if(month == $(this).val()) {
$(this).attr('selected', 'selected');
}
});
$("#year_", this).children().each(function() {
if(year == $(this).val()) {
$(this).attr('selected', 'selected');
}
});
},
submit: function(settings, original) {
var value= $("#year_").val() + "-" + $("#month_").val() + "-" + $
("#day_").val();
$("input", this).val(value);
}
});
P.S. I'm formatting my date dd.mm.yyyy, which is why the value is
sliced up the way it is.