Working with Date Formats and Conversion in Spring Boot and Angular

Working with Date and Time formats is one challenge faced by programmer. Both experienced and newbies have encountered this issued at some point. So now I would clarify and explain how to manage date and time across applications. We’ll focus on Spring Boot and Angular.

 

Date and Time Format in Spring Boot

Generally, we build out API in Spring Boot, then build the UI with Angular. Perhaps you also my used React, Vue or Thymeleaf for UI.

The rule of thumb is:

‘in Java with Spring Boot, always use LocalDateTime type if you want to store date, time or datetime variables. This is shown below:

private LocalDateTime appointmentTime;

In this way, the variable can be converted as required.

 

DatePicker in Angular

For me, I use the ngbDatePicker. This comes from the NgbModule. The complete markup for the ngbDatePicker is given below.

<div class="input-group  col-sm-12">
  <input class="form-control" placeholder="yyyy-mm-dd">
  <div class="input-group-append">
    <button 
      class="btn btn-outline-secondary calendar"
      (click)="d.toggle()"
      type="button"><i class="fa fa-calendar"></i></button>
  </div>
</div>

This piece of code shows the datepicker in the figure.

DatePicker in Angular from NgbModule

DatePicker in Angular

Now we can bind the selected date to a model variable by adding the following attributes to the input control like so:

    <input class="form-control"
           placeholder="yyyy-mm-dd"
           name="appointmentTime"
           [(ngModel)]="appointmentTime"
           ngbDatepicker #d="ngbDatepicker">

With the above code, the selected date is bound to the appointmentTime variable. The #d would help you pass the value to a function in case you want to perform some event when a date is selected. But we would not do this.

Also notice the placeholder “yyyy-mm-dd”. You may choose to change this.

Note: to use NgbDate in your Angular application, you need to add ng-bootstrap. See code below

ng add @ng-bootstrap/ng-bootstrap

 

Getting Selected Date from DatePicker

Now assuming a user have selected a date, and submits the form, how do you handle this? Remember, the selected date is now available at the appointmentTime variable. So if you  check the appointmentTime, you’ll have an NgbDate object. This is not the same as Date! You’ll have to convert NgbDate to Date using Date() function like so

 Date myDate = new Date(
      appointmentTime.year,
      appointmentTime.month,
      appointmentTime.day);

With this, you then have a real Date object. Also, you can pass this date to an API via a HTTP request. Or even perform other date-related operations.

 

Setting Selected Date of DatePicker

You may want to set the initial value of the NgbDatePicker. Or maybe set the date based on a date returned from an API. To achieve, this you have to reverse the same operation for getting selected date. You need to convert a Date object to an NgbDate object before you assign it to the NgbDatePicker. The code below does sets the selected date to today’s date.

    const today = new Date();
    this.appointmentTime = new NgbDate(
      today.getFullYear(),
      today.getMonth() + 1,
      today.getDate());

We add 1 to the month since the month array indexes starts from zero. Since there is a two-way binding between the appointmentTime and the DatePicker DOM, this code would simply make the DatePicker display the today’s date.

 

Receiving Date in an API

Date object is sent from Angular UI and is supposed to be assigned to LocalDateTime in the API. Therefore, the code for the conversion is given below:

DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss.SSSX");
LocalDateTime newDate = LocalDateTime.parse(date, formatter);

I would like to stop here and now make a video to explain all of this. I think, that would be clearer. Please check my channel to watch the video on how all of this plays out.

Kindson The Tech Pro on YouTube