CODEWITHSUNDEEP
jquerydatepicker
user275074
user275074

Reputation:

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()
                        });
                    });
                }
            });

Upvotes: 0

Views: 1492

Answers (2)

Robin Maben
Robin Maben

Reputation: 23094

$('.publication_date').each(function(){

      var current_tier = $(this).closest('.tier');

      //Do all your stuff here

});

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630607

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.

Upvotes: 0

Related Questions