你知道一个日期选择器可以快速选择本周的某一天吗？答案

【问题标题】：Do you know a date picker to quickly pick one day of the current week?你知道一个日期选择器可以快速选择本周的某一天吗？
【发布时间】：2010-11-14 00:49:25
【问题描述】：

大多数日期选择器允许您从齿形日历中选择日期或手动输入日期。例如http://jqueryui.com/demos/datepicker/

这需要 - 两次点击（一次显示日历，一次选择正确日期） - 视力好（通常弹出的日历很小） - 良好的手眼协调能力，可以用鼠标在小日历中选择正确的日期。

这对于高级用户来说没问题，但对于老年人和计算机初学者来说却是个麻烦。

我找到了一个采用不同方法的网站。似乎他们的用户大多选择本周的日期。因此，他们将一周中的所有日子与工作日一起列出在一个酒吧中。当前日期以另一种颜色标记。右侧有一个小日历图标，可打开常规日期选择器。这使您可以访问所有常规日期选择器功能。这是截图：http://mite.yo.lk/assets/img/tour/de/zeiten-erfassen.png

您知道任何具有类似功能的 jquery 插件吗？如果没有，您是否有任何其他插件或小部件可以帮助我加快开发速度？

谢谢！

【问题讨论】：

标签： javascript jquery calendar datepicker uidatepicker

【解决方案1】：

当然有办法，你来这里是希望我们为你做的吗？

下载流行的插件，看看他们的代码，改变一些东西。看看您是否可以将其更改为仅显示当前周。这将是一个令人沮丧但有益的过程。

这当然不是不可能的。

【讨论】：

谢谢！我重新表述了我的问题。我正在寻找一个已经具有类似功能的插件。重新发明轮子是没有意义的。
您不是在重新发明轮子，而是将其缩小以适应您的特定需求。
这不像是你在写一个全新的轮子，你是在使用一个众所周知的稳定轮子，并根据你的个人需求改变它的一部分。
当然，你最喜欢哪一个。停止提问，开始胡闹。
我也是这个意思。您可以在 SO 上花费一年，但您不会学到任何东西。您必须深入了解一些代码并开始切换开关，才能真正了解正在发生的事情以及如何更改它以使其按照您的意愿行事。

【解决方案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>");  
});

【讨论】：