Do you know a date picker to quickly pick one day of the current week?

Question

Most date pickers allow you to pick the date from a tine calendar or enter the date by hand. For example http://jqueryui.com/demos/datepicker/

This requires - two clicks (one to display the calendar and one to select the correct date) - good eyesight (usually the pop-up calendar is very small) - and good hand-eye coordination to pick the correct date in the tiny calendar with your mouse.

That's no problem for power users, but a hassle for older people and computer beginners.

I found a website with a different approach. It seems like their users mostly select dates of the current week. So they listed all the days of the week in a bar together with the weekday. The current day is marked in another color. There is a tiny calender icon on the right hand that opens up a regular date picker. That gives you access to all regular date picker functionality. Here is a screenshot: http://mite.yo.lk/assets/img/tour/de/zeiten-erfassen.png

Do you know of any jquery plugin which has a similar feature? If not, do you any other plugin or widget which would help me speed up development ?

Thank you!

Answer 1

Of course there's a way to do it, did you come here expecting us to make it for you or something?

Download the popular plugins, look at their code, change things. See if you can change it to only display the current week. It will be a frustrating but rewarding process.

It certainly isn't impossible.

Answer 2

Ok, I know this is an old question, but it's a fun one. The answer doesn't require all that much work...take a look! Now, I'm not going to sit around styling it like that screenshot, but that's really no big deal to do either, just have to change the CSS around.

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>");  
});