Question

我有一系列日期选择器，每个日期选择器分配一个类。我想要实现的是检测（使用）日期选择器onSelect（）处理程序下一个日期选择器，并将最小日期设置为所选日期加一天。

我尝试过使用$（this）.next（'。publication_date）;但这似乎没有任何回报。

事实上，在选定的日期选择器之后可能会有一系列日期选择器，因此我需要单独设置每个日期选择器。

标记： -

$(".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'));
  }
});
});

示例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>

尝试使用下面的代码，但由于某些原因，样式变得奇怪：

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

Answer 1

在这种情况下，您需要使用.closest()转到父.tier，然后转到.next()兄弟，然后.find()内的.publication_date控件，像这样：

$(".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'));
  }
 });
});

检查你的HTML，但是有很多错误，随机的JavaScript片段会给你带来问题。

Answer 2

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

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

      //Do all your stuff here

});

获取下一个datepicker并设置最小日期值

2 个答案: