Converting datetime to time format

Question

Converting datetime to time format

I have a datetime column in the format of YYYY-MM-DD HH:mm:ss.SSS. Is there a way to display only the time in the format of HH:mm:ss.SSS without showing the complete datetime?

I have attempted the following code, but it does not seem to affect the format:

{name: 'somedate', field: 'event_date', cellFilter: 'date:\'HH:MM:SS.SSS\''}

UPDATE

This is how the grid is set up:

$scope.gridOptions = {
    columnDefs: [{name: 'somedata', field: 'event_date'}],
    data: [ {event_date: "2016-03-10 10:10:11.123"}]
}

javascript angularjs angular-ui-grid ng-grid

Answer 1

Answer №1

If you're working with Angular and need to display the time part of a date, it's as easy as using | date: 'HH:mm:ss':

HTML

  <span>{{1288323623006 | date: 'HH:mm:ss'}}</span>

The value 1288323623006 represents the date value field; you can swap it out with your own field name in your code.

Alternatively, you can achieve the same result in your controller by injecting $filter:

var formattedDate = $filter('date')(1288323623006, 'HH:mm:ss');

Here's a complete example:

angular.module('dateFormat', [])
   .controller('ExampleController', ['$scope','$filter', function($scope,$filter) {

     $scope.formattedDate = $filter('date')(1288323623006, 'HH:mm:ss');

   }]);

Answer 2

If you're working with Angular and need to display the time part of a date, it's as easy as using | date: 'HH:mm:ss':

HTML

  <span>{{1288323623006 | date: 'HH:mm:ss'}}</span>

The value 1288323623006 represents the date value field; you can swap it out with your own field name in your code.

Alternatively, you can achieve the same result in your controller by injecting $filter:

var formattedDate = $filter('date')(1288323623006, 'HH:mm:ss');

Here's a complete example:

angular.module('dateFormat', [])
   .controller('ExampleController', ['$scope','$filter', function($scope,$filter) {

     $scope.formattedDate = $filter('date')(1288323623006, 'HH:mm:ss');

   }]);

Answer 3

Answer №2

Pay attention to the format. Ensure it is HH:mm:ss.sss

Answer 4

Pay attention to the format. Ensure it is HH:mm:ss.sss

Answer 5

Answer №3

To update your cell filter, simply modify it as shown below:

cellFilter: 'date:\' HH:mm:ss\''

Answer 6

To update your cell filter, simply modify it as shown below:

cellFilter: 'date:\' HH:mm:ss\''

Answer 7

Answer №4

Alternatively, you have the option to modify it directly within the columnDefs like so:

cellTemplate: "<div>{{grid.getCellValue(row,col) | date:'MM/dd/yyyy'}}</div>"

Answer 8

Alternatively, you have the option to modify it directly within the columnDefs like so:

cellTemplate: "<div>{{grid.getCellValue(row,col) | date:'MM/dd/yyyy'}}</div>"

Converting datetime to time format

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The <a> tag does not lead to a different webpage and cannot be clicked on

Knockout JS: Choosing specific dropdown elements

An issue occurred with the DOMException while trying to execute the 'setAttribute' function on the 'Element': '{{' is an invalid attribute identifier

What is the best way to conceal a canvas or another item?

Custom Sign-in features in NextJS now direct users to the default form for entering login

How to display only a portion of content using UI Bootstrap collapse feature

Utilizing Jquery and Ajax to create a dynamic dropdown selection feature based on dependencies from a JSON file

Combining Jquery with Append to Dynamically Update PHP Variables

The values are not being properly initialized in the componentDidMount() function

What is the best way to showcase an item from an array using a timer?

Enhance the original array of a recursive treeview in VueJS

Uncertainty arises from the information transmitted from the controller to the Ajax function

What is the method for inserting an icon using createElement?

Determine the number of rows in an Ajax-fed datatable (including paginated rows) that have a specific value in a

Showing RSS feed on Vue.js interface

Having Trouble with QR Code Generator Functionality

Avoid activating jQuery functions based on certain screen widths for menu/navigation system

Is there a translation issue affecting Chrome version 44?

The element vanishes from sight after being detached and re-appended

Turn on / off Button Using a Different Button