开发者

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">&nbsp;
        <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">&nbsp;
        <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

});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜