How do I format the date in an Angular UI DatePicker?

I have been utilizing the angular.ui DatePicker feature.

http://angular-ui.github.io/bootstrap/#/datepicker

According to the documentation:

"Everything is formatted using the date filter and thus is also localized."

I am struggling to understand how to apply the date filter to control the date format set in the model.

When using the DatePicker, the date format set in the model appears as follows:

"2013-09-07T03:18:43.000Z"

However, for serialization with Grails, I need my date format to be like this:

"2013-09-07T03:18:43Z"

Is there a way to configure the DatePicker to generate this specific date format? Or do I need to handle this on the server side since it is a JavaScript date? Ultimately, my goal is to send:

"2013-09-07T03:18:43Z"

within a JSON put request to the server.

Any help would be greatly appreciated!

javascriptangularjsgrailsdatepicker

Answer №1

One method for converting the default ISO date format to a custom format on the client side is by following this specific approach which removes milliseconds.

Alternatively, if working on the server side (using Grails), you can convert the string to your desired format using the code snippet below:

Date.parse("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'", "2013-09-07T03:18:43.000Z")
    .format("yyyy-MM-dd'T'HH:mm:ss'Z'") 

//output will be "2013-09-07T03:18:43Z"

In case you are storing a Date object instead of a String, simply utilize Date.parse(..) without the need for .format.

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

Need help setting up a time-based query in Laravel? Here's how to schedule it!

I am currently using the following query to update a status value. public function updateStatus(Request $request) { $customer = Customer::findOrFail($request->user_id); $customer->status = $request->status; $customer->new_customer_s ...

javascriptphplaravellaravel-5bootstrap-4

AJAX is not displaying the expected output

Seeking help on calling a PHP method from JavaScript to query a database and integrate the results into JS functionality. The current 'console.log(output)' in my Ajax returns: "array (size=1) 'action' => string 'getResults&apos ...

javascriptphpmysqlajax

Listening on TCP port for HTML5 Websocket communications

I have a desktop application that is communicating with my asp.net mvc app. The desktop application publishes data on port:10000 which I need to be able to listen to in the browser. Below is the code snippet: <html> <head> <s ...

javascriptgoogle-chromewebsockettcp

What is the best way to dynamically assign an id to an ajax Actionlink in ASP.NET?

I have a collection of items and each item contains an Ajax.ActionLink. I would like to dynamically set the id for each action link based on the item's id. @Ajax.ActionLink("Join","ajaxview", new{id = tour.TourId}, new { HttpMethod = "GET", Insertion ...

javascriptjqueryasp.netajax

Previewing Printed Forms in JSF

I am working with a JSF form on a view *.jspx page that contains approximately 20 fields. The form includes a print preview button that opens a new browser window and displays the form in read-only mode. To achieve this, I have utilized a workaround invol ...

javajavascriptcssjsfjsf-1.2

Having difficulty understanding the sequence of the JavaScript AJAX demonstration

Understanding the concept of AJAX seems relatively easy, however, I am struggling to grasp the logic. While exploring how AJAX works, I came across the following example on w3schools.com, which is quite similar to examples on other sites as well. <!DOC ...

javascriptajax

Tips on modifiying CSS class created through JavaScript

I am making use of the visjs library and it is functioning well. However, I am facing an issue with changing the CSS class generated by this library (vis.js). The div elements are created dynamically by the JavaScript within the library itself. Can anyon ...

jqueryangularjsvis.js

Creating a collaborative storage space within a MERN project folder

Currently, I am developing an application using the MERN stack. The structure of my project repository includes both backend and frontend components: my-project/ ├── backend/ │ │ │ . │ . │ └── package.json ├── fronten ...

javascriptnode.jsnpmmern

Steps for implementing target='_blank' on a <Link> tag with more than just an <a> element inside

I'm facing an issue where I need to open a new browser tab and redirect to a specific URL when a button is clicked. The problem arises when using an element other than an anchor tag inside the Next's <Link> element, as it seems to ignore th ...

javascripthtmlreactjsnext.jshyperlink

Transforming a 2D array into an array of objects

Here is an example of an array: let heroes = [ ["1", "Tony Stark"], ["2", "Steve Rogers"], ["3", "Thor"], ["4", "Nick Fury"] ]; I am looking to transform this array into an object with the following structure: let avengers = [ {id:"1", name:"T ...

javascriptarraysobjectjavascript-objects

Issue with Colorbox plugin preventing ASP.NET button from triggering postback

Currently utilizing the colorbox modal plugin (http://colorpowered.com/colorbox/) I'm facing an issue with a simple form placed in a master page - the submit button is unresponsive and doesn't trigger any action. It seems like several users are ...

c#javascriptasp.netjquerycolorbox

Guide to implementing 301 redirection from HTTP to HTTPS in Next.js

What is the process for implementing a 301 redirection from HTTP to HTTPS in Next.js? One example of this would be redirecting from "http://stackoverflow.com/" to "https://stackoverflow.com/". ...

javascriptnode.jsnext.js

Utilizing Backbone.js: Passing a variable from a route to a view, collection, or model

Currently working on a mobile website project where I have set up a directory named 'api' containing PHP files that retrieve JSON formatted data from a remote API to avoid cross-domain issues. However, one of the PHP files requires a GET paramet ...

javascriptphpjqueryjsonbackbone.js

Sequencing when employing v-for

When utilizing the v-for to loop through an array as shown below: <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul> The items are displayed vertically as follows: Item 1 Item 2 Item ... Item ...

javascriptvue.jsv-for

Node.js retrieves values through the app.get and app.post methods

In my project, I'm utilizing the app.get and app.post functions in Express on Node.js. Below is an example of how I have used the app.post function: app.post('/status', function(req, res) { if (~packages.STATUSES.indexOf(req.body['s ...

javascriptnode.jsexpress

Exploring AngularJS testing with a modular approach

I've encountered an issue with my testing setup. It works fine when all the code is in a single file but breaks when the code is split across multiple files. Specifically, when the code is organized as shown below, I receive the following error messa ...

angularjsunit-testingjasminekarma-runnerangularjs-filter

Angular $http call to retrieve Instagram public feed experiencing CORS problem

I am currently working on integrating a public feed from an Instagram account into my simple Angular application. To build the app, I used yo generate angular and added a service to the controller to handle the API call using $http. However, I have encount ...

angularjsapixmlhttprequestcors

When implementing afui and jQuery on PhoneGap, an error was encountered: "TypeError: Cannot read property 'touchLayer' of object function (selector, context)"

While working on deploying a web application using phonegap with afui (Intel Appframework UI) for Android, I encountered an issue when testing it in the android emulator. The debug console displayed the following error right after launching the app: Uncau ...

javascriptandroidjquerycordovaappframework

Executing a group query for Mongoose in a node.js/express route

Hey there, I have a query that works perfectly fine in Robomongo. Here's the code: db.av.group( { key: { roomId: 1}, cond: { dateOfDay: { $gte: new Date('12/01/2014'), $lt: new Date('12/30/2014') } }, reduce: function( curr, re ...

javascriptnode.jsmongodbexpressmongoose

Processing MongoDB elements in NodeJS by retrieving them and appending them to a list or array for further processing

Currently, I am involved in a full stack project that requires fetching stock data from mongodb and performing algorithms on specific information. Here is an illustration of the JSON object stored in mongodb: [{ _id: 5e11d67abf05f3d00d56b801, LUNA: { ...

javascriptnode.jsmongodbexpressmern