Question

我是JQuery和JS的新手，我在php中编写了一个小GUI，用户必须选择两周的数字，并且我有一个函数可以产生一些关于它的统计数据。我找到了一个JS代码，突出显示用户完成整个星期但是当点击其中一个日期时，特定日期将被插入到输入框中。我想把周数放在输入框中。这可能吗？

我使用的代码发布在这里： http://jsfiddle.net/MqD2n/

<!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.6.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {   
    var startDate;
    var endDate;

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

    var setDates = function (input) {
        var $input = $(input);
        var date = $input.datepicker('getDate');
        if (date !== null) {
            var firstDay = $input.datepicker( "option", "firstDay" );
            var dayAdjustment = date.getDay() - firstDay;
            if (dayAdjustment < 0) {
                dayAdjustment += 7;
            }
            startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - dayAdjustment);
            endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - dayAdjustment + 6);

            var inst = $input.data('datepicker');
            var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
            $('#startDate').text($.datepicker.formatDate(dateFormat, startDate, inst.settings));
            $('#endDate').text($.datepicker.formatDate(dateFormat, endDate, inst.settings));
        }
    }

    $('.week-picker').datepicker({
        beforeShow: function () {
            $('#ui-datepicker-div').addClass('ui-weekpicker');
            selectCurrentWeek();
        },
        onClose: function () {
            $('#ui-datepicker-div').removeClass('ui-weekpicker');
        },
        showOtherMonths: true,
        selectOtherMonths: true,
        onSelect: function (dateText, inst) {
            setDates(this);
            selectCurrentWeek();
            $(this).change();
        },
        beforeShowDay: function (date) {
            var cssClass = '';
            if (date >= startDate && date <= endDate)
                cssClass = 'ui-datepicker-current-day';
            return [true, cssClass];
        },
        onChangeMonthYear: function (year, month, inst) {
            selectCurrentWeek();
        }
    });

    setDates('.week-picker');

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

感谢您的帮助！

Answer 1

共有2个字段。第一个字段 - datepicker用于选择日期，第二个字段 - weekNumber用于获取该日期的周数。

<input type="text" id="datepicker" />
<input type="text" id="weekNumber" />

$('#datepicker').datepicker({
    onSelect: function (dateText, inst) {
        $('#weekNumber').val($.datepicker.iso8601Week(new Date(dateText)));
    }
});

以下是JS Fiddle Demo

编辑：

用于在同一选择日期字段中显示周数

<input type="text" id="datepicker" />

$('#datepicker').datepicker({
    onSelect: function (dateText, inst) {
        $('#datepicker').val("");
        $('#datepicker').val($.datepicker.iso8601Week(new Date(dateText)));
    }
});

演示是here

JQuery Datepicker：将周数放在输入框而不是选定日期

1 个答案: