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

你知道一个日期选择器可以快速选择当周的一天吗？

2 个答案: