dubrox / multiple-dates-picker-for-jquery-ui Goto Github PK

I would like to use a "textarea" field to show the selected dates instead of an input type="text". This does not appear to work. I have included the code I am using below. This works if I use a with the class, but not with the textarea.

<script>
$(document).ready(function(){
$('.multi_date_input').multiDatesPicker();
});
</script>

<textarea name="publicationDates" class="multi_date_input" style="height:70px;width:250px;"></textarea>

Any suggestions?

I get the below error when I try to use MDP within a jQuery UI dialog on IE8. It works perfectly under FF12.

Error: Conversion from "string" format not allowed on jQuery.multiDatesPicker

I invoke the MDP using the below code:

$("#one-ir-calendar").multiDatesPicker({
    dateFormat: "dd-mm-yy",
    altField: "#one-ir-dates",
    appendText: ",",
    maxPicks: 5,
    minDate: 0
});

Upon further investigation, it turns out that the value of from_format is coming in as function instead of string.

switch(from_format) {
    case 'object': break;
    case 'string': date = $.datepicker.parseDate(dateFormat, date); break;
    case 'number': date = new Date(date); break;
    default: $.error('Conversion from "'+ desired_format +'" format not allowed on jQuery.multiDatesPicker');
}

Please note that this error happens even before selecting any date.

Can somebody tell me how to use multi-language support for this plugin.
BAsically I need to support English, Japanese,Korean, Indonesian(Malay), Chinese (Simplified /Traditional)

Jquery 1.8.1, Jquery UI 1.9.1

In Chrome Dev tools I get this error "Uncaught Error: Syntax error, unrecognized expression: ##altField "

 var dates = $('#full-year').multiDatesPicker({
        dateFormat: 'yy-mm-dd',
        firstDay: 1, // rows starts on Monday
        numberOfMonths: [3,4],
        altField: '#altField'

    });

Just realise that I have a problem because MDP assumes that the default state of a date is enabled, whereas in my usecase the default state is disabled.

Perhaps an option disabledAsDefault or similar would be useful, with the ability to add enabled dates in the same was as is currently possible for disabled ones?

I have this piece of code in php

$data1['dates'] = "'2013-04-07','2013-04-08'";
echo json_encode($data1);

and my html here

$.getJSON('check-events-details-change.php', function(data1) {
                $('input[name="eventname"]').val(data1["eventname"]);
                $('textarea[name="about"]').val(data1["about"]);
                                 alert(data1.dates);
            $('#with-altfield1').multiDatesPicker({
            addDates: [data1.dates],
            altField: '#altField1'
            });

I always get this error picked up by firebug
uncaught exception: Missing number at position 0
i alert my string before it gets processed and the outcome is
'2013-04-07','2013-04-08'
The only way i can get it to work is by actually typing in the dates.
addDates: ['2013-04-07','2013-04-08'],

If my array has one result in then it works its only muliple when i get the errror

Am i missing something?

Hi

I'm using the following code and only the last date in the list (25) is being disabled.

var today = new Date();
$('#bookDates').multiDatesPicker({
dateFormat: "yy-mm-dd",addDisabledDates: [today.setDate(23),today.setDate(24),today.setDate(25)]
});

I noticed the same thing is happening on your demo page.

Is this a bug or am I doing something wrong?

I would love to see the ability to enable only the choosing of future dates.

Hi,

Is there a way to define the range automatically, after picking the second day in the calendar?

Thanks in advance,

I'm including all JS files and applying MDP to a text input. The calendar works perfectly and highlights all dates that I have selected. However, each new date I select overwrites the last in my input - it doesn't create a comma separated list like in your demos. What am I doing wrong? Thanks

Hi,

is it possible to select n days in range without weekends?

Hello,

if i set the dateFormat to the german format 'dd.mm.yy' and the mode to 'daysRange', the following Exception were thrown by the console:

Uncaught Unexpected literal at position 2 jquery-ui.js:8230
checkLiteral jquery-ui.js:8230
$.extend.parseDate jquery-ui.js:8279
methods.dateConvert jquery-ui.multidatespicker.js:239
dateConvert jquery-ui.multidatespicker.js:64
methods.sumDays jquery-ui.multidatespicker.js:200
methods.toggleDate jquery-ui.multidatespicker.js:366
(anonymous function) jquery-ui.multidatespicker.js:435
jQuery.extend.each jquery.js:611
jQuery.fn.jQuery.each jquery.js:241
$.fn.multiDatesPicker jquery-ui.multidatespicker.js:422
mdp_events.onSelect jquery-ui.multidatespicker.js:82
$.extend._selectDate jquery-ui.js:8111
$.extend._selectDay jquery-ui.js:8090
handler.selectDay jquery-ui.js:8614
jQuery.event.dispatch jquery.js:3063
elemData.handle.eventHandle jquery.js:2681

Here is the code:

    <script>

        $(function() {
            $('#result').multiDatesPicker({
                mode: 'daysRange',
                dateFormat: 'dd.mm.yy',
                minDate: new Date(2012, 12, 24),
                maxDate: new Date(2012, 12, 30),
                autoselectRange: [0,3]
            });
        });
    </script>   

  </head>
  <body>
    <div id="result"></div>
  </body>

is this a bug from the jquery-ui.multidatespicker.js or the jquer ui?

I need the german format!

greetings from Berlin!

Can anybody help me tom implement a tool tip when starting date and ending dates are clicked

When I call method
$datesCalendar.multiDatesPicker('removeDates', selectedDate);

calendar does gets updated but altField doesn't. Tried to find how to fix that but with no luck at the moment :(

thanx

How would i disable all dates prior to today's date?

many thanks

It happens even on the multidatespicker's sourcefourge site. When you click on day October 21rst of 2012, actually the day October 20th is selected.

I am using full year calendar for picking multiple dates from different months. Date picker is working fine. I got a problem.
When a date is picked from the calendar, the calendar shows 1 year back calendar, however the selected dates are still selected.
Date has anchor tag like this 27, I have no idea where to look.

I need to select multiple dates. How do I avoid calendar changing after selection of date?

Thanks,
Neetin

Hi, How can I disable all past date?... I only need current and future days as active... Thanks in advance

All I need is the altField calendar.. but I copy the code completely and have all the .js files where they should be but nothing fills the div id="with-altField"></div what could be the issue? has anyone got a raw code for this? not stuck in a webpage? Also I'm installing it into a .php doc. thanks in advance if anyone can help.
Si

Example: 2012-01-01,2012-01-04,2012-01-10 (no beatiful)

How to set ", " ?

Example: 2012-01-01, 2013-02-28, 2013-03-08 (beatiful)!

i have a question about this two,
how can i jump the disabled days when the datepicker is in daysRange mode?

can't select one specific date: 10/20/2013, but I don't know how. Some one can help me?
I tested it on IE, Chrome and Firefox. It Works only on IE.

I'm not sure how to handle a date changing. Could this example please be added on the website?

Hi guys,

I am using Multiple Dates Picker for 3 month calender view to pick dates. When I select a date, it works, but when I deselect a selected date it deselects but date cell is still looks selected.
I think It is only CSS design problem. I can not figure out.

Thanks,
Neetin

It happens on multidatepicker's sourcefourge site... when you select the penultimate sunday of october (of any year) it selects previous saturday instead.

I want a user to select dates populated in altfield to be written to the database to then be recalled upon reload to pre-select these dates again so it can be either edited or added to.

Trouble is I cant even get it to manually pre-select the dates? help!
Thanks
Heres my code.


"stylesheet" -"css/redmond/jquery-ui-1.10.3.custom.css"
javascript load
"js/jquery-1.7.2.js"
"js/jquery.ui.core.js"
"js/jquery.ui.datepicker.js"
"js/jquery-ui-1.10.3.custom.js"
"js/jquery-ui.multidatespicker.js"

    "text/javascript">  

    $(function() {

        $('#with-altField').multiDatesPicker({
            altField: '#altField'
            addDates: ['07/01/13', '07/02/13', '07/14/13', '07/16/13']
        });;
    });

    </script

</head>
<body>                          
    <div id="with-altField"></div>
    <input type="text" id="altField">
</body>

This plugin help me a lot to modify datepicker. However, could you tell how to count a number of picked dates and call it into frontend? In normal mode option, i found some features that could be used to count picked dates. But i don't have idea how make it possible. Thanks.

Hi was wondering whether someone would be able to help me. We are using MDP in a HR module we are building and I need to be able to disable certain days dependent on what the user has setup for their company.

For example, a user defines their "work week" as Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday with the values 0 = not a work day, and 1 = work day.

This is saved in a field in the database as a single string. So if a company didn't work the weekends, the data stored in the database would look like: 0111110. Likewise, if a company worked every day except a Wednesday and a Sunday it would look like: 0110111.

Does anyone know of a way to be able to convert this format 0111110 into something that will work with the disabled dates of MDP.

Hello,

I am tried to add a calendar on my website but I want to change options.
For example, I want to select several dates at page load. For that I use addDates with my array of dates. Then I would lock the calendar but leave open the user possibility to navigate through the months.
Finally I want to add links to external pages directly from the calendar.

For these last two ideas I can not find how to do, someone can help me?

Should be useful select a free range of dates using click. First click select second click define the range visually.

I wondered if I could easily switch back the multi dates picker to accept only one single day selection at a time. That is, exactly what the standard jquery ui date picker does, but I don't want to create another object, just "downgrade" for a while the multi dates picker for a very specific task which requires not more than a day to be chosen at a time. Is it somehow possible with little effort? It cannot be achieved by simply playing with the maxPicks parameter because by setting 1 I clearly cannot select any other date besides the first, by setting 2 I can select a second day but it does not automatically de-select the first when selecting the second.Thanks

How can I disable only the saturdays instead of disabling all the weekend.

I've try using this function $.datepicker.noWeekends but it keeps disabling all the weekend.

Thanks in advance.

Hi, I've found a performance bottleneck:

Script version: 1.6.1
Problems are found at lines: 105-107 and 109-111

Original code (lines 105-107):

    $this
        .datepicker("option", "minDate", min_date)
        .datepicker("option", "maxDate", max_date);

Original code (lines 109-111):

    $this
        .datepicker("option", "minDate", this.multiDatesPicker.minDate)
        .datepicker("option", "maxDate", this.multiDatesPicker.maxDate);

This is a bad thing. Each call of $this.datepicker('option', 'min/maxDate', ...) makes datepicker and multiDatesPicker to execute onBeforeShow event listeners for each of the days you have visible in your calendar. So in my 1-year calendar (12*35 days ~ 420 days) single attempt to select a day executes onBeforeShow for 3 times for each day! And it takes about 350 ms x 3 times ~ 1.05 sec for stucking. But if you apply my fix (it is available below), you'll be forced to wait 3 times less before you can click another date.

My suggestion is:
It's better to modify those lines to get them this like:

My solution for lines 105-107

    if(methods.compareDates($this.datepicker("option", "minDate"), min_date) !== 0) 
        $this.datepicker("option", "minDate", min_date)
    if(methods.compareDates($this.datepicker("option", "maxDate"), max_date) !== 0) 
        $this.datepicker("option", "maxDate", max_date)

My solution for lines 109-111

    if(methods.compareDates($this.datepicker("option", "minDate"), this.multiDatesPicker.minDate) !== 0)
        $this.datepicker("option", "minDate", this.multiDatesPicker.minDate);
    if(methods.compareDates($this.datepicker("option", "maxDate"), this.multiDatesPicker.maxDate) !== 0)
        $this.datepicker("option", "maxDate", this.multiDatesPicker.maxDate);

It improves performance of onSelect event for 3 times with the same functionality.

Thanks for this great plugin!

Hi,

You say: I've placed two days in the 'value' attribute of the altField just to test out how those are automatically added to the calendar.

But they don't show up as selected....

Other dates won't either.

Is this a bug?

Hi,

One other question. I have multiple month calendars displayed, and when I pick a day in one of the calendars to the right (not the first one, but another one) then the months get rotated.

For example, it displays April, May, June. And when I pick a date in May, it will display: May, June, July regardless of any dates previously picked in April.

Can this be disabled?

Thank your for any help :)

I have a web site (Twitter and facebook scheduling app) and I have implemented this DatePicker (excelent by the way). The site has a calendar that allow the user to save a tweet or facebook post to be posted in a date (or dates) in the future, when they edit this post, the stored days "fill up" the calendar with the method:

 $('#calendar_tuits_module').multiDatesPicker('addDates', dates[i]);

where 'calendar_tuits_module' is the calendar Id and 'dates[i]' is and date array (obviously this is inside a for loop)

It works at perfection in Google Chrome but my Mozilla users have been complaining that the dates are not rendering on the calendar when they edit the tweet or facebook post, I mean, 'addDates' function (method) is not working.

Anyone with this same issue?

Thanks a lot in advanced!

the site is http://autotuits.com if you want to check this issue by yourselves

Hello
I noticed that there is a small delay when you select dates with a calendar which shows several months, is it normal ? That can be seen directly on the demo page, when you pick up a date in every other demo example, the selected date style change as soon as it is selected, but when you choose a date in the full yea example, it takes one or two second before the style changes.
Thank you !

hello, i want to user this in the inline view of tree months
clicking at a day causes the month to jump some where
it seams that the selection i not set too

Using the demo page: http://multidatespickr.sourceforge.net
At the From input demo select a day in December, then the popup closes and open again, select another day in December, again the popup closes and open again, but now the month presented is october(the actual current month).

I'm trying to debug, if I found a solution I'll post here.

Anyone else with this problem?

Thanks!

Hello there. Loving this piece of work and finding it very flexible. However, I have one request that may already be present in the options that I'm not seeing. Is it possible to initialise the calendar with an arbitary 'start-day' for the week. I would like to start the calendar on a saturday thro to friday (or a wed-tue if the use case required) but can't see an option to allow me to do this.

Hope someone can help.
jimi

i'm a newbie who is developing a webApp at the moment. i've tried to implement the MDP by viewing the page source, but it still doesnt work.

can anyone please help me. really need some help here.

here's my code to try implementing the MDP :

<!-- loads jquery and jquery ui -->
<script type="text/javascript" src="MultiDatesPicker v1.6.1/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="MultiDatesPicker v1.6.1/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="MultiDatesPicker v1.6.1/js/jquery.ui.datepicker.js"></script>

<!-- loads mdp -->

<title>Untitled 4</title>

When passing an array of indexes to the method 'removeDates', only the first item in the array is removed.

You can see an example of this by visiting http://multidatespickr.sourceforge.net/

To duplicate this bug, first visit the above URL and click on some dates on the "Simplest usage" calendar. Next, execute the following console command:

$('#simpliest-usage').multiDatesPicker('removeDates', [0,1,2]);

This unexpected behavior has been duplicated using Ubuntu with Firefox 7.0.1 and Chrome 14.0.835.202

Hi,

I get this issue when using your brilliant script in a custom component with Joomla (backend).

Looks similar like this issue: mootools - jquery conflict and "Conversion function-string" - ID: 3511481
But his hacked file didn't work correct for me. Maybe because jquery ui is updated as well in the meantime.

Hope you have a solution for this issue: "Conversion from "string" format not allowed on jQuery.multiDatesPicker"

Regards,

GC

anyone knows how to get the count of picked dates on the calendar into a php variable.

really need help here

best regards !

Hello,

I'm trying to use resetDates to clean my multiDatesPicker but no successfull.

My code is:

$(".add_days").multiDatesPicker('resetDates','disabled');
$(".add_days").multiDatesPicker();

I tryied it with $(".add_days").multiDatesPicker('resetDates','picked'), and without declaring the method the second time, but none took effect.

Anyone can help me? Thanks.

If the numberOfMonths value is set to greater than 1, anytime you select a date in a month other than the first month, the calendar moves the month that you just selected to become the first month, causing a "jump".

For example, I've set numberOfMonths = 2 and the calendar currently displays Jan and Feb. If I pick a date in Jan, there is no problem. But if I pick a date in Feb, the calendar refreshes and now displays Feb and Mar.

It may have something to do with the showCurrentAtPos option, but the issue only seems to happen with MDP and not with the standard datepicker.

In the example documentation, you demo preselecting dates by setting the value attribute on a field.

value="04/19/2012,04/21/2012"

This doesn't do anything.

Issue with addDates method
$('#divMonth1').multiDatesPicker({
altField: '#MainContent_txtMonth1',
defaultDate: '03/01/13',
addDates: ['03/01/13', '03/02/13', '03/14/13', '03/16/13']
});


The above code works fine for me. But when I change
var dates = "'03/01/13', '03/02/13'";
$('#divMonth1').multiDatesPicker({
altField: '#MainContent_txtMonth1',
defaultDate: '03/01/13',
addDates: [dates]
});


Then the above code don't work for me and I see the below exception in the Firebug
"uncaught exception: Missing number at position 0"

Hi! I would like to know if it is possible to get a full year clicking work?

Now when you click you move about a year backward. When i want to view full year and beeing able to select. (tip what code should i use for example)?

var today = new Date();
var y = today.getFullYear();
$('#full-year').multiDatesPicker({
addDates: ['10/14/'+y, '02/19/'+y, '01/14/'+y, '11/16/'+y],
numberOfMonths: [3,4],
showCurrentAtPos: today.getMonth()
});

Is what i used.

We are using MultiDatesPicker v1.4.0 and we have an issue with the "addAvoidedDates" parameter. The first time the calendar loads works fine and the avoided dates are shown correctly, but after destroy the calendar and load it again keeps showing the same avoided dates even if the parameter is set to null. It seems like the avoided dates get cache or something like that.

We have try the last version (1.6.1), and the issue is still present (using "addDisabledDates" instead of "addAvoidedDates" parameter).

If you need more information please ask me.

Thank you!