tamble / jquery-ui-daterangepicker Goto Github PK

Hi, I figured out that when I call the clearRange() method, it calls the reset() method, and it is passing an object inside the jQuery val() method ({start: null, end: null}), and this is causing a [object Object] to appear where the val should be a string not an object.

I think that it's better pass the object as string ('{start: null, end: null}') will fix.

Thanks!

I've got an example at http://git.digitalredefined.com/ that is using the plugin and to disablel unavailable days, I'm using a function called by beforeShowDay. When I don't use the method, I am able to select a date range. But, when I use the method I can only select a single day. No errors in console and method working as designed. Any help/thoughts appreciated.

Jim

Hi,

Awesome job so far!

I apologize in advance for posting here but I was unable to find any other way to contact for support.

How does this work with standard jQuery validation rules?

First off, great widget - just what I've been looking for!

However, from a UX perspective, it would be better if the "Clear" button didn't close the date range picker widget. It should just call clearRange() and not close() as well.

Stella

The mask is not destroyed along with the datepicker when calling destroy. You can see this in action on the example page by opening the developer tools and testing the Init and Destroy sample. Re-init creates a new one filling the DOM when unused elements.

I think there's something in bootstrap that makes the replacement of the textfield not work as expected.

Not able to make dateRangePicker read an observable in knockout. I am trying to assign a single date to dateRangePicker http://jsfiddle.net/harsh611/jtj7kemj/12/

Hi, I don't know whether is this the right place to ask for help.

I have found your plugin on http://www.jqueryscript.net/ and I realized that I can only use the jQuery core v1.9.0 only.

1. Would you be able to help me on this issue? I am using v1.12.0 for my entire webpage.
2. If I have selected the dates, am I right to say that I have to take the value on the ui-button-text span class?

Thanks for your help in advance! =)

Looking forward to hear from you soon.

Is it possible to change the start date of the week from Sunday to Monday? Because the option "last 7 days" selects the week from Monday till Sunday and the week is from Monday till Sunday in many countries, too.

Hi just wondering if there were plans to wrap this for angular js?
Cheers,
Tom

I am unable to call or instantiate the date picker using Require JS:
How can I use this with Require JS?

$(function() {
    $('#e2').daterangepicker({
        datepickerOptions: {
            numberOfMonths: 2
        }
    });
});

Like this:

require(['jquery', 'jquery-ui', 'moment', 'comiseo.daterangepicker'], function ($, moment) {

$(function() {
    $('#e2').daterangepicker({
        datepickerOptions: {
            numberOfMonths: 2
        }
    });
});

});

I want a reference to the specific daterangepicker (or its original element) when options.onOpen or options.onChange are fired. My handler has no way to know which picker called it. The "this" variable refers to the options object, but there's no way to get from there to the actual widget or element. Am I missing something?

It would be awesome to have such an option to auto-apply when user selects range manually. Also with this option enabled there is no need in drawing buttons 'Apply' and 'Cancel'.

I wanted to change the names of days into another language.
I tried this:
$("#dayA").daterangepicker({
dayNamesMin: ["Nd", "Pn", "Wt", "Śr", "Cz", "Pt", "So"],
...
});

The change names aren't display. I have still old names day.
When I change the jQuery-UI library then changes are visible.

Gratulations for good plugin. I like it very much (:

To stimulate adoption and increase ease of deployment during production, registration at a CDN like https://cdnjs.com is useful.

I'm using this date range picker in an asp.net website. On my aspx page I have the date picker and an asp.net label. When the user selects the date range how can I automatically (similar to text_changed event) run my vb.net server-side code which, among other things, puts a message in the label based on their selection, such as "You selected the date range: 1/1/2015 thru 2/3/2015"? Thanks!

Hello... when I added this plugin, this eror is displaying:

TypeError: $menu.menu(...).data(...) is undefined

I am using bootstrap and for some reason, menu plugin is not being loaded correctly, so, the question is, is it possible to make the menu not to be displayed?

Thanks
Jaime

I'm not sure what's changed, as I'm still using the same versions of both daterangepicker and moment.js, but now any time I try using the daterangepicker, I get the following error:

"Deprecation warning: moment().subtract(period, number) is deprecated. Please use moment().subtract(number, period)."

I have since tried updating both daterangepicker and moment.js to the latest versions, but the issue remains.

When the user finishes picking the dates, I want to submit the form:

This code works, but I have to wait a while then submit the form:

onClose: function () { setTimeout(function(){$('form#frmDate').submit();}, 3000); }

At times, this code does not insert any data into the form.

onClose: function () { $('form#frmDate').submit(); }

Can this be fixed, or is there a more reliable way to submit the form when the user is done picking dates?

Currently a selected range should be 'applied' to actually update the value of the <input/> element.

In some situations it is useful to not rely on the "Apply" button, for example when no such button is used. Is it possible to configure the DateRangePicker in such a way that it automatically applies the selected DateRange when the end date is selected? Some kind of autoApplyOnSelectRange: true option would be nice...

I want to set the Min date and dates before that should be disabled. I tried
datepickerOptions: {
minDate: '2015-07-01',
maxDate: 'Today'
}

'Today' is working but minDate is not working

Besides, the preset items on the left, is there support for picking a single date within the date range picker? Yes, i know how that sounds... I would like to avoid using 2 different plugins for date/date range.

Thank you for your efforts.

Hi,
I want to set a default range date when I initialize the plugin. Can you help me? I can't get it working.

Please add onClear() to it....

Thanks for that....

Added to datepickerOptions as so and no adjustment. Am I missing something?
datepickerOptions : {
initialText : 'Select By Date...',
monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
numberOfMonths : 1,
minDate: 0,
maxDate: 180,
}

beforeShowDay caters for setting a tooltip by returning an optional third value in the array returned. The tooltip is currently not being displayed.

is there anyway to display it as inline mode?

Can you tag a new version as indicated in this commit 008fbcd? 👍

How can I prefil with a default value from PHP ?

I thought that working someting like :

<<<

you're passing onSelectDay callback to jQuery UI datepicker here, but there is only onSelect.

Close button in 'Programmatic Control' is kinda useless: you can't trigger it's click neither clicking it (you are clicking overlay) nor with keyboard (pressing shift+tab also closes drop-down).

My use case: Setting birth dates for patients in an application.

When I'm initializing the datepicker I set singleDatePicker: true and then manually set the start date through ('daterangepicker').setStartDate(new Date(-1213123412341));. This fails to set the year properly and you wind up with 0000 as your year value. If however you have singleDatePicker as false, it correctly set's the year.

To stimulate adoption and increase ease of installation during development, a bower.json file would be useful.

I would send a PR but I am confused about what name you would prefer for the package:

• tamble/jquery-ui-daterangepicker
• comiseo/jquery-ui-daterangepicker

While it is possible to do some customization of onSelectDay with current onSelect callback, the resulting range selection cannot be customized. One can think of use cases where a different implementation might be more appropriate. In many travel booking sites it is possible to modify one end of the selection range while keeping the other end unchanged. I recommend to keep the existing implementation as a default but allow it to be overwritten.

The UI for the plugin is great. I would love to see support for time range selection as well.

initialText only works once, and after that, it's not possible to specify different text for each button.

In order to use this plugin with HTML5 native dialogs, widget node should be placed within <dialog> (Because dialog overlays whole page regardless of z-index). It could be possible with an option appendTo.

How to use this plugin in angular ?

I'm using the widget on a single page app that changes between different reports. We have different date ranges of data for different reports, and I can't find a way to change the minDate and maxDate after the calendar has been created. Alternatively, if there is a way to update datePicker options after the creation of the daterangepicker, please add documentation to the site that says how. Thanks, awesome widget.

Hi, how could set a default date using the plugin? because i need set initial date as today minus 7 days and the end date as today. Is this posible?

When setting the datepickeroption 'defaultDate', the widget is being displayed with the current date instead of the 'defaultDate' .

To reproduce

1. set the defaultDate to '01/03/2016'
2. see that the calendar is displayed showing the current date instead.

I am having the same issue as described in ISSUE8 (button not populated)
#8

On the cms/framework I am using jquery and jquery ui are part of the core interface and bootstrap is part of the theme. Therefore I cannot re-order as described in the solution to Issue8.

For a possible work around; what is the best way to initialise a daterange picker without it automatically converting the input field into a trigger button?

I want to use my own trigger button and use events to handle date range changes.

            $("#date_search_input").daterangepicker({
                onChange: function() {
                  //do something cool
                }
            });

    $("#date_search_trigger").click(function () { 
        //open the picker
        $("#date_search_input").daterangepicker("open"); 
        return false; 
    });

Because the daterangepicker loads its dialog relative to the position of the generated button I cannot hide the button, else the dialog goes off on one.

It would be better if the date picker dialog loaded relative to the element that triggered it. So with above example in mind, if ("$date_search_trigger) clicked, load it next to that. This along with suppression of the automatically generated button would be an acceptable solution in this case.

Thoughts?

Hi,

Is it possible to have a range selected on load, for instance have "month to date" displayed when the page is loaded?

Thanks

Version 0.4.3

Would it be possible to add an onClear event to trigger when the clear button is used? This could function in a similar way to how onChange is implemented.

Hello, first of all, awesome plugin. Really a great work.
This is more like a request. Is it possible to change months and years like UI datepicker changeMonth and changeYear options?

I am not sure why but popup in my website is not position below the element but rather at the bottom of the screen. I am using the latest version, the css file is loaded.

In the demo page the element has additional top and left css style applied to it that is computed, but mine does not. There are no JS errors in the console.

Add a new option, impliedBehaviorOnClose, with possible values 'None' (default, for backwards compatibility) and 'Cancel'. This allows for more flexibility instead of PR #40.

Is there a way to add a preset date that would be the same as the original date as passed in via

$("#e2).daterangepicker("setRange", {start: sd, end: ed} )

I cannot see where the initial values are passed in.

Thanks
RL99

With the latest releases of moment.js the 'moment' global is no longer exposed. This means that datepicker cannot use these most recent versions (at least not directly).

I'm not sure what I'm doing wrong, but after adding your plugin to my site, I can see that the code is triggering, and the input box is being hidden, and replaced by a button, but the button is tiny and empty.

Clicking on the button makes the date range selector appear, so I know at least that part of it is working.

Looking at the generated buttons on your example site, I can see that the generated button HTML looks something like this:

<button aria-disabled="false" role="button" id="drp_autogen0" class="comiseo-daterangepicker-triggerbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-secondary comiseo-daterangepicker-bottom" type="button">
  <span class="ui-button-text">Select date range...</span>
  <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
</button>

But the button html being generated on my site is:

<button type="button" class="comiseo-daterangepicker-triggerbutton comiseo-daterangepicker-bottom" id="drp_autogen0">
</button>

notice no span tags.

Any idea what I'm doing wrong? Thank you.

PS, I don't know if this is related, but when I first installed it, it failed to trigger complaining that .moment wasn't defined, but I fixed this by including http://momentjs.com/