금주의 어느 날을 빠르게 선택하기 위해 날짜 선택 도구를 알고 있습니까?

Question

대부분의 날짜 선택기를 사용하면 타인 달력에서 날짜를 선택하거나 날짜를 직접 입력 할 수 있습니다. 좋은 시력 (일반적으로 팝업 달력이 매우 작) - - 좋은 손으로 눈을 두 번 클릭 (하나의 달력을 표시 한 정확한 날짜를 선택) - 예를 들어 는 http://jqueryui.com/demos/datepicker/

이 가 필요 귀하의 마우스로 작은 달력에서 올바른 날짜를 선택하는 조정.

고급 사용자에게는 문제가 없지만 노인과 컴퓨터 초보자에게는 문제가되지 않습니다.

다른 접근 방식으로 웹 사이트를 발견했습니다. 사용자가 주로 이번주의 날짜를 선택하는 것 같습니다. 그래서 그들은 평일과 함께 술집에 모든 요일을 나열했습니다. 현재 날짜는 다른 색상으로 표시됩니다. 오른손에는 정규 날짜 선택 도구를 열 수있는 작은 캘린더 아이콘이 있습니다. 그러면 모든 정규 날짜 선택 도구 기능에 액세스 할 수 있습니다. 다음은 스크린 샷입니다. http://mite.yo.lk/assets/img/tour/de/zeiten-erfassen.png

유사한 기능을 가진 jquery 플러그인을 알고 계십니까? 그렇지 않은 경우 개발 속도를 높이는 데 도움이되는 다른 플러그인이나 위젯을 사용하십니까?

감사합니다.

Answer 1

물론 할 수있는 방법이 있습니다. 여기 와서 우리가 당신이나 무언가를 위해 그것을 기대 했습니까?

인기있는 플러그인을 다운로드하고 코드를보고 변경하십시오. 현재 주만 표시되도록 변경할 수 있는지 확인하십시오. 실망 스럽지만 보람있는 과정이 될 것입니다.

확실히 불가능하지 않습니다.

Answer 2

좋아, 나는 이것이 오래된 질문이라는 것을 알고있다. 그러나 그것은 재미있다. 대답은 그다지 많은 일을 요구하지 않습니다 ...보세요! 이제는 스크린 샷과 같은 스타일링을하지 않겠지 만, 그렇게하는 것은별로 중요하지 않습니다. 단지 CSS를 변경해야합니다.

CSS :

ul.sideways li{ 
    display:inline; 
    border:1px solid #000; 
    background-color:#DDD; 
    padding:0 5px; 
}​ 

HTML :

<ul class="sideways"> 
    <li>Sun,<span> </span></li> 
    <li>Mon,<span> </span></li> 
    <li>Tues,<span> </span></li> 
    <li>Wed,<span> </span></li> 
    <li>Thurs,<span> </span></li> 
    <li>Fri,<span> </span></li> 
    <li>Sat,<span> </span></li> 
</ul> 
<div id="displayDiv"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

jQuery를 :

var dayOfWeek=new Date().getDay(); 
var today=new Date().getDate(); 
var thisMonth=new Date().getMonth(); 
var monthArray=["Jan","Feb","Mar","Apr","May","Jun", 
      "Jul","Aug","Sep","Oct","Nov","Dec"]; 
var weekStart=today-dayOfWeek; 

$(".sideways>li").each(function(index){ 
    $(this).children("span").append(monthArray[thisMonth]+" "+(weekStart+index)); 
}).click(function(event){ 
    var selectedDay=new Date(); 
    selectedDay.setMonth(thisMonth); 
    selectedDay.setDate(weekStart+$(this).index()); 
    //just to demonstrate: 
    $("#displayDiv").empty().append("<p>"+selectedDay+"</p>"); 
});