JSON을 통해 날짜를 지정된 형식으로 반환하는 방법은 무엇입니까?

Question

SO 프로파일에 접속하여 '방문한 날'을 클릭하면 사이트를 방문한 날과 함께 아름다운 녹색 음영을 표시하는 편리한 jQuery 날짜 표시기가 나타납니다. 나는 비슷한 것을 시도하고 SO의 구현을 따기 시작했습니다. 나는 그들이 사용했던 특정 JSON 형식으로 방문한 날짜를 형식화하고 반환 할 수있는 방법을 알아 냈다. 다음은 내 사본입니다 (해당 페이지의 출처를 조사하면 비슷한 것을 알 수 있습니다).

var visited = {2009 : {5 : {28 : 1,29 : 1}, 6 : {3 : 1,4 : 1,4} : 1,5 : 1,7 : 1,8 : 1,9 : 1,10 : 1,11 : 1,12 : 1,13 : 1,14 : 1,15 : 1,16 : 1,17 : 1 , 19 : 1,20 : 1,21 : 1,22 : 1,23 : 1,24 : 1,25 : 1,27 : 1,29 : 1,30 : 1}, 7 : {1 : : 1,3 : 1,4 : 1,5 : 1,6 : 1,7 : 1,8 : 1,9 : 1,10 : 1,11 : 1,12 : 1,13 : 1,14 : 1 , 15 : 1,16 : 1,18 : 1,20 : 1,21 : 1,22 : 1,23 : 1,24 : 1,26 : 1,27 : 1,28 : 1,29 : 1,30 : 1,31 : 1}, 8 : {2 : 1,3 : 1,4 : 1,5 : 1,6 : 1,7 : 1,11 : 1,12 : 1,13 : 1,17 : 1 , 20 : 1,24 : 1,25 : 1,27 : 1,28 : 1}, 9 : {9 : 1,10 : 1,15 : 1,23 : 1,24 : 1}, 10 : 1,5 : 1,7 : 1,8 : 1,9 : 1,12 : 1,13 : 1,20 : 1,21 : 1,22 : 1,27 : 1,28 : 1,30 : 1 }, 11 : {5 : 1,9 : 1,10 : 1,16 : 1,17 : 1,24 : 1,25 : 1,26 : 1,30 : 1}, 12 : {2 : 1,7 1,8 : 1,9 : 1,11 : 1,12 : 1,13 : 1,14 : 1,15 : 1,16 : 1,17 : 1,18 : 1,21 : 1,22 : 1 , 23 : 1,28 : 1,30 : 1}}, 2010 : {1 : {5 : 1,8 : 1,11 : 1,12 : 1,13 : 1,14 : 1,15 : 1,18 1,19 : 1,20 : 1,21 : 1,26 : 1,27 : 1,28 : 1}, 2 : 3 : 1,10 : 1,17 : 1,22 : 1,23 : 1 , 26 : 1}, 3 : {1 : 1,2 : 1,3 : 1,5 : 1,8 : 1}, 4 : {8 : 1,9 : 1,13 : 1,19 : 1,20 : 1,21 : 1,22 : 1,26 : 1,28 : 1,29 : 1}, 5 : {3 : 1,4 : 1,5 : 1,6 : 1 , 7 : 1,11 : 1,12 : 1,17 : 1,28 : 1}, 6 : {2 : 1,4 : 1,7 : 1,8 : 1,9 : 1,10 : 1,14 1,15 : 1,16 : 1,17 : 1,18 : 1,21 : 1,23 : 1,25 : 1}, 7 : {7 : 1,8 : 1,9 : 1,12 : 1 , 21 : 1,22 : 1,23 : 1,28 : 1,29 : 1}, 8 : {2 : 1,3 : 1,4 : 1,5 : 1,9 : 1,10 : 1,11 1,16 : 1,17 : 1,18 : 1,19 : 1,20 : 1,25 : 1,26 : 1,29 : 1,30 : 1,31 : 1}, 9 : {1 : 1 , 8 : 1}, 10 : {6 : 1,11 : 1,15 : 1,21 : 1,26 : 1,27 : 1,28 : 1}, 11 : {3 : 1,11 : 1,15 : 1,16 : 1,17 : 1,19 : 1,20 : 1,21 : 1,23 : 1,30 : 1}, 12 : {1 : 1,2 : 1 , 13 : 1,14 : 1,15 : 1,16 : 1,17 : 1,20 : 1,22 : 1,23 : 1,28 : 1}}, 2011 : {1 : {3 : 1,5 1,6 : 1,7 : 1,12 : 1,14 : 1,18 : 1,20 : 1,21 : 1,25 : 1,26 : 1,27 : 1,28 : 1,31 : 1 }, 2 : {1 : 1,2 : 1,3 : 1,6 : 1,7 : 1,8 : 1,9 : 1,10 : 1,11 : 1}}};

기본적으로 배열입니다. [year] [month] [day]. 나는 그 형식으로 데이터를 되돌려 보내지는 못했고 아무도 (아마도 SO 직원 중 한 명이) 어떤 통찰력을 가지고 있는지 궁금해하고있었습니다.

희망이 아무도 내가이 질문으로 그렇게 찢어 버리고 있다고 생각하지 않습니다. 나는 그들이 정말로 어떻게하는지 궁금해.

편집 : 분명히하기 위해 컨트롤러 동작이 일 수 있습니다.은 .NET DateTime 개체를 가지고 있고 언급 된 형식으로 JSON을 반환하고 싶은 것처럼 보입니다.

[HttpPost] 
public JsonResult GetDates(int id) 
{ 
    var model = BaseRepository.FindById(id); 
    testDates = new DateTime[] { DateTime.Today, DateTime.Today.AddDays(1) }; 
    return Json(testDates); 
} 

을 내가 함께 AJAX를 통해 그것을 호출 할 때 :

내 테스트 컨트롤러 방법은 아래와 같다

$.ajax({ 
    type: 'POST', 
    url: '<%= Url.Action("ClosedDates", "Venue", new { id = Model.Id }) %>', 
    dataType: 'json', 
    success: function (data) { alert(data); } 
}); 

경고 나에게 날짜의 예상 목록을 보여 주지만, .NET 날짜 형식 . 컨트롤러의 데이터를 마사지해야하는지, 클라이언트의 콜백을 사용해야하는지 잘 모르겠습니다.

편집 2

좋아, 어쩌면 그 배열의 사용이 더 이해하는 데 도움이됩니다. 또, SO의 구현을 riffing합니다 (beforeShowDay 함수는 현재 날짜의 배열을 구문 분석하는 방법을주의 평가되는) :

var visited = { 2009: { 5: { 28: 1, 29: 1 }, 6: { 3: 1, 4: 1, 5: 1, 7: 1, 8: 1, 9: 1, 10: 1, 11: 1, 12: 1, 13: 1, 14: 1, 15: 1, 16: 1, 17: 1, 19: 1, 20: 1, 21: 1, 22: 1, 23: 1, 24: 1, 25: 1, 27: 1, 29: 1, 30: 1 }, 7: { 1: 1, 2: 1, 3: 1, 4: 1, 5: 1, 6: 1, 7: 1, 8: 1, 9: 1, 10: 1, 11: 1, 12: 1, 13: 1, 14: 1, 15: 1, 16: 1, 18: 1, 20: 1, 21: 1, 22: 1, 23: 1, 24: 1, 26: 1, 27: 1, 28: 1, 29: 1, 30: 1, 31: 1 }, 8: { 2: 1, 3: 1, 4: 1, 5: 1, 6: 1, 7: 1, 11: 1, 12: 1, 13: 1, 17: 1, 20: 1, 24: 1, 25: 1, 27: 1, 28: 1 }, 9: { 9: 1, 10: 1, 15: 1, 23: 1, 24: 1 }, 10: { 1: 1, 5: 1, 7: 1, 8: 1, 9: 1, 12: 1, 13: 1, 20: 1, 21: 1, 22: 1, 27: 1, 28: 1, 30: 1 }, 11: { 5: 1, 9: 1, 10: 1, 16: 1, 17: 1, 24: 1, 25: 1, 26: 1, 30: 1 }, 12: { 2: 1, 7: 1, 8: 1, 9: 1, 11: 1, 12: 1, 13: 1, 14: 1, 15: 1, 16: 1, 17: 1, 18: 1, 21: 1, 22: 1, 23: 1, 28: 1, 30: 1} }, 2010: { 1: { 5: 1, 8: 1, 11: 1, 12: 1, 13: 1, 14: 1, 15: 1, 18: 1, 19: 1, 20: 1, 21: 1, 26: 1, 27: 1, 28: 1 }, 2: { 3: 1, 10: 1, 17: 1, 22: 1, 23: 1, 26: 1 }, 3: { 1: 1, 2: 1, 3: 1, 5: 1, 8: 1 }, 4: { 8: 1, 9: 1, 13: 1, 19: 1, 20: 1, 21: 1, 22: 1, 26: 1, 28: 1, 29: 1 }, 5: { 3: 1, 4: 1, 5: 1, 6: 1, 7: 1, 11: 1, 12: 1, 17: 1, 28: 1 }, 6: { 2: 1, 4: 1, 7: 1, 8: 1, 9: 1, 10: 1, 14: 1, 15: 1, 16: 1, 17: 1, 18: 1, 21: 1, 23: 1, 25: 1 }, 7: { 7: 1, 8: 1, 9: 1, 12: 1, 21: 1, 22: 1, 23: 1, 28: 1, 29: 1 }, 8: { 2: 1, 3: 1, 4: 1, 5: 1, 9: 1, 10: 1, 11: 1, 16: 1, 17: 1, 18: 1, 19: 1, 20: 1, 25: 1, 26: 1, 29: 1, 30: 1, 31: 1 }, 9: { 1: 1, 8: 1 }, 10: { 6: 1, 11: 1, 15: 1, 21: 1, 26: 1, 27: 1, 28: 1 }, 11: { 3: 1, 4: 1, 8: 1, 11: 1, 15: 1, 16: 1, 17: 1, 19: 1, 20: 1, 21: 1, 23: 1, 30: 1 }, 12: { 1: 1, 2: 1, 13: 1, 14: 1, 15: 1, 16: 1, 17: 1, 20: 1, 22: 1, 23: 1, 28: 1} }, 2011: { 1: { 3: 1, 5: 1, 6: 1, 7: 1, 12: 1, 14: 1, 18: 1, 20: 1, 21: 1, 25: 1, 26: 1, 27: 1, 28: 1, 31: 1 }, 2: { 1: 1, 2: 1, 3: 1, 6: 1, 7: 1, 8: 1, 9: 1, 10: 1, 11: 1}} }; 
     $('#calendar').datepicker({ 
      beforeShowDay: function (date) { 
       var y = date.getFullYear(); 
       var m = date.getMonth() + 1; 
       var d = date.getDate(); 
       var hasVisited = visited[y] && visited[y][m] && visited[y][m][d]; 
       return [false, (hasVisited ? 'ui-state-active' : ''), (y + '-' + m + '-' + d)]; 
      } 
     }); 

Answer 1

당신이 JSON에 날짜 시간을 보낼 때, 그것은되는 형식으로 구문 분석 :

\/Date(1297250340000)\/ 

이 코드와 자바 스크립트에서 날짜를 구문 분석 할 수 있습니다 : 하나로, OData는 JSON에서 컨트롤러에 의해 반환 된 날짜입니다

var date = eval('new' + oData.replace(/\//g, ' ')); 

.

희망 하시겠습니까?

Answer 2

그 전화를 제공 할 모델을 만들겠습니다. 클라이언트 측에서 좀 더 많은 프로세싱을 할 것이지만 더 많은 OO가 될 것이고 JS 표기법을 사용하여 각 객체 레벨에 액세스 할 수 있습니다.

아약스 전화는 (내가 면도기를 사용하고,하지만 당신은 데이터 요소로 ID를 전달하려는) :

$.ajax({ 
    type: 'POST', 
    url: '@Url.Action("ClosedDates", "Venue")', 
    data: {id: 1}, 
    dataType: 'json', 
    success: function (data) { console.log({data: data}); } 
}); 

모델 :

public class DateListModel 
{ 
    public int Month { get; set; } 
    public List<string> Days { get; set; } 
} 

    public class DateModel 
{ 
    public int Year { get; set; } 
    public List<DateListModel> DateList { get; set; } 
} 

컨트롤러 (테스트 데이터) :

을

[HttpPost] 
public JsonResult ClosedDates(int id) 
{ 
     var dateList2009 = new List<DateListModel> { 
      new DateListModel{Month =5, Days = new List<string>{"28", "29"}}, 
      new DateListModel{Month = 6, Days = new List<string>{"3", "49", "5"}}, 
     }; 
     var dateList2010 = new List<DateListModel>{ 
      new DateListModel{Month = new DateTime(2010,1,1).Month, Days = new List<string>{"5", "8", "11"}}, 
      new DateListModel{Month = new DateTime(2010,2,1).Month, Days = new List<string>{"3", "10", "11"}}, 
     }; 

     var data = new List<DateModel>{ 
      new DateModel{ Year = 2009, DateList = dateList2009}, 
      new DateModel{ Year = 2010, DateList = dateList2010} 
     }; 
     return Json(data); 
    } 

Answer 3

내 경험에 비추어 볼 때 Date 데이터 유형과 같은 클라이언트에서 날짜를 처리 할 필요가 없다면 클라이언트에 보내기가 더 쉽습니다. 문자열로.

그래서 당신이 필요로하는 형식의 문자열로 DateTime의 날짜 배열을 변환하여 json으로 클라이언트에 보내십시오.

Answer 4

그래서, 표시 @alexl 평가 후면 방법을 사용하고, (이 꽤 더러운 느낌이 나는 개선을 위하여 개방 것) 다음과 함께했다 :

$(document).ready(function() { 
$.ajax({ 
    type: 'POST', 
    url: 'myurl', 
    data: {id: 1}, 
    dataType: 'json', 
    success: function (data) { 
     var dates = new Array(); 
     // eval each of the dates coming from the server 
     for(var i = 0; i < data.length; i++) { 
      dates[i] = eval('new' + data[i].replace(/\//g, ' ')); 
     } 
     $('#calendar').datepicker({ 
      beforeShowDay: function (date) { 
       var isBooked = false; 
       // look for the current datepicker date in the array 
       for(var i = 0; i < dates.length; i++) { 
        if (dates[i].valueOf() == date.valueOf()) 
        { 
         isBooked = true; 
         break; 
        } 
       } 
       return [false, (isBooked ? 'ui-state-active' : ''), (date.valueOf)]; 
      } 
     }); 
    } 
}); 

});