web-dev-qa-db-ja.com

jQuery UI Calendar / Date PIckerを日ではなく週に使用する方法は？

過去2か月間、jQuery UIカレンダー/日付ピッカーを使用して大きな成功を収めています。 1日ではなく1週間（日-土）を選択できるようにする新しい要件が与えられました。

誰もこれを達成したことがありますか？

  • 日ではなく週ごとに強調表示する
  • テキストボックス/ラベルに単一の日付ではなく開始日と終了日を表示する
javascriptjqueryasp.net-mvcjquery-ui
30
RSolberg

JQuery UI DataPickerを使用したインラインウィークピッカー（jQuery UI 1.8以降が必要）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
    var startDate;
    var endDate;

    var selectCurrentWeek = function() {
        window.setTimeout(function () {
            $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
        }, 1);
    }

    $('.week-picker').datepicker( {
        showOtherMonths: true,
        selectOtherMonths: true,
        onSelect: function(dateText, inst) { 
            var date = $(this).datepicker('getDate');
            startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
            endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
            var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
            $('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
            $('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));

            selectCurrentWeek();
        },
        beforeShowDay: function(date) {
            var cssClass = '';
            if(date >= startDate && date <= endDate)
                cssClass = 'ui-datepicker-current-day';
            return [true, cssClass];
        },
        onChangeMonthYear: function(year, month, inst) {
            selectCurrentWeek();
        }
    });

    $('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
    $('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
</script>
</head>
<body>
    <div class="week-picker"></div>
    <br /><br />
    <label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>
</body>
</html>

jsFiddleで実行 http://jsfiddle.net/manishma/AVZJh/light/

53
Igor Zelmanovich

ここに別の方法があります。 -週をshowWeekで表示します。 -live（）を使用してイベントハンドラーをアタッチするbeforeShowを定義し、週の行が強調表示されるようにします（週番号を含む）。 -die（）oncloseでイベントハンドラーをデタッチします。これは、コードの他の場所で通常の日付ピッカーを使用している場合に特に便利です。

$( ".week-picker" ).datepicker({
    dateFormat: "yy-mm-dd",
    showOtherMonths: true,
    selectOtherMonths: true,
    changeMonth: true,
    changeYear: true,
    showWeek: true,
    beforeShow: function(dateText, inst) { 

        // for week highighting
        $(".ui-datepicker-calendar tr").live("mousemove", function() { 
            $(this).find("td a").addClass("ui-state-hover"); 
            $(this).find(".ui-datepicker-week-col").addClass("ui-state-hover");
        });
        $(".ui-datepicker-calendar tr").live("mouseleave", function() { 
            $(this).find("td a").removeClass("ui-state-hover");
            $(this).find(".ui-datepicker-week-col").removeClass("ui-state-hover");      
        });
    },
    onClose: function(dateText, inst) { 
        var wk = $.datepicker.iso8601Week(new Date(dateText));
        if (parseInt(wk) < 10) {
            wk = "0" + wk;
        }           
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();

        if (isNaN(wk)) {
            $(this).val("");
        } else {
            $(this).val(year + ";" + wk);
        }

        // disable live listeners so they dont impact other instances
        $(".ui-datepicker-calendar tr").die("mousemove");
        $(".ui-datepicker-calendar tr").die("mouseleave");

    }
});
5
Keith

受け入れられた回答に基づいてjQueryプラグインを作成しました。 https://github.com/Prezent/jquery-weekpicker またはBowerから入手してください。使用例：

$('#selector').weekpicker({
    startField: '#date-start',
    endField: '#date-end'
});
5
Sander Marechal

次の依存関係が必要です。

  1. jquery.js
  2. jquery-ui.min.js
  3. jquery-ui.css
  var startDate;
  var endDate;
  $('.date-picker').datepicker( {
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    onSelect: function(dateText, inst) {
    var date = $(this).datepicker('getDate');
    startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
    endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
    var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
    $('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
    $('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
    $(this).val($.datepicker.formatDate( dateFormat, startDate, inst.settings ) + " - " + $.datepicker.formatDate( dateFormat, endDate, inst.settings ));
    }
  });
.ui-datepicker-calendar tr:hover { 
    background-color:#808080;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
  </head>
  
  <body>
    <label for="startDate">Date :</label>
    <input name="startDate" class="date-picker" />
    <label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>
  </body>
</html>
1
jaydip jadhav

誰かがまだ興味があるなら、私はこれを作りました： Week Picker Converter 。

テキストまたは非表示を週ピッカーに変換する小さなフィールドコンバーターです。誰かがそれを使用して（データベースから）テーブルを印刷する場合、これはSQLクエリ選択で次のパターンでも使用できます。

select
'<span class="displayWeek">'
|| week_field
|| '</span><input type="hidden" value="week_field" id="id_field" />'
|| '<i class="fa fa-calendar showCalendar" aria-hidden="true"
    style="cursor:pointer;margin-left: 10px;"
    onclick="javascript:showWeekCalendar(this, additionalFunction);"></i>'
as "WeekPicker"
from dual
0
Daniele Viti

上記の例をいくつか使用しましたが、週の選択をサポートする必要がありますが、週は任意の曜日に開始でき、変数に基づいて変更する必要があるため、別のアプローチを取りました。各tdを週クラスでグループ化するクラスを設定して、trと重複する週を簡単に強調表示できるようにします。この例では、datepickerStartWeekDayは、日曜日から土曜日に始まる1週間を表す0から6になります。

ここに私のコードがあります：

var $elem = $("input.my-date-picker");
var weekCounter = 1;
var datepickerStartWeekDay = 1;

options = {
    changeMonth: true,
    changeYear: true,
    showOtherMonths: true,
    selectOtherMonths: true,
    onClose: function (dateText, inst) {
        weekCounter = 1;
    },
    onSelect: function(dateText, inst) {
        if (datepickerStartWeekDay != null) {
            var elem = $(this);
            var date = elem.datepicker('getDate');
            var curDayNum = date.getDay();
            var offset;

            if (curDayNum > datepickerStartWeekDay) {
                offset = -(curDayNum - datepickerStartWeekDay);
            }
            else {
                offset = -(7 - (datepickerStartWeekDay - curDayNum));
            }
            var wkStartDate = new Date(date.addDays(offset));
            elem.val(wkStartDate);
        }
    },
    beforeShowDay: function(date) {
        var retClass;

        // datepickerStartWeekDay:  0 = Sunday.. 6 = Saturday
        // Set up weeks based on the start day with classes.
        // week1, week2, week3, etc based on the start day of the week
        if (datepickerStartWeekDay != null) {
            if (date.getDay() == datepickerStartWeekDay) {
                weekCounter += 1;
            }
            retClass = [true, 'week' + weekCounter];
        }
        else {
            retClass = [true, ''];
        }
        return retClass;
    },
    onChangeMonthYear: function(year, month, inst) {
        weekCounter = 1;
    }
};
$elem.datepicker(options);

// Event to list for mouseover for week selection
$(".ui-datepicker-calendar td").live('mouseover', function (ev) {
    var targetElem = $(ev.currentTarget);
    targetElem.closest("tbody").find(".ui-week-hover").removeClass("ui-week-hover");
    for (var i = 0; i < 8; i++) {
        if (targetElem.hasClass("week" + i)) {
            targetElem.closest("tbody").find(".week" + i).addClass("ui-week-hover");
            continue;
        }
    }
});`

// CSS

.ui-week-hover a {
    background-color: #eef6f9 !important;
}
0
Good Times

8123行目でjqueryui-1.10.2.jsを変更しました。

（これを見た場所を覚えていない）

case 'W':  
output += this.iso8601Week(new Date(date.getFullYear(), date.getMonth(), date.getDate()));
break;

次に、日付形式==> dateFormat： 'yy-W'のWで週を選択できます。

$("#your_datepicker").datepicker ({ firstDay: 1, showWeek: true, showOtherMonths: true, dateFormat: 'yy-W'});

Jqueryuiの以前のバージョンを使用している場合は、ファイルで「@」を検索し（引用符も検索）、これらの3行を追加します。

0
kmas
$(function () {
  var date = $('#FromDate').datepicker('getDate');
  date.setMonth(date.getMonth() + 1);
  var year = date.getFullYear(); //get year
  var month = date.getMonth();
  var date1 = date.getDate();
  $("#ToDate").datepicker("setDate", date);

  $("#ToDate").datepicker({
    //In Datepicker set the Calendar display start with Monday

    firstDay: $('#FromDate').datepicker('getDate'),
    //stepMonths: 0 ,
    //month: date.getMonth(), 
    showOtherMonths: true,
    selectOtherMonths: true,
    startDate: new Date(month, date1, year), //set it here
    endDate: new Date(month, '31', year + 1),
    beforeShowDay: function (date) {
      //var monday = new Date("June 1, 2013 00:00:00"); Used it for testing

      //Get today's date
      var monday = $('#FromDate').datepicker('getDate');

      //Set the time of today's date to 00:00:00
      monday.setHours(0, 0, 0, 0);

      //alert(monday.getDay() + ' : ' + monday.getDate() + ' : ' + (monday.getDay() || 7) + ' : ' + monday); Used it for testing

      /*
      Below Line sets the Date to Monday (Start of that Week)
      (monday.getDay() || 7) returns the value of getDay()
      ie., [ 1 - Mon, 2 - Tue, 3 - Wed, 4 - Thu, 5 - Fri, 6 - Sat ]
      except for Sunday where it returns 7.
      The return value is used to calculate the Date of that Week's Monday
      */

      monday.setDate(monday.getDate() + 1 - (monday.getDay() || 7));

      //Set the Date to Monday
      var sunday = new Date(monday);

      //Now add 6 to Monday to get the Date of Sunday (End of that Week)
      sunday.setDate(monday.getDate() + 6);
      //Now return the enabled and disabled dates to datepicker
      return [(date >= monday && date <= sunday), ''];
    },

  });

  //Set the date format to dd/mm/yy ie., 30/10/1989
  $("#ToDate").datepicker("option", "dateFormat", "mm/dd/yy");
});
0
nilesh soma