tamble / jquery-ui-daterangepicker

A JQuery UI based date range picker.
MIT License
184 stars 110 forks source link

jQuery 3 or Angular 2 #76

Open HFTSOL opened 7 years ago

HFTSOL commented 7 years ago

Has this been tested with jQuery 3?

We have an Angular 2 app that uses jQuery 3.1.1 and jQuery-UI 1.12.1. When I try to generate the picker, it successfully hides the input and writes the button, but doesn't get much more.


<div class="form-group">
    <label class="inline-title">Date Range:</label>
    <input daterrngepicker=""
           ng-reflect-options="[object Object]"
           ng-reflect-start-date="Tue Jan 10 2017 15:32:07 GMT-0600 (Central Standard Time)"
           ng-reflect-end-date="Thu Feb 09 2017 15:32:07 GMT-0600 (Central Standard Time)"
           style="display: none;">
    <button type="button"
            class="comiseo-daterangepicker-triggerbutton comiseo-daterangepicker-bottom"
            id="drp_autogen0">
    </button>
</div>

In Angular Directive

    ngOnInit() {
        this._picker = jQuery(this.elementRef.nativeElement);
        this._picker.daterangepicker(this.options);

        if(this.options.startDate && this.options.endDate)
            this._picker.daterangepicker('setRange',{
                start:this.options.startDate,
                end: this.options.endDate
            });
    }

Options

{
        initialText: 'Select Range',
        dateFormat: 'mm/dd/yy'
}

Any ideas?

op16 commented 7 years ago

The latest beta works with both jQuery 3.1.1 and jQuery-UI 1.12.1 (save for some small bug which depends on jQuery UI https://bugs.jqueryui.com/ticket/15129)

The HTML for button is created by the widget, so you are not supposed to included it in your source.

HFTSOL commented 7 years ago

Right. The HTML above is the output in the browser. It's not writing the spans into the button, or the classes onto the button.

I updated to the latest beta: https://github.com/tamble/jquery-ui-daterangepicker/releases/tag/0.6.0-beta.1

...same thing. No change.