Date format in Bootstrap Date Picker in Angular 6

Question

In Angular 6, I apply date picker with a bsDaterangepicker class for a date range.

<input type="text" (ngModelChange)="dateFilterChanged($event)" [(ngModel)]="myDateField" value="{{ myDateField | date:'yyyy-MM-dd' }}" [bsConfig]="{dateInputFormat: 'yyyy-MM-dd'}" bsDaterangepicker>

and emit the value with the following function and emitter:

dateFilterChanged(filterValue: string) {
    console.log('filterValue', filterValue);
    this.dateFilterChanged.emit(filterValue)
}

The problem is, the format of the emitted date is not "yyyy-MM-dd", but a gmt string:

[Wed May 01 2019 14:04:12 GMT+0300 (GMT+03:00), Sat Jun 15 2019 14:04:12 GMT+0300 (GMT+03:00)]

How can I get emit the date value in "yyyy-MM-dd" format?

Aarsh · Accepted Answer · 2019-05-10 11:14:05Z

4

You can use date pipe like this :

{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}

For more information visit this link :

https://angular.io/api/common/DatePipe

you can use it in typescript also ::

import { DatePipe } from '@angular/common';

constructor(private datePipe: DatePipe,){
}
// in your function 
 element.last_assessment_date = this.datePipe.transform(element.last_assessment_date, 'yyyy-MM-dd');

answered May 10, 2019 at 11:14

Aarsh

2,6152 gold badges18 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aarsh Over a year ago

why you having two dates in it "Wed May 01 2019 14:40:27 GMT+0300 (GMT+03:00),Sat Jun 15 2019 14:40:27 GMT+0300 (GMT+03:00)" only send one it will work @tolga

OM PRAKASH Over a year ago

It's dateRangePicker, so it has two dates in it (From and To) and event emits these dates as an array.

Jagan Mohan Bishoyi · Accepted Answer · 2019-05-11 06:00:16Z

1

You can use Date Pipe for this.
Example:

let dateObj = Your object;

And use the Pipe like below.

{{ dateObj | date }} // output is 'Jun 15, 2015'

Or there is a JS library called moment.

You can get that from https://momentjs.com/ and follow the instruction to install it. And they have mentioned all the Format Dates. Just pass the GMT string to moment() and you will get your desired format.

edited May 11, 2019 at 6:00

user3956566

answered May 11, 2019 at 5:34

Jagan Mohan Bishoyi

666 bronze badges

Comments

Hitesh Shukla · Accepted Answer · 2019-05-15 11:04:21Z

0

You can get that from https://momentjs.com/ and follow the instruction to install it. And they have mentioned all the Format Dates. Just pass the GMT string to moment() and you will get your desired format.

answered May 15, 2019 at 11:04

Hitesh Shukla

1

Collectives™ on Stack Overflow

Date format in Bootstrap Date Picker in Angular 6

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related