Скачать или смотреть How to Convert a DateTime String into Separate Date and Time Strings in JavaScript

Learn how to easily convert a DateTime string into a UK formatted date and 24-hour time using JavaScript.
---
This video is based on the question https://stackoverflow.com/q/7565879/ asked by the user 'CLiown' ( https://stackoverflow.com/u/159118/ ) and on the answer https://stackoverflow.com/a/72647484/ provided by the user 'Saeid' ( https://stackoverflow.com/u/15356914/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Javascript/jQuery - DateTime to Date and Time separate strings

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 3.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Transforming DateTime: A Guide to Separate Strings for Date and Time in JavaScript

When working with date and time data in JavaScript, it's not uncommon to encounter formatted DateTime strings, especially from APIs or databases. If you've ever received a DateTime string like 2011-08-31T20:01:32.000Z and needed it broken down into two pieces—one for date in the UK format (31-08-2011) and another for time (20:01)—you’re in the right place!

In this guide, we'll explore how to easily and effectively convert a DateTime string into separate date and time strings for your application's needs.

Understanding the Input

The DateTime string is in the following format:

[[See Video to Reveal this Text or Code Snippet]]

Year: 2011

Month: 08 (August)

Day: 31

Time: 20:01:32 (20 hours and 1 minute, in 24-hour format)

Time Zone: Z indicates it's in UTC (Coordinated Universal Time).

Desired Outputs:

UK Date Format: 31-08-2011

Time: 20:01

Breaking Down the Solution

Here’s a step-by-step guide to achieve the transformation using JavaScript:

Step 1: Create a Date Object

First, we need to create a Date object from the input string. This will allow us to manipulate the date and time easily.

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Format the Date

Next, we can format the date into a more manageable representation that suits our needs. We will take advantage of the toLocaleDateString method.

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Split the Date Components

To rearrange our date into the desired UK format, we can split the date string:

[[See Video to Reveal this Text or Code Snippet]]

Step 4: Construct the UK Date Format

Now that we have an array of day, month, and year, we can format it to DD-MM-YYYY:

[[See Video to Reveal this Text or Code Snippet]]

Step 5: Format the Time

Lastly, we can extract the time portion of the original string and format it into the HH:MM format:

[[See Video to Reveal this Text or Code Snippet]]

Step 6: Output the Results

You can now apply these formatted strings as needed, such as setting them in a textbox in your HTML:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

With these simple steps, you can efficiently convert a DateTime string into separate date and time strings in the UK format using JavaScript. This process not only helps keep your data organized but also enhances the user experience by presenting information in a familiar format.

Feel free to apply these techniques in your projects whenever you need to format date and time data!