longbill / jquery-date-range-picker Goto Github PK

How to hide shortcut options in the footer of datepicker?
I tried setting shortcuts:{} but this didn't worked.

Current behaviour:
If you select december 2013 the first day of the month is missing.

Expected:
Six days of the previous month followed by the first day of the current month in the first row.

For example, in russian "3 days" and "5 days" will be "3 дня" and "5 дней". It would be awesome to use i18n from moment.js, since jquery-date-range-picker already requires moment.js to work.

Hello,

I've tried implementing this very useful plugin but I've found an error while doing so.

When executing, I get the error Cannot call method 'split' of undefined. I didn't quite understand what is the split doing there (line 194), but after removing it works.

https://github.com/longbill/jquery-date-range-picker/blob/master/daterangepicker.js#L194

Current:

var defaults = opt.getValue.call(self).split( opt.separator );

Fix ?:

var defaults = opt.getValue.call(self);

For a range, I need to get the value(date) of the first selected date in the range. Currently it looks like the only event dispatched is onChange, which only happens after the second date in a range is selected.

Is there an easy way to do this? If not, these would be nice events to have dispatched.

• startDateSelected
• endDateSelected

Thanks in advance for any insight.

I've noticed a pretty sizable bug in the interaction flow. It is pretty easy to get a double displayed month upon reopening the picker.

I'm demonstrating this using the demo page: https://rawgit.com/longbill/jquery-date-range-picker/master/index.html

Steps to reproduce:

1. Open the date picker, and select a range of dates that are within one month
2. Close the date picker
3. Click on the input again to re-open the date picker:
   • The month that the range of selected dates falls within now appears in both the month1 and month2 positions
   • Expected behavior: Two separate months would be displayed.

Does not work correctly with the current month.

Shows -1 selected day for case when selected couple or more days.
$('#date-range').data('dateRangePicker').setDateRange('2015-03-05','2015-03-09');

For case when selected 1 day - shows nothing.
$('#date-range').data('dateRangePicker').setDateRange('2015-03-05','2015-03-05');

With prev month all good. Problem only in current month.
Thanks a lot for your work. Your plugin better than any other for bootstrap.

I want to use date range picker inside some dialogs. But it is don't work, because dialogs have z-index more then 1, but class .date-picker-wrapper declare z-index as 1. I fixed it, i set z-index = 100000.

I try to create daterangepicker, but i have error 'Cannot read property 'is' of undefined'.

var box;
var initiated = false;
var self = this;
var selfDom = $(self).get(0);

$(this).unbind('.datepicker').bind('click.datepicker',function(evt)
{
var isOpen = box.is(':visible'); <-- error
$(document).trigger('click.datepicker');
evt.stopPropagation();
if(!isOpen) open(opt.duration);
});

I use moment.js 2.9.0. If I use version 2.8.3, then error gone...

The date range cannot be edited manually in the text input form element because every time the cursor is moved to the end of the text input. Manual input is needed.

Is there a way to hide dates outside of the current month? For instance... if I have june and july showing, to only show june dates on the june calendar and only july dates on the july calandar? I think this is a little less confusing when selecting a date range. When you select a range and it shows up on both sides of the calendar (i.e. the exact same dates highlighted on both sides) it can throw some people off. I see this as a good option for advanced users and is convenient when you need to select a specific week that spans two months, but in my case I'm hoping I can disable this.

Our project needs to be able to select birth dates. Is it possible to select a year (from a dropdown or otherwise) and then allow the user to select the month and day?

Thanks in advance,
McV.

感谢作者。
是否考虑加上 amd wrapper ？
我现在 grunt requirejs 打包时 shimWrapper 也不能把 jquery-date-range-picker 弄好。看了一下是这一句：

    if (window['moment'] === undefined)
    {
        alert('Please import moment.js before daterangepicker.js');
        return;
    }

Hi Longbill,

I'm using your jQuery Date Range Picker Plugin and i have a problem with default value. My project open DateRangePicker from a tag or some div which are not a input tag., so I don't know how to set default value for it. I try to set value for tag but it doesn't work. Can you help me resolve this problem?

Thank you very much!

Hi
If you close the single datepicker after selecting a date, that selection is not reflected in the calendar, when opened again, as opposed to being shown and highlighted in the daterange calendar.

Also, I am using a span tag(single calendar), so if i set default date, it does not reflect on the calendar.

For specific cases, is it possible to add holiday/events information to the calendar? User hovers over certain date, tooltip shows event info.

Some minor suggestions

• limit previous/later display of calendar when startDate and endDate initialized. As possible with simple jquery datepicker.
• highlight weekends
• setDefault date value inside daterangepicker parameter instead of input or span tag. Easier to update
• for daterange, move both calendars simultaneously.
• navigate months by scrollwheel

Thanks.

Hi,

Is there a way to render the datepicker directly in the page, without using a popup window to see the calendar ?

How can I get the date values for the start and end dates?

In Safari and Chrome all ok.
Thanks for this plugin, very nice!

Hi,
I want to set datepicker show on top of input instead bottom. But I see no option to choose. Can you tell me how can I set position for datepicker?

Thank you!

Hello, nice features! As far as the demo and description is concerned... there is no time input. Or did I miss something obvious? If not, are you going to implement it?

Currently, the timeselector handle moves in 1min intervals.Would it be possible to allow configure this or use a 15min default. It's not easy to move the handle to exactly 3.00 PM, for instance.

Hi,
thank you for the amazing job.
This is a proposal.
Can you please use for build the calendar in different languages the arrays coming from momentjs so i don't need to translate all the strings for new languages?
I.E.
'week-1' : 'MO', 'week-2' : 'TU', 'week-3' : 'WE', 'week-4' : 'TH', 'week-5' : 'FR', 'week-6' : 'SA', 'week-7' : 'SU', 'month-name' ['JANUARY','FEBRUARY','MARCH','APRIL','MAY','JUNE','JULY','AUGUST','SEPTEMBER','OCTOBER','NOVEMBER','DECEMBER'],
all they can come from moment just calling the moment.months(); and moment.monthsShort('-MMM-'); functions
'

I have enabled time and added startDate

startDate: '2014-08-23 12:00',
time: { enabled: true }

From calendar I can not choose 22 August, but I can select 23rd August with time 10:00. This is bug as the start time is 12:00.

Is there a workaround for this issue?

Thanks in advance.

It would be really helpful if startDate could be a function, in addition to a string.

$(selector).dateRangePicker({

    // Current possibility: string 
    startDate: '04.09.2014',

    // possibility 2: function
    startDate: function() {
        return $('.start-date').val();
    }
});

In my case I need the second datepicker (two separate datepicker setup) to have the startDate of the first date field.

this startDate function should be executed everytime before the datepicker is opened, and set the startDate of the datepicker to the returned date.

Is there an option to only show one month instead of the default of two?

When I use the .bind('datepicker-close' binding, anything inside of this gets repeated over and over again. What I need is to put the cursor into the field after I select a date. The cursor does indeed go indeed go into the field but when I click or or go to any other field the script is executed again and the focus is taken back.

// Script to invoke the date range calendars.
$('#txtDOB').dateRangePicker({
    format: 'MM/DD/YYYY',
    autoClose: true,
    singleDate: true,
    showShortcuts: false,
})
.bind('datepicker-close',function() {
    $(this).focus();
    return;
});

Time section don't support localization.

with these setting in you demo for time enabled. it initialize date but do not initialize with time, but when you change the month in from/to Date '17/09/2014 00:00 ~ 30/10/2014 23:59' it initialize good with date and time.
$('#date-range1').dateRangePicker(
{
startOfWeek: 'monday',
separator : ' ~ ',
format: 'DD/MM/YYYY HH:mm',
autoClose: false,
getValue: function () {
return '17/09/2014 00:00 ~ 30/09/2014 23:59';
},
setValue: function(s,s1,s2){
console.log(s);
console.log(s1);
console.log(s2);
},
time: {
enabled: true
}
});

When calling destroy() and re-initializing the date picker, javascript breaks saying 'box is undefined'
Reason:
even calling destroy() doesnt empty data in 'date-picker-opened' that is why return called in line# 333
if ($(this).data('date-picker-opened'))
{
closeDatePicker();
return;
}
To fix:
Add this after Line# 305 inside destroy function:
$(self).data('date-picker-opened',false);

Ranges on custom shortcuts cant being set less than 24h.
A range with no interval is set instead

Last weekend, winter time was applied in France. The calendar for this month seems to be messed up and shows October 27th twice.When checking the time attribute, it shows this:

    <div class="day toMonth valid checked" time="1382824800000">
        27
    </div>
</td>
<td>
    <div class="day toMonth valid" time="1382911200000">
        27
    </div>

First is Sun Oct 27 2013 00:00:00 GMT+0200 (CEST)
Second is Sun Oct 27 2013 23:00:00 GMT+0100 (CET)

On your homepage/demo homepage you state that your code is under "Codecanyon Tools License", but that license does not fit the type of code in any way.

a) You don't seem to sell the code (it is free, right?)
b) The script is not a tool you install on your PC to "produce" an output you can use on websites (or other products), but that's what the specified license is for.

You should pick and specify another license.

Works as expected in all other browsers, however in IE11 the sliders extend past the container

Is it possible we can get an update that allow us to have this picker be static rather than a modal popup..That would be supppper helpful.

Thanks!

Hi,

is it possible to reset the datepicker? I want to have a button somewhere which reset the selection (in textfield) and the range in the popup itself. Is there an easy way? Otherwise i would start hacking on that.

Marc

It's kind of annoying that everything is capitalized by default. It would be better to use lowercase in the .js files and use css to transform it to uppercase. This allows more flexibility for developers who want to use their own style.

hi,
I found a problem, when the table is only 7 row, gap-lines displayed as an wrong way.

It would be great to have an apply/cancel feature. The cancel would reset the dates back to the previous selection. A way to automatically cancel the selection when they click away would also be nice. When the apply feature you could also possibly make it where if I want a single date I just click a single date and it populates both the start and end date. I would then click apply. This would prevent me from clicking the same date twice. I would default this behavior anyway unless they have the autoclose enabled. There shouldn't be a need to click the same date twice.

Case when date range selected.
If we click on prev or next month button ("<", ">"), selection is gone.

当minDays为0，maxDays为 >0,defaultTopText 文案为：

'default-less' : '请选择小于%d天的日期范围',

这句代码：box.find('.default-top').html( defaultTopText.replace(/%d/,opt.minDays).replace(/%d/,opt.maxDays)

实际替换为了： 请选择小于0天的日期范围',

datepicker-close event is raised on every click

I prepare jsfiddle with bug - try click on button or text - alert occurred
http://jsfiddle.net/c1dL0g7p/

I expected it's caused by following line, but without comments is hard to fix it
$(document).bind('click.datepicker', closeDatePicker);

1. Start with a small browser window
2. Open the date range picker
3. Maximize the browser window
   The calendar box maintains its position relative to the window. It should be always aligned with the text box.

Currently, a selected range can contain disabled dates, as long as the start and end date aren't disabled. But that isn't desirable behavior if disabled needs to represent "booked" dates.

The default text "select a date range" is displayed even after using setDateRange.

I fixed this by adding this after showGap(); on line 953:

checkSelectionValid();

My lines 951 to 956

951: showMonth(date1,'month1');
952: showMonth(date2,'month2');
953: showGap();
954: checkSelectionValid();
955: showSelectedInfo();
956: autoclose();

I think it would make more sense to navigate the months together rather than separately or at least a mode to control this. Basically there would be a single set of forward and back arrows that control both calendars...We do this in our stat centric product, but I'm looking to do away with the asp net controls we are using.

is there any way to implement it in angular creating directives?

😌

It is possible register this lib on bower and install automatically using bower?

The days selected value is calculated incorrectly when the time is set to more then 12 hours.
To reproduce, set the time to, say, from 00:00 to 20:00 and select a date range covering a single day. The selected days will be shown as 2 days.