Can you provide the date time format used in the JSTL fmt tag?

To display date and time in JSTL, the fmt tag can be utilized. Details can be found here

In order to format the date for use with front end tools like the datatable, a specific date format needs to be specified. By using parameters such as type or dateStyle instead of a distinct formatting, a somewhat formatted output can be achieved. However, the issue arises when datatables require knowledge of the precise date format in order to correctly sort these fields.

For example, when utilizing parameters like:

<fmt:formatDate type = "both" dateStyle = "long" timeStyle = "long" value = "${now}" />

The resulting output is:

August 23, 2017 10:52:09 AM UTC

The question then becomes, how can the date output be specifically formatted as:

$.fn.dataTable.moment( 'MMMM dd, YYYY hh:mm:ss aa z' );

In order to achieve accurate sorting results.

javascriptjavadatatablesjstl

Answer №1

It is recommended to utilize the following code:

      $.fn.dataTable.moment( 'MMMM DD, YYYY hh:mm:ss A', false );

Note that the code utilizes the forgiving mode, as there is no format option available to represent the UTC part of the date.

Here is a complete test case:

<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/plug-ins/1.10.16/sorting/datetime-moment.js"></script>
</head>
<body>
  <table id="example">
        <thead>
            <tr>
                <th>Date</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>August 23, 2017 10:52:09 AM UTC</td></tr>
            <tr><td>August 23, 2018 10:52:09 AM UTC</td></tr>
            <tr><td>August 21, 2017 10:52:09 AM UTC</td></tr>
            <tr><td>August 23, 2017 08:47:09 PM UTC</td></tr>
            <tr><td>March 29, 2017 10:52:09 AM UTC</td></tr>
            <tr><td>April 01, 2017 10:52:09 AM UTC</td></tr>
          </tbody>
        </table>
        <script>
        $(document).ready(function() {
          $.fn.dataTable.moment( 'MMMM DD, YYYY hh:mm:ss A', false );
            $('#example').DataTable();
        });
</script>
</body>
</html>

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

How can I efficiently transfer a JavaScript array to a PHP script using the GET method?

My web application is designed with jQuery allowing users to manipulate visual elements. The next step is sending the JavaScript object state to PHP for storage in a database. While I prefer using GET, I am open to solutions that involve POST submission as ...

phpjavascriptjquery

Anonymous self-executing functions with parameters from an external scope

Recently, I stumbled upon the code snippet below while following a tutorial. const increment = (function(){ return function incrementbytwo (number){ return number+2; } })(); console.log(increment(1)); The result of the code above is 3. ...

javascriptfunctiondom-eventsanonymous-functionself-invoking-function

Identifying Errors in Meteor's Data Publications

I am currently working on a web application using Meteor and AngularJS 2. Take a look at the publication function below: Meteor.publish('abc', function () { // For throwing the meteor error according to the condition if(!this.userId) throw new ...

javascriptangularmeteorangular-meteor

Error: Cannot run yarn dev because node_modules/node/bin/node is missing

While running Next.js on my Windows machine, I am noticing that the file path is displaying as if it were a Linux path. I have already configured the node file path in the environment variable, but I'm still encountering the following error: yarn run ...

javascriptnode.jsnext.js

React-Bootstrap Table Toolkit Encounter Search Import Issue

I encountered an issue while trying to integrate React Bootstrap Table into my project, resulting in the following error message. Uncaught ReferenceError: arguments is not defined at Object../node_modules/react-bootstrap-table2-toolkit/lib/src/search/Sea ...

javascriptreactjsreact-bootstrapreact-bootstrap-table

Guide to making a JavaScript button that triggers an iframe to open upon user clicking the button

I'm currently enhancing the comment section for posts on my website. I am looking to implement a button in javascript that, when clicked, will open an iframe window displaying comments similar to how Facebook does on their post. If there are other lan ...

phpjavascripthtmliframe

A method for automatically collapsing one div item when another is open

I have tried various methods but none seem to work. I am attempting to open only one div at a time, please click on the link above to see for yourself. Please provide any alternate solutions or suggestions. JsFiddle: http://jsfiddle.net/gm2k3ewp/ < ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Customizing SwiperJS to display portion of slides on both ends

I need some assistance with my SwiperJS implementation to replace existing sliders on my website. The goal is to have variable-width slides, showing a landscape slide in the center with a glimpse of the preceding and following slides on each side. If it&ap ...

javascriptjquerycsssliderswiper.js

Strategies for Pagination Button Reduction in Vue

I am facing an issue with my pagination component. It is designed to receive props such as `totalPages` and `currentPage` in order to render buttons that allow users to change the current page. However, when there are a large number of products, an excessi ...

javascriptvue.jsvuejs2paginationvue-component

Top method for detecting errors in Models? (Node.js + Sequelize)

Looking for a straightforward method to catch errors in an API using Node.js and Sequelize models? Take a look at this code snippet which utilizes async-await: const router = express.Router() const { Operations } = require('../models') router.po ...

javascriptnode.jsexpresssequelize.js

Verification of product discount calculations using Selenium

I have a question that's been on my mind! Is there an option in Automation Testing to verify discount calculations when a product is added to the cart? Here's the scenario I'm referring to: Add a discounted product to the cart When proceed ...

javaseleniumselenium-webdriverautomation

Updating your data: Transforming deeply nested JSON elements into a more manageable list

I'm struggling to convert the JSON response into a list of "properties" elements. The structure of my JSON is as follows: { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { ...

javaandroidjsonapiretrofit

Determine whether a directive possesses a specific attribute

Here is my current code snippet: <my-directive></my-directive> I am trying to include a ternary operation within it like this: {{ $scope.my-option ? 'YES' : 'NO' }} Is it possible to achieve the desired result by adding ...

javascriptangularjs

Connecting Lavarel Pusher Socket in NUXT with SSR Mode

Looking to establish a connection between the Laravel Pusher Socket and NUTX.js (SSR Mode) Application. The code snippet above adds the socketio.js plugin file, but it seems to be causing some issues. Can anyone point out what might be going wrong? And ...

javascriptvue.jsnuxt.js

Is the behavior of String.replace with / and different in Node.js compared to Chrome?

Creating a router in Node.js involves mapping URIs to actions, which requires an easily configurable list of URIs and regular expressions to match against the request URI. This process may seem familiar if you have experience with PHP. To test this functi ...

javascriptregexnode.jsescapingread-eval-print-loop

React - Issue with state not being updated accurately

My current project involves using the <Select> component from Material-ui to create a drop-down menu. I need to update the state of the <Select> component after a selection has been made. To achieve this, I have set the value property of the & ...

javascriptreactjs

In AngularJS, variables can undergo automatic value changes without any external connections

Within my AngularJS controllers, I have initialized two variables: _this.currentData=new Array(); _this.masterCurrentData=new Array(); Later on, I created a temporary array of objects called tmpDataSort and populated it separately using loops. var tmpDa ...

javascriptarraysangularjsobject

What is the best way to merge arrays within two objects and combine them together?

I am facing an issue where I have multiple objects with the same properties and want to merge them based on a common key-value pair at the first level. Although I know about using the spread operator like this: const obj3 = {...obj1, ...obj2} The problem ...

javascripttypescript

Why can't I capture the text within this particular div using .text?

Trying to extract specific text from a website in Chrome's developer console. For example, here is the code snippet: <div class="someClass">This is some text!</div> Expected it to work with this command, but it returns 'undefined&a ...

javascriptjquery

The absence of Chromedriver.exe in Java Selenium triggers an IllegalStateException

I'm encountering this error message: Exception in thread "main" java.lang.IllegalStateException: The driver executable does not exist: C:\Users\Scott\workspace\Twitch%20Bot%20v2\bin\chromedriver.exe at com.google.com ...

javaselenium