Introduction

In this article, we will learn how to find a week's start date and end date in an Angular 10 Application.
Prerequisites
  • Basic Knowledge of Angular 2 or higher
  • Visual Studio Code
  • Node and NPM installed
  • Bootstrap
  • ngx-bootstrap
Create an Angular project by using the following command.
  1. ng new Timepicker
Open this project in Visual Studio Code and install bootstrap by using the following command.
  1. npm install bootstrap --save
Now open styles.css file and add Bootstrap file reference. To add reference in styles.css file add this line.
  1. @import '~bootstrap/dist/css/bootstrap.min.css';
To add datepicker we use ngx bootstrap datepicker, so add ngx bootstrap datepicker in this project using the following command.
  1. npm install ngx-bootstrap --save
Now open index.html file and add the following cdn link to add css for datepicker
  1. <link rel="stylesheet" href="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css">
Now create a new component by using the following command.
  1. ng g c Timepic
Now open Timepic.component.ts file and add the following code,
  1. import { DatePipe } from '@angular/common';
  2. import { Component, OnInit } from '@angular/core';
  3. @Component({
  4. selector: 'app-timepic',
  5. templateUrl: './timepic.component.html',
  6. styleUrls: ['./timepic.component.css']
  7. })
  8. export class TimepicComponent implements OnInit {
  9. startdateofweek: any;
  10. Enddateofweek: string;
  11. model: any = {};
  12. date = new Date()
  13. name: string;
  14. Friday: any;
  15. Thruds: any;
  16. mon: any;
  17. Tuesday: any;
  18. Wednedday: any;
  19. Sat: any;
  20. Sun: any;
  21. constructor(public datepipe: DatePipe) { }
  22. ngOnInit() {
  23. this.model.startdate = new Date();
  24. debugger;
  25. }
  26. searchdate() {
  27. debugger;
  28. console.log(this.model.startdate);
  29. let getdate = this.datepipe.transform(this.model.startdate, 'yyyy,M,d');
  30. function startOfWeek(date) {
  31. var diff = date.getDate() - date.getDay() + (date.getDay() === 0 ? -6 : 1);
  32. return new Date(date.setDate(diff));
  33. }
  34. function endofweek(date) {
  35. var lastday = date.getDate() - (date.getDay() - 1) + 6;
  36. return new Date(date.setDate(lastday));
  37. }
  38. var dt = new Date(getdate);
  39. this.startdateofweek= this.datepipe.transform(startOfWeek(dt),'EEEE, MMMM d, y');
  40. this.Enddateofweek=this.datepipe.transform(endofweek(dt),'EEEE, MMMM d, y');
  42. function addDays(date, days) {
  43. const find = new Date(Number(date))
  44. find.setDate(date.getDate() + days)
  45. return find
  46. }
  47. const date = new Date(startOfWeek(dt));
  48. this.mon = this.datepipe.transform(startOfWeek(dt), 'EEEE, MMMM d');
  49. this.Tuesday = this.datepipe.transform(addDays(date, 1), 'EEEE, MMMM d');
  50. this.Wednedday = this.datepipe.transform(addDays(date, 2), 'EEEE, MMMM d');
  51. this.Thruds = this.datepipe.transform(addDays(date, 3), 'EEEE, MMMM d');
  52. this.Friday = this.datepipe.transform(addDays(date, 4), 'EEEE, MMMM d');
  53. this.Sat = this.datepipe.transform(addDays(date, 5), 'EEEE, MMMM d');
  54. this.Sun = this.datepipe.transform(endofweek(dt), 'EEEE, MMMM d');
  55. }
  56. }
Open timepic.component.html file and add the following lines
  1. <div class="container" style="margin-bottom: 10px; margin-top: 10px;">
  2. <div class="col-sm-12 btn btn-primary">
  3. How to Get Week start and end date in Angular 10
  4. </div>
  5. </div>
  6. <div class="container">
  7. <form (ngSubmit)="searchdate()" novalidate>
  8. <div class="col-sm-3 form-group">
  9. <input type="text" #startdate="ngModel" name="startdate" [(ngModel)]="model.startdate"
  10. placeholder="From Date" bsDatepicker bsDatepicker [bsConfig]="{ showWeekNumbers: false }"
  11. [bsConfig]="{ showWeekNumbers: false }" class="form-control" />
  12. </div>
  13. <div class="col-sm-3 form-group">
  14. <button type="submit" class="btn btn-success">Find Date</button>
  15. </div>
  16. </form>
  17. </div>
  18. <div></div>
  19. <div class="container">
  20. <div class=" row" style="margin-top:10px;margin-bottom: 10px;">
  21. <div class="col-sm-6 form-group">
  22. <b> Week Start Day and Date :</b> {{startdateofweek}}
  23. </div>
  24. <div class="col-sm-6 form-group">
  25. <b> Week End Day and Date : </b>{{Enddateofweek}}
  26. </div>
  27. </div>
  28. </div>
Now Open app.module.ts file and add the following code.
  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { FormsModule } from '@angular/forms';
  4. import { AppRoutingModule } from './app-routing.module';
  5. import { AppComponent } from './app.component';
  6. import { TimepickerModule } from 'ngx-bootstrap/timepicker';
  7. import { PopoverModule } from 'ngx-bootstrap/popover';
  8. import { TimepicComponent } from './timepic/timepic.component';
  9. import { DatePipe } from '@angular/common';
  10. import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
  11. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  12. import { GridpipePipe } from './gridpipe.pipe';
  13. @NgModule({
  14. declarations: [
  15. AppComponent,
  16. TimepicComponent,
  17. GridpipePipe
  18. ],
  19. imports: [
  20. BrowserModule,BrowserAnimationsModule,FormsModule,
  21. AppRoutingModule,TimepickerModule.forRoot(), PopoverModule.forRoot(), BsDatepickerModule.forRoot(),
  22. ],
  23. providers: [DatePipe],
  24. bootstrap: [AppComponent]
  25. })
  26. export class AppModule { }
Now open app.component.html file and add the following code,
  1. <app-timepic></app-timepic>
Now run the project by using the following command: 'npm start
Now select a date from the datepicker and click on Find date button.
Now we got the start and end date of the week we selected.
Now add the following code in Timepic.component.ts to get the selected date and week details
  1. <div class="container" style="margin-bottom: 10px; margin-top: 10px;">
  2. <div class="col-sm-12 btn btn-primary">
  3. How to Get Week start and end date in Angular 10
  4. </div>
  5. </div>
  6. <div class="container">
  7. <form (ngSubmit)="searchdate()" novalidate>
  8. <div class="col-sm-3 form-group">
  9. <input type="text" #startdate="ngModel" name="startdate" [(ngModel)]="model.startdate"
  10. placeholder="From Date" bsDatepicker bsDatepicker [bsConfig]="{ showWeekNumbers: false }"
  11. [bsConfig]="{ showWeekNumbers: false }" class="form-control" />
  12. </div>
  13. <div class="col-sm-3 form-group">
  14. <button type="submit" class="btn btn-success">Find Date</button>
  15. </div>
  16. </form>
  17. </div>
  18. <div></div>
  19. <div class="container">
  20. <div class=" row" style="margin-top:10px;margin-bottom: 10px;">
  21. <div class="col-sm-6 form-group">
  22. <b> Week Start Day and Date :</b> {{startdateofweek}}
  23. </div>
  24. <div class="col-sm-6 form-group">
  25. <b> Week End Day and Date : </b>{{Enddateofweek}}
  26. </div>
  27. </div>
  28. </div>
  29. <div class="container">
  30. <div class="container" style="margin-bottom: 10px; margin-top: 10px;">
  31. <div class="col-sm-12 btn btn-primary">
  32. Select Date Week Days
  33. </div>
  34. </div>
  35. <ul class="list-group">
  36. <li class="list-group-item">Monday:<b> {{mon}}</b></li>
  37. <li class="list-group-item">Tuesday:<b>{{Tuesday}}</b></li>
  38. <li class="list-group-item">Wednedday:<b>{{Wednedday}}</b></li>
  39. <li class="list-group-item">Thursday :<b> {{Thruds}}</b></li>
  40. <li class="list-group-item">Friday : <b>{{Friday}}</b></li>
  41. <li class="list-group-item">Saturday <b>:{{Sat}}</b></li>
  42. <li class="list-group-item">Sunday :<b>{{Sun}}</b></li>
  43. </ul>
  44. </div>
Now run the project by using the following command: 'npm start'

Summary

In this article, we learned how to find a week's start date and end date of a select date in Angular applications.