sensortower / daterangepicker Goto Github PK

I need to remove the apply and cancel button. Automatically update the selected date range to input field

Hi here!
daterangepicker() is not working for me and is sending me this error.

Do you know why? Thanks

Can we have a destroy method for destroying a particular daterangepicker?

This is how it's implemented right now. When a month starts on the first day of the week, we show the previous month:

We should add an option to hide the previous month:

hi, while i move to this daterangepicker page it has taken too much time..

How to config maximum range can be selected.
Example: maximum 30 days

Problem: a lot of CSS class names have very generic names (.controls, .calendar, .hidden). This may cause problems when integrating with existing websites.

Solution: namespace class names (.dtp-controls, .dtp-calendar, .dtp-hidden).

I love this plugin. However I can't get it to work. I use Jquery.
Must I include knockoutjs on the page? Hope not because I don't wish to have knockout included in my project. Kindly advise

daterangepicker.js:122 Uncaught ReferenceError: ko is not defined
at daterangepicker.js:122
at daterangepicker.js:1207

Hi here, this datepicker is not responsive and even give me wrong icons!

How do I make this responsive without too much css?

Thank you

I want to use this in React JS platform. Is there an npm for this component?

Currently, there is no way to display week numbers in the calendar table. It would be great to add a new column before week days (as shown on the attached image). Thank you!

It can only use with Jquery & knockout ? can't use without knockout?

When I click on for example 31st Dec, I get the 30th Dec value. Furthermore, my observable(knockout) only updates after I change start date

Hello,

have possibility to change language and date format?

Thanks in advance.

It would be great if there were an option to have no date(s) selected for the start and/or end dates. This would allow the user to specify no date range at all, a start date but no ending date, or an ending date with no start date. Essentially, add a clear button to both start and end dates.

How can I change/translate the texts?

Like I have some custom button which I added on the fly, how do I manually close it properly?

I couldn't find a way to set startDate and endDate once I created the date picker component on the DOM.

Please let me know, is there any option to open daterangepicker above input element.
Ex:- like in other daterangepickers there is an option to pass (drops:-below/above) to open.

Hey,

The week no does not get displayed in the week section.

I have made the desired changes in the fork repo(https://github.com/AltamashShaikh/daterangepicker), but in the js file.

Can you check if its helpful and can be merged, I can send a pull request after that

Thanks,
Altamash Shaikh

Can't we use it without knockoutjs ?

When I am passiing period, it is not working
$(".daterangepicker-field").daterangepicker({
forceUpdate: true,
period: ('day' | 'week' | 'month' | 'quarter' | 'year'),
periods:'quarter',
single:true,
callback: function(startDate, endDate, period){
var title = startDate.format('L') + ' – ' + endDate.format('L');
$(this).val(title)
}
});

In the documentation, its stated:

Sets time zone. If you want to use user's computer time zone, pass null

However the code which implements this, will always cast the null into "UTC".
Config.prototype._timeZone = function(val) { return ko.observable(val || 'UTC'); }

So passing null does not have the desired effect, and instead its reverted to UTC.

Hi, many apps use fiscal weeks from Monday to Sunday.

In the examples, its currently has last 7 days, can you please expose Last Work Week (Monday through Sunday)

In the docs, its not clear if two dates start and end are available (to be posted back to server), for e.g. in Standalone & Single how can we get the start and end dates of the selection?. Are there 2 text box inputs?

thanks

how to get range value externally when changing end date? any help?

I'm looking for a timezone aware date range picker. I hoped this one could be it, but unfortunately I need a time picker which this one doesn't provide. It made me think though, why are there timezone settings for this date range picker even?

If I want to change span text when I select the item how to do it ?


Best Regards,
Ziv

Hi,

The period selection option is not working for me at all.Below is my piece of code.
`$(".daterangepicker-field").daterangepicker({
forceUpdate: true,
ranges:{
'Last 30 days': [moment().subtract(29, 'days'), moment()],
'Last 90 days': [moment().subtract(89, 'days'), moment()],
},
periods:['month','quarter','year'],
period: ('month' | 'quarter' | 'year')
},
function (startDate, endDate, period) {
$(this).val(startDate.format('L') + ' – ' + endDate.format('L'))

});`

Below is screenshot

hi,
is there any option to predict month selection.
if i select march is the start of month selection automatically predict april is the end month.

How can I change the calendar to match a company Fiscal Year

Example

Q1 - 10/282017 - 01/27/2018
Q2 - 01/28/2018 - 04/28/2018
Q3 - 04/29/2018 - 07/28/2018
Q4 - 07/29/2018 - 11/03/2018

Amazing plugin!

Only downside I can find is that the custom date inputs are formatted using the American style date mm/dd/yyyy, so it would be nice to choose a custom format such as dd/mm/yyyy.

In period section have lot of options (Days, Weeks, Month, Quarter, Year). How to add financial year in this calendar.

Try to run https://sensortower.github.io/daterangepicker/examples on devices. Dont look nice and impossible to use calender on "daterangepicker attached to a button"

I'm loving this plugin it has almost all the functionalities and the look is also so decent. I implemented this to my application where user has to select the date in a bootstrap modal. Somehow the picker opens up behind the modal fade screen where user can not interact with the plugin. Is there any way I can resolve this?

Regards and thanks for the great work!

Hi, is it possible to disable some dates or date ranges and make mobile responsive

how can i prevent this ? i hope it can behave like this : when i click left only left value changed

https://user-images.githubusercontent.com/56686440/67014986-3820fc00-f10f-11e9-89de-fcdcaba28803.png

Hi
I have attached above the screenshot for reference.

I have made some customization in this plugin and attached screenshot is showing week Period view that means i can select weeks. One whole week is selected upon clicking any row of calendar.
Now,
I had my requirement to set the first day of week according to configuration. Lets say if First day of week is Monday then it should appear as first day and date should be accordingly adjusted. I am facing this issue that week days are rotated correctly but the date is not rotating.

For Eg. 29th Sept is appearing under Monday but it should appear under Sunday. How can I fix this Issue ?

Thanks

Possible to change title in calendar?
Ex: I want change "Year" to "Cal Year"

As of now, binding the daterangerpicker input to an uninitialized knockout observable is not supported.
This makes is hard to use in forms which will be forced to always get/post the default initialized values.
can this restriction be removed?

We're using RiotJS as our framework with RequireJS and can't seem to get this to initialize with jQuery. Does this library support RequireJS?

Add checks to prevent typos & such:

$('input').daterangepicker({period: 'quartre'}); // typo
// should throw an error "invalid period"

Will probably look like this:

Is there any option to limit the difference between to dates? For example I want something that checks if
end.diff(start, 'days') > 365
Then reset the startDate or endDate so the difference will be equal with desired interval.

Hi all,
I am trying to use the datepicker in my website but cannot get it to work. I am including all these libraries:
'moment.min.js', 'moment-with-locales.min.js','timepicker.js','daterangepicker.js', 'daterangepicker.timesupport.js',.
Then I have a simple input tag <input id="date1" /> and a jQuery call $("#date1").daterangepicker();
and nothing shows up, except a TypeError: n.tz is not a function error in the console.
Any help?
Thank you.

Is there an option to edit the quarters (Q1, Q2, Q3, Q4) and also change the first month of the year and hence the span of a quarter.
For eg: I want my year to start in on 1st April and end on 31st March (According to Indian Financial Calender) and Q1 to be replaced by Quarter-1 and Q1 should start on 1st April and end three months after that. Is there a way I can achieve this using this library ?

Hi There

I am wondering if its possible to do something like this in ranges

function cb(start, end) {
    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}

$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
'Decrement Month': [moment(start).subtract(1, 'month').startOf('month'), moment(end).subtract(1, 'month').endOf('month')]
}
}, cb);

var start = moment().startOf('month');
var end = moment().endOf('month');
cb(start, end);