datepicker在特定日期之前未被禁用

时间:2013-11-01 05:38:25

标签: javascript jquery html datepicker

我使用jquery Datepicker和当天的照片(复选框)我正在使用datepicker,这样当用户点击某张照片的某个日期时,该日期的另一张照片将被禁用(复选框)。它工作得很好但是日期只在10之后才被禁用而不是之前。为什么? 以下是我的代码:]

HTML

<div class="photos">
<div class="photooftheday">
  <input class="photo_of_the_day" type="checkbox" value="5/14" name="photoday[]">
  Photo of the Day
</div>
<input class="datepicker photoDate2" type="text" style="display:none;" name="date[]" value="">
</div>

Jquery的

<script type="text/javascript">
$('input.photo_of_the_day').live('click', function(){
  var array = [];
  var used_dates = $('input#date_photos').val(); // dates from database
  var useddates = used_dates.split(','); 
  for(var i=0; i < useddates.length; i++) {
      array.push(useddates[i]);
   }
// array  = 2013-10-30,2013-10-22,2013-10-21,2013-10-29,2013-10-28,2013-10-20,2013-10-29 when alerted
   var parents = $(this).parents('div.photos');
   $('input.datepicker:visible').each(function(){
       var val = $(this).val();
        array.push(val);
   })
    var unavailableDates = array;
   if($(this).is(':checked')){
                parents.find('input.datepicker').css('display', 'block');
                parents.find('input.datepicker').val('');
                parents.find('input.datepicker').datepicker({
                    "dateFormat":"yy-mm-dd",
                    "minDate":0,
                    "beforeShowDay": function(date){
                        dmy = date.getFullYear()+ "-" +(date.getMonth() + 1)+ "-" +date.getDate();
                        if ($.inArray(dmy, unavailableDates) == -1) {
                            return [true, ""];
                        } else {
                            return [false, "", "Unavailable"];
                        }
                    }
                });
            }else{
                parents.find('input.datepicker').css('display', 'none');
            }
        })
</script>

欢迎任何帮助或建议。谢谢

1 个答案:

答案 0 :(得分:0)

找到了解决方案。问题是日期小于10时返回值作为01,02时单击等等,而检查不可用日期值是1,2,依此类推。所以我更新了上面的jquery代码如下:

$('input.photo_of_the_day').live('click', function(){
            var array = [];
            var used_dates = $('input#date_photos').val(); // db dates
            var useddates = used_dates.split(','); 
            for(var i=0; i < useddates.length; i++) {
                array.push(useddates[i]);
            }
            var parents = $(this).parents('div.photos');
            $('input.datepicker:visible').each(function(){
                var val = $(this).val();
                array.push(val);
            })
            var unavailableDates = array;
            if($(this).is(':checked')){
                parents.find('input.datepicker').css('display', 'block');
                parents.find('input.datepicker').val('');
                parents.find('input.datepicker').datepicker({
                    "dateFormat":"yy-mm-dd",
                    "minDate":0,
                    "beforeShowDay": function(date){
                        var Date = (date.getDate() < 10) ? '0'+date.getDate() : date.getDate();  // added this
                        dmy = date.getFullYear()+ "-" +(date.getMonth() + 1)+ "-" + Date;
                        if ($.inArray(dmy, unavailableDates) == -1) {
                            return [true, ""];
                        } else {
                            return [false, "", "Unavailable"];
                        }
                    }
                });
            }else{
                parents.find('input.datepicker').css('display', 'none');
            }
        })