Modify the ngb-timepicker formatting to output a string instead of an object

Question

Modify the ngb-timepicker formatting to output a string instead of an object

I am currently working on modifying ngb-timepicker so that it returns a string instead of an object. Right now, it is returning the following format:

{
  "hour": 13,
  "minute": 30
}

However, I want it to return in this format:

"13:30"

This is the HTML code I have used:

<div class="calendar"> <ngb-datepicker #dp 
[(ngModel)]="model"></ngb-datepicker>

<ngb-timepicker [(ngModel)]="time"></ngb-timepicker>

For the datepicker, I was able to convert the object into a string using the following method:

 constructor(private dateFormatter: NgbDateParserFormatter) {
const string_date = this.dateFormatter.format(this.model);
}

Is there a similar NgbDateParserFormatter function that can be used for time?

javascript angular typescript bootstrap-4

Answer 1

Answer №1

If you find yourself needing to go beyond setting a data-bound property with the [(ngModel)] syntax, consider using the expanded form instead. While the property binding [ngModel] handles updating the input DOM element, the event binding (ngModelChange) notifies external sources of any changes in the DOM.

Here's an example:

<ngb-timepicker [(ngModel)]="time" (ngModelChange)="onTimeChange($event)"></ngb-timepicker>
    <hr>
    <pre>{{newTime}}</pre>

In the Component file:

export class AppComponent  {
  name = 'Angular 6';
  public newTime:string='13:30';
  time = {hour: 13, minute: 30};
  
  onTimeChange(value:{hour:string,minute:string})
  {
     console.log(value)
     this.newTime=`${value.hour}:${value.minute}`;
  }
}

Check out the Live Demo for more details.

Answer 2

If you find yourself needing to go beyond setting a data-bound property with the [(ngModel)] syntax, consider using the expanded form instead. While the property binding [ngModel] handles updating the input DOM element, the event binding (ngModelChange) notifies external sources of any changes in the DOM.

Here's an example:

<ngb-timepicker [(ngModel)]="time" (ngModelChange)="onTimeChange($event)"></ngb-timepicker>
    <hr>
    <pre>{{newTime}}</pre>

In the Component file:

export class AppComponent  {
  name = 'Angular 6';
  public newTime:string='13:30';
  time = {hour: 13, minute: 30};
  
  onTimeChange(value:{hour:string,minute:string})
  {
     console.log(value)
     this.newTime=`${value.hour}:${value.minute}`;
  }
}

Check out the Live Demo for more details.

Modify the ngb-timepicker formatting to output a string instead of an object

Answer №1

Similar questions

Leveraging AJAX for managing multiple selection options without the need for a submit button

New update in Fullcalendar v2: Enhancements to dayRender function for agenda view and agenda

Error: Attempting to access the 'SearchBox' property of an undefined variable is not allowed

Getting an HTML element by its ID that was passed from the ng-init directive in Angular can be achieved

Is it possible to integrate ngx Pagination with Bootstrap?

EasyWaySaveArchive in ninja training - mastering the art of retrieving components

What is the best way to call upon a necessary module from various files?

Is it true that Redux Saga's select function returns mutable state?

Update the navigation logo while scrolling

Error: JSON data couldn't be processed due to an unexpected end, resulting in a SyntaxError at JSON.parse()

Obtain cell information when clicking on a specific field within a material-table

Creating an HTML table with collapsed borders and hidden rows/columns using the `border-collapse

What could be the reason for angularjs not functioning as expected?

Incorporating a Drawer and AppBar using Material-UI and React: Dealing with the error message "Unable to access property 'open' of null."

Why is it that my JQuery sliders appear perfectly fine when viewed locally, but fail to show up when accessed on

Update the object with fresh data once the XML data is transformed into JSON format

Transferring data between JavaScript and PHP

Attempting to modify the state within a nested object located in an array by using json data

What is the best way to extract and retrieve the most recent data from an XmlHttpRequest?

I am currently working on building a single-page application using React and Vite. However, I am facing an issue where the page is not rendering anything and just displaying a blank screen. Can anyone provide guidance on troubleshooting and