1

Demo: https://stackblitz.com/edit/angular-bife8z-px13fl?file=app%2Fdatepicker-basic.html

I have added Day(Sunday) as static text, i want this to be changed according to date selection form calendar.

ItzMe_Ezhil
  • 1,276
  • 2
  • 11
  • 22
  • https://stackoverflow.com/questions/53764233/ngb-datepickerng-bootstrap-display-day-with-date-as-dd-mmm-yy-example-output (it's your old question) – Eliseo Dec 13 '18 at 20:25

2 Answers2

2

You can use the calendar to get the day of the week and have a Dictionary which stores the Day names.

weekDays = {
  1: 'Monday',
  2: 'Tuesday',
  3: 'Wednesday',
  4: 'Thursday',
  5: 'Friday',
  6: 'Satarday',
  7: 'Sunday'
}

Selected Date is: <b>{{weekDays[calendar.getWeekday(model)]}}

https://stackblitz.com/edit/angular-bife8z-bftzuu?file=app%2Fdatepicker-basic.html

Infact you can have a variable for day which gets set in the setter of the model variable.

  selectedDay: string = '';
  set model(val) {
    this._model = val;
    this.selectedDay = this.weekDays[this.calendar.getWeekday(this.model)]
  }

  get model() {
    return this._model;
  }

 Selected Date is: <b>{{selectedDay}}</b> <br>
Ashish Ranjan
  • 12,760
  • 5
  • 27
  • 51
  • How to show month full name instead of Number (Example: "January","February"..."December"). I want date format is Friday, 12-December-2018. – ItzMe_Ezhil Dec 14 '18 at 08:26
  • 1
    @Ezhil-UIDeveloper: Then you can probably use the same logic of keeping the month names in a javascript object and mapping the names with `allMonths[model.month]` – Ashish Ranjan Dec 14 '18 at 09:10
  • I tried as u mentioned its's working. thanks. Demo: https://stackblitz.com/edit/angular-bife8z-xnb8yq – ItzMe_Ezhil Dec 14 '18 at 09:59
1

Try this:

component html

Selected Date is: <b>{{getDay(model)}}</b>

component ts

  getDay(model){
    let date = new Date(Date.UTC(model.year, model.month - 1, model.day, 0, 0, 0))
    let days = new Array( "Monday", "Tuesday", "Wednesday", "Thursday",  "Friday", "Saturday", "Sunday" );
    let day = days[date.getDay() - 1]
    return day
  }
Jackson Vaughan
  • 622
  • 6
  • 17
  • 1
    NOT use new Date(model.year,model.month-1,model.day). If you live in GTM+1 you get a day less, use **new Date(Date.UTC(date.year, date.month - 1, date.day, 0, 0, 0))**, or use new Date(model.year,model.month-1,model.day **,12** ) – Eliseo Dec 13 '18 at 20:19
  • @Eliseo Thanks for the catch, added your fix. – Jackson Vaughan Dec 13 '18 at 20:29