longbill / jquery-date-range-picker Goto Github PK
View Code? Open in Web Editor NEWA jQuery plugin that allows user to select a date range
License: MIT License
A jQuery plugin that allows user to select a date range
License: MIT License
Is there an option to only show one month instead of the default of two?
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!
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.
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
}
});
感谢作者。
是否考虑加上 amd wrapper ?
我现在 grunt requirejs 打包时 shimWrapper 也不能把 jquery-date-range-picker 弄好。看了一下是这一句:
if (window['moment'] === undefined)
{
alert('Please import moment.js before daterangepicker.js');
return;
}
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.
Thanks in advance for any insight.
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);
😌
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!
is there any way to implement it in angular creating directives?
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.
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!
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.
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.
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);
How to hide shortcut options in the footer of datepicker?
I tried setting shortcuts:{}
but this didn't worked.
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.
Ranges on custom shortcuts cant being set less than 24h.
A range with no interval is set instead
Time section don't support localization.
How can I get the date values for the start and end 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();
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.
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:
Hi,
Is there a way to render the datepicker directly in the page, without using a popup window to see the calendar ?
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.
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.
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.
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?
Case when date range selected.
If we click on prev or next month button ("<", ">"), selection is gone.
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...
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.
It is possible register this lib on bower and install automatically using bower?
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
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.
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.
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);
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
'
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;
});
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.
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)
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.
当minDays为0,maxDays为 >0,defaultTopText 文案为:
'default-less' : '请选择小于%d天的日期范围',
这句代码:box.find('.default-top').html( defaultTopText.replace(/%d/,opt.minDays).replace(/%d/,opt.maxDays)
实际替换为了: 请选择小于0天的日期范围',
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
Thanks.
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.