Select week number or date in JQuery UI datepicker [closed]

问题

This is the first time that I do something with jQuery UI and also my JS skills are at the beginner level.

What's my problem:

I wanna use JQuery UI datepicker to select:

getting a single date when I click on a day or
getting a date range when I click on the week number.

How can I get the date/date range? But it would be nice to get a simple working example.

回答1:

Maybe something like this would help you:

$( "#datepicker" ).datepicker({
showWeek: true,
firstDay: 1
});

// Highlight week on hover week number
$(document).on("mouseenter",".ui-datepicker-week-col",
               function(){$(this).siblings().find("a").addClass('ui-state-hover');} );
$(document).on("mouseleave",".ui-datepicker-week-col",
               function(){$(this).siblings().find("a").removeClass('ui-state-hover');} );

// Select week on click on week number
$(document).on("click",".ui-datepicker-week-col",
   function(){
       $first = $(this).siblings().find("a").first();
       $last = $(this).siblings().find("a").last();
       $first.click();
       $parentFirst = $first.parent();
       $parentLast = $last.parent();
       $("#datepicker").val(
       (Number($parentFirst.data("month"))+1)+"/"+$first.text()+"/"+$parentFirst.data("year")
           + " - " +
        (Number($parentLast.data("month"))+1)+"/"+$last.text()+"/"+$parentLast.data("year")
       );
    });

Fiddle demo: http://jsfiddle.net/lparcerisa/hw1tpthb/3/

回答2:

Just playing with the dates, subtracting days by 7 to get the weeks. Try this:

var selectedDate = $('#datepicker").datepicker( "getDate" );

var iterator = selectedDate;

var year = selectedDate.getFullYear();

var weeksCount = 0;
while (iterator.getFullYear() == year)
{
    iterator = new Date(iterator.getFullYear(),
                        iterator.getMonth(),
                        iterator.getDate()-7);

    weeksCount++;
}

weeksCount will have the week number :)

来源：https://stackoverflow.com/questions/25746358/select-week-number-or-date-in-jquery-ui-datepicker

标签

javascript

jquery

jquery-ui

datepicker