Showing time on a JSON document using JavaScript Timeline

Currently, I am in the process of creating a widget using a timeline JS template. The main challenge lies in receiving events in JSON format, which is essential for the functionality of the widget. At this stage, my focus is on being able to fetch events from a local file. While I have succeeded in retrieving events with dates included, I am encountering difficulties when it comes to adding and displaying the time. Despite trying various suggestions available, none of them seem to be effective in resolving the issue. Is there anyone who can provide assistance?

Below is an excerpt from my JSON test file:

"events": 
[{
"start": "2013-03-18", //need to add time here
"end": "2014-03-18",
"title": "test a",
"color": "green",
"description": "this is a test",
"image": "",
"link": ""
},

...

]}

Answer №1

When it comes to date formats, the standard is usually "yyyy-mm-dd hh:MM:ss.mmm." This format can be used in a JavaScript new Date(x) constructor, but some browsers may not support it. In such cases, they prefer using / instead of - and a 'T' to separate the date and time. Check out this helpful resource for more information:

Highcharts: x-value as date

If you need further clarification, take a look at this FIDDLE HERE

An effective way to deal with this issue, as mentioned in the provided link, is to use the following method that seems to work well across various browsers:

var d = '2013-04-30 00:00:00';
var date = new Date(d.replace(' ', 'T') + 'Z')

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

Tips for simplifying validation in Java without using multiple if-else statements

I'm facing a challenge with my code structure that involves multiple if-else statements for different input values. In order to optimize my code, I am looking to create a single function to handle all if else logic. The input request is in JSONObject ...

Utilizing highcharts to visualize non-linear time data pulled from a CSV file

I am seeking guidance on implementing a simple graph based on data from a CSV file in web development. I lack experience in this area and have struggled to find a suitable example to follow. The CSV file contains data in the format of a unix timestamp, hu ...

Generating and traversing a JSON object with three dimensions

After exploring various topics on this site, I haven't been able to find a clear solution for my specific problem. I am facing a scenario where I need to populate three select boxes with options from a multidimensional array that follows the structur ...

the ng-repeat directive disables input controls within the tfoot

When working with JSON data, I encountered a situation where I needed to display different types of student details in a table. For one specific type of student, namely partners, I wanted to include input controls such as checkboxes and buttons. However, e ...

React/MaterialUI - Is there a way to customize the placeholder text for my multi-input field beyond the provided options?

I have a dropdown menu that accepts two JSON objects, symbol and company. export default function SymbolInput() { const [data, setData] = useState({ companies: [] }); const classes = useStyles(); useEffect(() => { Axios.get(" ...

Programmatically simulate a text cursor activation as if the user has physically clicked on the input

I have been attempting to input a value into a text field using JavaScript, similar to the Gmail email input tag. However, I encountered an issue with some fancy animations that are tied to certain events which I am unsure how to trigger, illustrated in th ...

Mastering the utilization of API routes within the Next JS 13 App Router framework

As a newcomer to React JS and Next.js, I recently made the switch from using the Page Router API in Next.js to utilizing the new App Router introduced in Next.js 13. Previously, with the Page Router, creating a single GET request involved nesting your "JS ...

Learn how to toggle a specific div by clicking on an image generated from an ngFor loop in Angular version 11

One issue I am facing is that I have multiple sections containing image info and details. When I click on a specific image, the corresponding details should toggle. Everything works fine, however, if I click on another image without closing the previous ...

AJAX is delivering a unique random hash instead of the expected text

I am in the process of developing a live notification script, and I have encountered an issue. Instead of receiving plain text from the external file, the script is returning a random hash... Here is the function responsible for fetching data from test.ph ...

Using double quotes and single quotes within a JSON string can sometimes cause conflicts and

I'm trying to understand the difference between two JSON Strings: <!DOCTYPE html> <html> <body> <h2>JSON Object Creation in JavaScript</h2> <p id="demo"></p> <script> var txt = '{"name":"Jimmy", ...

CodeIgniter controller returning data

Currently, I am utilizing CodeIgniter for a particular project that I am deeply involved in. Within one of my views, there exists an ajax call structured as follows: $.ajax({ type: 'GET', url: 'extra/search/infojson/' + $(this ...

jQuery if statement appears to be malfunctioning

When the condition operates alone, everything works fine. However, when I introduce an 'and' operation, it does not function correctly. If only one of them is true, the code works. It also successfully takes input values. <!DOCTYPE HTML Code ...

Unable to utilize the resolved value received from a promise and returned from it

Within the code snippet below, I am retrieving a Table object from mysql/xdevapi. The getSchema() and getTable() methods return objects instead of promises. The purpose of this function is to return a fulfilled Table object that can be used synchronously i ...

Incorporating External HTML Content Using JQuery Function

Looking for assistance with a JQuery function: function addSomeHTML() { $("#mysection").html("<div id='myid'>some content here</div>"); } I am trying to have this part: <div id='myid ...

Put a cookie in place to deter users from returning to the website

Looking for a way to prevent access to my contest site once the form has been submitted. Is there a way to achieve this? Thanks in advance ...

What causes the _.sum() function in lodash to not work with objects in Vuejs?

I've encountered an issue where using Vuejs and Lodash in conjunction with a computed property that calculates the sum of a property in a collection results in unexpected behavior. Instead of summing the values, it seems to concatenate the string [obj ...

Encountered a problem when converting a JSON message's datetime array into c# using Newtonsoft.Json

I am currently working with the Newtonsoft.Json library to parse JSON messages in C#. string json = @"{'SomeSchedule': [ { 'PeriodEnd': '2014-05-28', 'PeriodStart': '2014-02-28', ...

Generate HTML content based on the permissions from a REST API

I have a frontend that renders based on user permissions from a REST API. These permissions could include deleting users, creating users, adding users to workflows, and more. Most of these permissions are managed by an administrator. So my question is: H ...

Learn how to show image information in a separate div by clicking on the image using jQuery

Is there a way to show or hide information of an image in a separate div by clicking on the image itself? $(document).ready(function () { $(".cell").click(function () { $(this).find("span").toggle("slow"); }) }); <div class="cell"> ...

What causes the map function to behave differently when I use an array as the return value rather than a primitive in the callback function?

Program var corporations=[ {name:'Vicky',category:'Devdas',start:1993,end:2090}, {name:'Vikrant',category:'Devdas',start:1994,end:2019}, {name:'Akriti',category:'mental',start:1991,end:2021}, { ...