Get next datepicker and set the minimum date value
I have a series of date pickers with a class assigned to each. What I'm trying to achieve is to detect (using) the date pickers onSelect() handler the next date picker and set the minimum date to the selected date plus one day.
I've tried using $(this).next('.publication_date); but this doesn't seem to return anything.
In fact, there could be a series of date pickers after the selected one so I'd need to set each of these individually.
Markup: -
$(".publication_date").livequery(function() {
$(this).datepicker({
dateFormat: "dd M yy",
changeYear: true,
changeMonth: true,
altFormat: 'yy-mm-dd',
altField: $(this).next(),
onSelect: function(dateText, inst) {
console.log($(this).next('.publication_date'));
}
});
});
Example Html: -
<div id="tierRight">
<div id="tier1" class="tier">
<p class="title">Tier 1</p>
<label class="publication_date_label" for="publication_date_1">Publication Date: </label>
<input type="text" value="" readonly="readonly" name="tier[1][publication_date]" id="publication_date_1" size="10" maxlength="10" class="publication_date hasDatepicker">
<input type="hidden" class="publication_date_db" value="2010-11-24" name="tier[1][publication_date_db]" id="publication_date_db_1">
<img class="date_clear" src="delete_grey.gif" onclick="$(this).siblings('input').val('');">
</div>
<div id="tier2" class="tier">
<p class="title">Tier 2 <a class="removeTier" title="" href="#">Remove</a></p>
<label class="publication_date_label" for="tier[2][publication_date]">Publication Date: </label>
<input type="text" value="" readonly="readonly" name="tier[2][publication_date]" id="publication_date_2" size="10" maxlength="10" class="publication_date hasDatepicker">
<input type="hidden" class="publication_date_db" name="tier[2][publication_date_db]" id="publication_date_db_2" value="">
<img src="delete_grey.gif" );="" ).val(="" input="" onclick="$(this).siblings(" class="date_clear">
</div>
<div id="tier3" class="tier">
<p class="title">Tier 3 <a class="removeTier" title="" href="#">Remove</a></p>
<label class="publication_date_label" for="tier[3][publication_date]">Publication Date: </label>
<input type="text" value="" readonly="readonly" name="tier[3][publication_date]" id="publication_date_3" size="10" maxlength="10" class="publication_date hasDatepicker">
<input type="hidden" class="publication_date_db" name="tier[3][publication_date_db]" id="publication_date_db_3" value="">
<img src="/delete_grey.gif" );="" ).val(="" input="" onclick="$(this).siblings(" class="date_clear">
</div>
</div>
Trying to use the code below but the styles go all weird for some reason:
$('#start_date_datepicker').datepicker({
dateFormat: "dd M yy",
开发者_开发百科 altField: '#start_date_datepicker_altfield',
altFormat: 'yy-mm-dd',
changeYear: true,
changeMonth: true,
minDate: new Date(),
onSelect: function(dateText, inst) {
$('.publication_date').each(function(){
var current_tier = $(this).closest('.tier');
//Do all your stuff here
console.log(current_tier);
$(current_tier).datepicker({
minDate: new Date()
});
});
}
});
In this case you need to go up to the parent .tier
using .closest()
then, to the .next()
sibling, then .find()
the .publication_date
control inside, like this:
$(".publication_date").livequery(function() {
$(this).datepicker({
dateFormat: "dd M yy",
changeYear: true,
changeMonth: true,
altFormat: 'yy-mm-dd',
altField: $(this).next(),
onSelect: function(dateText, inst) {
console.log($(this).closest(".tier").next().find('.publication_date'));
}
});
});
Check out your HTML though, there are numerous errors in there, random JavaScript fragments will give you issues.
$('.publication_date').each(function(){
var current_tier = $(this).closest('.tier');
//Do all your stuff here
});
精彩评论