valor-software / ngx-bootstrap

Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)
https://valor-software.com/ngx-bootstrap
MIT License
5.53k stars 1.69k forks source link

DateRangepicker uses input format "YYYY-MM-DD" and when manually edit to a Valid Date, tab out clears the input value #4773

Open angelayanpan opened 5 years ago

angelayanpan commented 5 years ago

Bug description or feature request:

[bsConfig]=  "{ rangeInputFormat : 'YYYY-MM-DD', showWeekNumbers: false }

This does format the date range correctly. however when trying to manually change one of the date into a valid date. For example "2018-11-05 - 2018-11-06" to "2018-11-05 - 2018-11-07".

Tab out( click anywhere outside the input), the input value will be cleared.

If I comment out the rangeInputFormat, the issue is not there. I can go in and edit the input value, tab out and still see the input there.

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: ^3.0.1

Angular:^6.1.2

Bootstrap: ^4.1.1

Build system: Angular CLI, System.js, webpack, starter seed:

Angular CLI

stary71 commented 5 years ago

Try this:

[bsConfig]= "{ rangeInputFormat : 'YYYY-MM-DD', dateInputFormat: 'YYYY-MM-DD', showWeekNumbers: false }

jonrimmer commented 5 years ago

The problem is this line: https://github.com/valor-software/ngx-bootstrap/blob/development/src/datepicker/bs-daterangepicker-input.directive.ts#L157

BsDaterangepickerInputDirective is using the dateInputFormat setting to parse the date, instead of rangeInputFormat.