prezent / jquery-weekpicker

Weekpicker addon for the jQueryUI datepicker

jQuery weekpicker

A weekpicker addon for the jQueryUI datepicker.

Usage

The weekpicker is an extension of the datepicker. As such, all datepicker options are supported. Example:

$('#selector').weekpicker({
    // options ...
});

There are only a three new options:

• weekLength: The length of the week in days. Defaults to 7. Use 5 to select from e.g. Monday-Friday.
• startField: Element or jQuery expression for an input field that will receive the start of the selected week.
• endField: Element or jQuery expression for an input field that will receive the end of the selected week.

Tips

If you are only interested in the start of the week, you can set the startField equal to the weekpicker element. Example:

$('input.weekpicker').each(function (i, el) {
    $(el).weekpicker({
        firstDay: 1,
        startField: el
    });
});

This will override the value in the date field with the start of the week.

jquery-weekpicker's Issues

setDate not setting startField=startDate nor endField=endDate

Calling:

 $( "#wkPicker" ).weekpicker( "setDate", new Date() );

is not setting the corresponding startDate to the startField,
nor setting the corresponding endDate to the endField

Adding the some lines you have in the onSelect: function, to the setDate override, do the job:

    /*
     * Override to update the date range
     */
    $.datepicker._base_setDate = $.datepicker._setDate;
    $.datepicker._setDate = function (inst, date, noChange) {
        var result = this._base_setDate(inst, date, noChange);
        var wp_inst = this._get(inst, 'weekpicker');

        if (wp_inst) {
            wp_inst._setDates();

            var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;

            // Update startField
            if (wp_inst._defaults.startField) {
                var date = $.datepicker.formatDate(dateFormat, wp_inst.startDate, inst.settings);
                $(wp_inst._defaults.startField).val(date);
            }

            // Update endField
            if (wp_inst._defaults.endField) {
                var date = $.datepicker.formatDate(dateFormat, wp_inst.endDate, inst.settings);
                $(wp_inst._defaults.endField).val(date);
            }
        }

        return result;
    };

not working

Its not working can you recheck it and please put full code with html

now i am using

<script type="text/javascript"> $('input.weekpicker').each(function (i, el) { $(el).weekpicker({ firstDay: 1, startField: el }); }); </script>

may be i miss something please correct me
thanks

How can i highlight entire week with startdate and enddate?

$('input.week-mode').weekpicker({
        // showWeek: false,
        showOtherMonths: true,
        selectOtherMonths: true,
        maxDate: new Date(),
        startDate: start_date,
        endDate: end_date, 
      });

 this is my code.

Small fix when using alongside normal datepickers

The ui-state-hover is triggered on my default datepickers, with this little piece of code they keep on working as intended.. :) thanks for the plugin mate!
$dp.on('mousemove', '.ui-datepicker-calendar tr', function () { if ($(this).parents('.ui-weekpicker').length) { $(this).find('td a').addClass('ui-state-hover'); } });

Error when startField is set

Hi,

The plug in is really useful and exactly what I was looking for.

I am facing an issue with the weekpicker. When startField is set, I get an error on line 215 (line 225 if endField is set) saying 'input' not defined.

Please look into the issue and let me know the solution.

Here is my code.

$(document).ready(function() {
$('.x').each(function (i, el) {
$(el).weekpicker({
weekLength: 5,
showWeek: true,
maxDate: "+0D",
format: "dd M yyyy",
todayHighlight: true,
startField: $('#result')
});
});
});

Inital end date value is wrong

I have this:

$('#datepicker_end').weekpicker({
    endField: '#datepicker_end',
    dateFormat: 'yy-mm-dd',
    minDate: 48 - weekDay,
    inline: true,
    altField: "#end_hidden"
});

And the end_hidden is populated with begin, instead of end for the start. When i click on some date, the correct end_hidden is populated. But the initial one is false.

I had to put this

var date = new Date($('#end_hidden').val());
date.setDate(date.getDate() + 6);
$('#end_hidden').val(date.toISOString().substring(0, 10));

at the end of my code to have to correct end_hidden value populated initiallly.

Always open weekpicker does not work

You can assign a datepicker/weekpicker to a div to have it always show.

If you do this the week functionality does not work

With Input

How it could work with "input"?

Not allowed to load local resource:

Hi, i'm using your plugin to create a weekbased calendar. but i stumbled op on a problem.

as soon as i include the location of the script within the <script> tags, chrome blocks the script from loading. it's for an application, that intergrates a week based calendar. thank you for your help

Multiple Week

Hi all,
Any idea how to do multiple week selection?? In advance say i using for a booking system of houses.

It has to be appreciated that a week can already be reserved so the multiple weeks must be consecutive, if I want to make a multiple booking from 09-01-2017 to 29-01-2017 if from 23-01-2017 to 29 -01-2017 I already have a reservation you could only select from 09-01-2017 to 01-22-2017

The already created reservations are already blocked in the calendar, what I need is to be able to do multiple week selection

Thanks in advance