2012-03-12 63 views
1

我有一個文本框顯示今天的日期和一個日曆圖標,點擊時打開一個日期選擇與今天的日期選擇。我希望日期選擇器在將來的日期,即2012年3月12日點擊日曆圖標時打開。jquery datepicker,我如何設置未來的日期

我可以看到在我的JSON響應未來一段時間內的螢火 -

[{"date":"01/05/2012","available":true},{"date":"05/05/2012","available":true}] 

但我怎麼能刷新/重繪日曆顯示這些日期被點擊日曆圖標時。

這裏是我的日期選擇器

// Load the Datepicker options  
$(document).ready(function(){   
    $('#<%= ViewData.Model.name %>_DatePickerCalendar_<%= ViewData.Model.sector  %>').datepicker({ 
     changeYear: true, 
     changeMonth: true, 
     clearText: '', 
     closeText: '', 
     currentText: '', 
     prevText: '«', 
     nextText: '»', 
     dateFormat: 'dd/mm/yy',   
     firstDay: 1, 
     numberOfMonths: 2, 
     minDate: 0, 
     <% if(Model.name == "Flight") { %> 
      maxDate: '+16m', 
     <% } else { %> 
      maxDate: new Date(<%=Model.maxDate.Year %>, <%=Model.maxDate.Month %> - 1,  <%=Model.maxDate.Day %>), 
     <% } %> 
     mandatory: true, 
     showOn: 'both', 
     buttonImage: '/images/icons/ico-calendar.gif', 
     buttonImageOnly: true, 
     buttonText: 'view calendar', 
     changeFirstDay: false,    

      var date = new Date(); 
      if (sDate.value != "") 
       date = $.datepicker.parseDate('dd/mm/yy', sDate.value); 
      cbBeforeShow(date, '<%= ViewData.Model.name %>', '<%= ViewData.Model.sector %>', '<%= ConfigurationSettings.AppSettings["FutureAvailabilityYears"]%>');        
     }, 
     beforeShowDay: cbCheckDayAvailable,    
     onChangeMonthYear: function(year, month, inst) { 
      <%--/* 
       When displaying multiple months with a set maxDate setting, and you select the last month 
       datepicker shows the max month last, this causes GetAvailability to not query the correct months 
       changing the selected month to the previous means the correct availability is retrieved 
      */--%> 
      if (typeof inst.settings.maxDate === "object" && 
       month == (inst.settings.maxDate.getMonth() + 1) && 
       year == inst.settings.maxDate.getYear()) { 
       month--; 
      } 
      cbChangeMonthYear(year, month, '<%= ViewData.Model.name %>', '<%= ViewData.Model.sector %>', '<%= ConfigurationSettings.AppSettings["FutureAvailabilityYears"]%>') 
     },       
    <% } else { %> 

     beforeShowDay: function(sDate) { 
      cbCheckGreaterThanDateOut('<%= ViewData.Model.name %>'); 
     }, 
     beforeShowDay: function() { 
      return [true, _gDatePickerCalendar.availDayClass ] 
     },    
     onChangeMonthYear: null, 

    <% } %> 

     onClose: function(sDate) { 
      cbOnClose('<%= ViewData.Model.name %>', '<%= ViewData.Model.name %>', '<%= ViewData.Model.sector %>'); 
     },    
     onSelect: function(sDate) {     
      cbOnSelect(sDate, '<%= ViewData.Model.name %>', <%= ViewData.Model.sector %>);     
     }, 
     defaultDate: new Date('15 October 2012')  
    });  
}); 

那個叫上日期選擇器 「beforeShow」 是JavaScript -

function cbBeforeShow(dDate, model, sector, futureAvailabilityMonths) {   

    _gDatePickerCalendar.GetAvailability(dDate, null, null, sector); 
    setTimeout('$("#ui-datepicker-div")', 800); 
    //checkForEmptyAvailabilityForMonth(dDate, null, null, model, sector, futureAvailabilityMonths);    
    $('#ui-datepicker-div').show();   
} 

這是在GetAvailability方法Ajax調用

$.ajax({ 
     url: _gDatePickerCalendar.availUrl, 
     dataType: "json", 
     async: false, 
     success: function(data) { 
      $.each(data, function(i, item) { 
       if (item.date != "") { 

        var date = new Date(item.date.substring(6, 10), item.date.substring(3, 5) - 1, item.date.substring(0, 2)); 
        _gDatePickerCalendar.availDays[i] = date; 
       } 
      }); 
     }, 
     complete: function() { 
      var dd = new Date(); 
      alert("Just about to get a date from the array"); 
      dd = _gDatePickerCalendar.availDays[0]; 
      alert(dd);         
     } 
    }); 

對不起,粘貼這麼多的代碼,但是我在我無計可施:(

+0

我有現在的日期 - 的document.getElementById(「??????」)值=日期。如何在此代碼中設置值屬性,因爲id屬性是動態生成的。 _ DatePickerCalendar _ <%= ViewData.Model.sector%>」name =「<%= ViewData.Model.name%> _DatePickerCalendar _ <%= ViewData.Model.sector%>「value =」??????「onclick =」「/>非常感謝 – user548489 2012-03-13 22:47:00

回答

0

你可以通過調用beforeShow事件這樣jQueryUI的日曆的setDate方法實現這一目標。

beforeShow: function(input, inst) { 
    $(this).datepicker("setDate" , new Date('01-01-2013')); 
} 

工作例如:http://jsfiddle.net/7HLn7/


更新:

這些都是不正確的

1, var date = new Date(item.date.substring(6, 10), item.date.substring(3, 5) - 1, item.date.substring(0, 2)); 這應該只是

var date = new Date(item.date); 

並請繞道,從您的服務器方法a s'yy/mm/dd'。它應該適用於美國和英國的區域設置。

2,這是什麼? setTimeout('$("#ui-datepicker-div")', 800);。的setTimeout的簽名是https://developer.mozilla.org/en/DOM/window.setTimeout

  • 變種DD =新日期();
    alert(「剛剛從陣列中獲取日期」);
    dd = _gDatePickerCalendar.availDays [0];

  • 這永遠不會確保dd是Date對象。 var in C# and JavaScript are different


    你是非常接近的,只是一些耐心:)

    +0

    嗨Naveen,感謝您的回覆。當我點擊圖標時,日曆仍然顯示12/03/2012。文本框顯示正確的日期,但日曆本身不 – user548489 2012-03-12 13:51:01

    +0

    請在您的javascript中刪除'defaultDate'之後嘗試 – naveen 2012-03-12 14:16:10

    +0

    我已刪除該行代碼,但問題仍然存在... – user548489 2012-03-12 14:30:30

    相關問題