1

ほとんどの日付ピッカーでは、タイン カレンダーから日付を選択するか、日付を手動で入力できます。例http://jqueryui.com/demos/datepicker/

これには - 2 回のクリック (1 回はカレンダーを表示するため、もう 1 回は正しい日付を選択するため) - 良好な視力 (通常、ポップアップ カレンダーは非常に小さい) - 小さなカレンダーで正しい日付を選択するための手と目の協調が必要です。あなたのマウス。

パワー ユーザーにとっては問題ありませんが、高齢者やコンピューターの初心者にとっては面倒です。

別のアプローチのウェブサイトを見つけました。ユーザーは主に今週の日付を選択しているようです。そのため、彼らは曜日と一緒にバーにすべての曜日をリストしました。現在の日は別の色でマークされます。右側に小さなカレンダー アイコンがあり、通常の日付ピッカーが開きます。これにより、すべての通常の日付ピッカー機能にアクセスできます。これがスクリーンショットです: http://mite.yo.lk/assets/img/tour/de/zeiten-erfassen.png

同様の機能を持つjqueryプラグインを知っていますか? そうでない場合、開発をスピードアップするのに役立つ他のプラグインまたはウィジェットはありますか?

ありがとうございました！

4

2 に答える 2

0

わかりました、これは古い質問ですが、楽しい質問です。答えはそれほど多くの作業を必要としません...見てください! さて、そのスクリーンショットのようにスタイリングするつもりはありませんが、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>");  
});
于 2010-05-21T07:35:51.337 に答える