0

選択した週をハイライト表示する日付ピッカーがあります。これはajaxリクエストを使用しています。私はどこに問題があるのですか? 29/08/11の週を選択すると、ページが更新され、強調表示された週は強調表示されなくなりました。この上のこの時点で更新時に日付ピッカーをハイライト表示する方法

Datepicker.js

$(function() 
{ 
    var startDate; 
    var endDate; 
    var selectCurrentWeek = function() 
    { 
     window.setTimeout(function() { $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')}, 1000); 
    } 
    function check(d) { 
     if(d.length() == 2) { 
      dd = d; 
      return dd; 
     } else { 
      dd = "0" + myDateParts[0]; 
      return dd; 
     } 
    } 

    var selectedWeek;//remember which week the user selected here 

    $('.week-picker').datepicker({ 
     beforeShowDay: $.datepicker.noWeekends, 
     showOtherMonths: true, 
     selectOtherMonths: true, 
     onSelect: function(dateText, inst) { 
      var date = $(this).datepicker('getDate'); 
      startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1); 
      endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6); 
      var dateFormat = 'yy-mm-dd' 
      var newDate = $('#startDate').text($.datepicker.formatDate(dateFormat, startDate, inst.settings)); 

      var oldDate = document.getElementById('startDate'); 
      var date_textnode = oldDate.firstChild; 
      var date_text = date_textnode.data; 
      myDateParts = date_text.split("-"); 

      var dd = myDateParts[2]; 

      var mm = myDateParts[1]; 

      var yy = myDateParts[0]; 

      selectCurrentWeek(); 

      window.location.href = "/timesheet?week_commencing=" + yy + "-" + mm + "-" + dd; << 

をウィンドウが更新されると、それはURLを取得する場所です。だから私は、日付を選択すると、それは次のようhttp://0.0.0.0:3000/timesheet?week_commencing=2011-09-05

 }, 
     beforeShowDay: function(date) { 

      var cssClass = ''; 
      if(date >= startDate && date <= endDate) 
       cssClass = 'ui-datepicker-current-day'; 
      return [true, cssClass]; 
     }, 
     onChangeMonthYear: function(year, month, inst) { 
      selectCurrentWeek(); 
     } 
    }); 


    $('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); }); 
    $('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); }); 


}); 

index.html.erbのように出力する

window.onload = function getURL(){ 
    var url = document.location.href; 
    urlSplit = url.split("/timesheet"); 

    if(urlSplit[1]== "") 
    { 
     var d = getMonday(new Date()); 

     dd = zeroPad(d.getDate(),2); 
     mm = zeroPad(d.getMonth()+1,2); 
     yy = d.getFullYear(); 

     document.getElementById('startDate').innerHTML = yy + "-" + mm + "-" + dd; 
     //window.location.href = "/timesheet?week_commencing=" + yy + "-" + mm + "-" + dd; 
    } 
    else 
    { 
     week = url.split("week_commencing="); 
     //return week[1]; 
     document.getElementById('startDate').innerHTML = week[1]; 
    } 
} 

window.onload URL機能取得URL

から始まる週

ジスピード - 日付ピッカーを含む

http://jsfiddle.net/YQ2Zw/12/

更新

enter image description here

答えて

0

あなたは、日付ピッカーで選択された初期の日付を設定し、週強調するために、カレンダー上のclickイベントをシミュレートするdefaultDateを使用することができます。

var selectDate = '09/29/2011'; 

$('.week-picker').datepicker({ 
    defaultDate: selectDate 
}).click(function(event) { 
    // highlight the TR 
    $(".ui-datepicker-current-day").parent().addClass('highlight'); 

    // highlight the TD > A 
    $(".ui-datepicker-current-day:eq(0)").siblings().find('a').addClass('white'); 
}).click(); 

例:http://jsfiddle.net/william/YQ2Zw/15/


更新

Datepicker.jsがtimesheetにロードされている、あなたはさらに2本の線であることを行うことができるはずと仮定:

window.onload = function getURL(){ 
    var url = document.location.href; 
    urlSplit = url.split("/timesheet"); 

    if(urlSplit[1]== "") 
    { 
     var d = getMonday(new Date()); 

     dd = zeroPad(d.getDate(),2); 
     mm = zeroPad(d.getMonth()+1,2); 
     yy = d.getFullYear(); 

     document.getElementById('startDate').innerHTML = yy + "-" + mm + "-" + dd; 
     //window.location.href = "/timesheet?week_commencing=" + yy + "-" + mm + "-" + dd; 

     $('.week-picker').datepicker({ 
      defaultDate: mm + '/' + dd + '/' + yy 
     }).click(); 
    } 
    else 
    { 
     week = url.split("week_commencing="); 
     //return week[1]; 
     document.getElementById('startDate').innerHTML = week[1]; 
    } 
} 
+0

しかし、私はこのアウトをチェックして、それが動作します。 。私が別の週を開始すると、05/09/2011が選択され、ページがリフレッシュされると、29/09/2011に戻ります。これは、var selectDateを宣言したためです。これは部分的に私が達成しようとしていることです。 –

+0

この変数は例としてあります。あなたが 'week_commencing = ...'という質問に述べたように、クエリ文字列から日付を取得します。 –

+0

次のようにする必要があります: '$(function(){ var selectDate = 'week_commencing =" + yy + " - " + mm + " - " + dd;'; $( '。week-picker ').datepicker({ defaultDate:selectDate、 })をクリックします。(function(event){ // TR $( ".ui-datepicker-current-day" (ハイライト)); // TD> A $( "。ui-datepicker-current-day-eq(0)")兄弟()。find( 'a')addClass( 'white') ; })。クリック(); }); ' –

関連する問題