Display the date in the user interface grid table

I've integrated ui-grid in my project to showcase data along with dates.

An example of a date fetched from an ajax call would be:

 DateReview='06/25/2016'

The current format being mm/dd/yyyy for display purposes.

The column definition in the ui-grid is as follows:

   name: 'Start date', field: 'DateReview', cellTooltip: true, headerTooltip: true, width: 90 }

I am looking to have the date displayed in the ui-grid in the following format:

dd/mm/yyyy 

Would appreciate any suggestions on an elegant solution to change the format of the displayed date within the ui-grid column.

Answer №1

Check this out:

{ category: 'Project name', key: 'DateStart', tooltipCell: true, tooltipHeader: true, size: 120, format: 'date', filterCell: "date:\'MM/dd/yyyy\'"}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

An issue occurred with player.markers not being recognized as a function when trying to utilize videojs markers

I am trying to add markers to my videojs player timeline. I have successfully implemented this feature a few months ago in a different project, but now when I try to use it again, I am encountering errors in the console and unable to see the markers on the ...

Unable to retrieve JSON data for the JavaScript object

I have been working on creating a JS object in the following manner var eleDetailsTop = new Array(); var j = 0; var id = "ele"+j; eleDetailsTop[id] = {id: id, size : "40%", sizeLabel : 12, type : "image", title : "Image& ...

Checking for offline status in a Cordova app using Angular

I have implemented the following code to determine whether my Cordova application is online or offline. var networkState = navigator.connection.type; var states = {}; states[Connection.UNKNOWN] = 'Unknown'; states[Connection.ETHERNET] = ' ...

What are some ways to detect if JavaScript is enabled on the client side?

In the process of creating a web application, I have structured my code to dynamically generate JavaScript functions using PHP. However, it has come to my attention that if JavaScript is disabled on the client side, my application will not function as in ...

Load a webpage using javascript while verifying permissions with custom headers

Seeking guidance as a novice in the world of JavaScript and web programming. My current project involves creating a configuration web page for a product using node.js, with express serving as the backend and a combination of HTML, CSS, and JavaScript for t ...

Using jQuery to organize object properties based on the value of another property

Within my collection, I have an array of objects structured as shown below. [ {"rel_id": 1,"forward_flag": true,"asset_id":5,}, {"rel_id": 1,"forward_flag": true,"asset_id":8}, {"rel_id": 1,"forward_flag": false,"asset_id":3}, {"rel_id": 2,"forwar ...

Troubleshooting problem with Angular UI-Grid cell templates

Currently, I am utilizing angular’s ui-grid feature which allows me to make the qty cell editable by double clicking on it. However, I need it to always be editable and display as an input type text. Although I have tried implementing this change, when ...

Setting default property values in a React component using Typescript

   Is there a way to define default property values in React components when using Typescript? I came across a post on SE suggesting the use of a static class variable called defaultProps with key-value pairs for properties. However, this method didn&a ...

Convert a JSON array with a single element into a valid JavaScript object

Within my programming scripts, I frequently utilize PHP arrays with numeric keys. However, these keys are not necessarily sequential from 0 to n; they can be randomly chosen. Specifically, I am working on a script that organizes scheduled events at specifi ...

Highlighting text in React using hover effects on list elements

Imagine having HTML / JSX structured like this: <ul> <li>First point in list</li> <li>Second point in list</li> </ul> and the goal is to highlight a contiguous range that spans multiple list items: <ul> < ...

This error message in AngularJS indicates that the argument 'fn' is not being recognized as a function

I am currently working with angularjs and typescript and I am attempting to create a directive in the following manner: Below is my controller : export const test1 = { template: require('./app.html'), controller($scope, $http) { ...

Having issues with angular-file-upload failing to include the file in the request

I am currently using angular-file-upload in order to upload an image to a server that is utilizing Node and Express 4.0. However, I am encountering difficulties in accessing the file data on the server. Below is the relevant code snippet: <input type= ...

Troubleshooting a problem with Angular routing when trying to access a specific URL using

My main objective is to enable users to view products by clicking on the item itself. For each product item displayed in main.html, the URL format is like this... <a href="/products/{{ product.id }}">{{ product.title }}</a> For instance, when ...

Creating an HTML5 video tag with bearer authentication using a WebAPI: The ultimate guide

My ASP.NET WebAPI requires bearer authentication, and most of my requests towards the API follow this format: GET http://localhost:29080/api/v1/users/me HTTP/1.1 Host: localhost:29080 Connection: keep-alive Accept: application/json, text/plain, */* Origin ...

Is there a way to implement a directive wrapper for ng-grid that allows the grid options to be specified using a directive attribute?

My goal is to create a reusable directive wrapper for ng-grid, where I can dynamically apply the ng-grid options through the use of an attribute. Below is the basic structure of the code that almost achieves what I am looking for: angular.module('my ...

Seeking assistance to prevent data duplication when transferring information from list1 to list2 in React.js

As I work on developing two lists in React.js, I encountered an issue with avoiding repetitions when transferring items from list-1 to list-2. I need assistance creating a function that prevents duplicate items in list-2 while also ensuring that the items ...

"findByIdAndUpdate continues to work successfully even when the request body includes parameters that are not defined in

Referenced from This particular tutorial on MERN stack development... In my mongoose schema, I have defined 4 fields: const mongoose = require('mongoose'); const Schema = mongoose.Schema; let Todo = new Schema({ name: { type: String ...

The functionality of changing the category in the second carousel slider on click using JavaScript appears to

Creating a bootstrap carousel slider that dynamically changes based on the selected category. For example, clicking on the hammer category will display only hammer images, while selecting the compass category will show compass images. Everything worked sm ...

Conceal the header and footer during the loading of particular pages

For my Angular 1.x application, I needed a way to hide the header and footer on specific pages. To achieve this, I added a 'navigateOut' data property to my state definitions. Using ng-if in my template, I was able to show/hide elements such as t ...

Tips for customizing the appearance of date circles and text in Vue V-Calendar.io

On v-calendar.io, there is a demo showcasing the correct display where the date "2018-01-01" has a red background and dark text: However, my display does not match that. I have included Vue.js and v-calendar through CDN, and the page is formatted in HTML ...