CODEWITHSUNDEEP
javascriptjquerydatepickerjquery-ui-datepicker
Tom
Tom

Reputation: 12998

Select the week number of the date picked using jquery datepicker

I have the following code for selecting a date which I then want to convert to a week number.

    $(".calendar").datepicker({
        showWeek: true,
        onSelect: function(dateText, inst) {
            dateFormat: "'Week Number '" + $.datepicker.iso8601Week(new Date(dateText)),
            alert($.datepicker.iso8601Week(new Date(dateText)))
        }
    });

The alert shows the correct week number, but the date does not reformat at all.

I can't move the dateFormat function outside of the onSelect because this causes nothing to happen.

What I would like to achieve is the text field to say something like "Week Number 13"

Any ideas?

http://jsfiddle.net/ENG66/

Upvotes: 5

Views: 28277

Answers (3)

DAB
DAB

Reputation: 1873

The above answers assume that the date format can be handled natively by Javascript. In the case of short European dates (dd/mm/yyyy, as opposed to the American mm/dd/yyyy), you can get the date value via datepicker itself, which will handle the conversion automatically. 

$("#week_field").val( $.datepicker.iso8601Week( $("#date_field").datepicker( "getDate" ) ));

You can set a different date format for datepicker like this

$.datepicker.setDefaults( {dateFormat : "dd/mm/yy"} );

Upvotes: 0

Mutation Person
Mutation Person

Reputation: 30498

I've updated the fiddle to make it work: http://jsfiddle.net/ENG66/11/

In the onselect event, you need to use .val() to override the setting of the textbox value

$(".calendar").datepicker({
        showWeek: true,
        onSelect: function(dateText, inst) {
            $(this).val("'Week Number '" + $.datepicker.iso8601Week(new Date(dateText)));
        }
    });​

EDIT

As Igor Shastin pointed out in his comment below we already have the text box in inst.input

inst.input.val($.datepicker.iso8601Week(new Date(dateText)));

Upvotes: 7

j08691
j08691

Reputation: 207891

Try this jsFiddle example.

$(".calendar").datepicker({
    showWeek: true,
    onSelect: function(dateText, inst) {
        dateFormat: "'Week Number '" + $.datepicker.iso8601Week(new Date(dateText)),
        $(this).val('Week:' + $.datepicker.iso8601Week(new Date(dateText)));
    }
});​

Upvotes: 2

Related Questions