Ways to customize the datetime-local format in an HTML input field

Question

Ways to customize the datetime-local format in an HTML input field

When dealing with the HTML input of datetime type, consider the following:

Datefield:
<input type="datetime-local" data-date="" data-date-format="DD MMMM YYYY, h:mm:ss">

The script below includes important code.

$("input").val(moment().format('YYYY-MM-DD, h:mm:ss'));

$("input").on("change", function() {
this.setAttribute(
    "data-date",
    moment(this.value)
    .format( this.getAttribute("data-date-format") )
)
}).trigger("change")

I came across http://jsfiddle.net/g7mvaosL/ which allows changing the date pattern. However, when attempting to do the same with type="datetime-local", it did not work. How can this issue be resolved?

javascript jquery html css datetime

Answer 1

Answer №1

When using a date picker, it only returns the year, month, and day information.

console.log(this.value); //outputs 2015-08-09

Attempting to extract hours, minutes, and seconds from a date picker is not possible.

If you want to include the current time in your code, you can set it to the moment's now value.

$("input").val(moment().format('YYYY-MM-DD, h:mm:ss'));

Remember to place this line inside the on change event to ensure it updates consistently.

Adding two moments together is not feasible as it would lead to incorrect results. Instead, utilize moment.duration(). This function helps target specific time values accurately.

function nowAsDuration(){
    return moment.duration({
        hours:   moment().hour(),
        minutes: moment().minute(),
        seconds: moment().second()
    });
}

You can now use moment.add() effectively.

var a = moment(this.value);
var b = nowAsDuration();
var c = a.add(b);

For updated code, refer to http://jsfiddle.net/w7mj7feh/

Answer 2

When using a date picker, it only returns the year, month, and day information.

console.log(this.value); //outputs 2015-08-09

Attempting to extract hours, minutes, and seconds from a date picker is not possible.

If you want to include the current time in your code, you can set it to the moment's now value.

$("input").val(moment().format('YYYY-MM-DD, h:mm:ss'));

Remember to place this line inside the on change event to ensure it updates consistently.

Adding two moments together is not feasible as it would lead to incorrect results. Instead, utilize moment.duration(). This function helps target specific time values accurately.

function nowAsDuration(){
    return moment.duration({
        hours:   moment().hour(),
        minutes: moment().minute(),
        seconds: moment().second()
    });
}

You can now use moment.add() effectively.

var a = moment(this.value);
var b = nowAsDuration();
var c = a.add(b);

For updated code, refer to http://jsfiddle.net/w7mj7feh/

Ways to customize the datetime-local format in an HTML input field

Answer №1

Similar questions

Sending data from PHP to JavaScript using AJAX

Property of object (TS) cannot be accessed

Implementing Clockwise Padding with React Material-UI

Guide to implementing a DataTable in MVC4 UI using jQuery

The positioning of the second wrapper in absolute does not match the behavior of the first wrapper

Is it possible to count the number of days in between and then apply a specific class to each of those days

Tips for modifying JSON response using a function

Creating intricate filters using React's map functionality

The functionality of the WordPress Contact Form 7 Plugin becomes erratic when integrated into dynamically loaded AJAX content

Choose Selectize.js to auto-populate inputs

Updating a database seamlessly via a dropdown menu without having to refresh the entire webpage

Effortlessly Transform HTML into Plain Text Using jQuery

React Native Issue: The mysterious disappearance of the 'navigation.push' object

The issue with the search box not being correctly displayed on Google CSE using Twitter Bootstrap

open a fresh modal by closing the existing modal using just one button

When attempting to use a jQuery-formatted JSON object within an <optgroup > returned via AJAX from PHP and MySQL, it appears to be incompatible with Select2

Analyzing past UTC date times results in a peculiar shift in time zones

MongoDB can track an index in a collection using a case-insensitive regex pattern

Utilize the cached version of jQuery if it has been recently updated, otherwise proceed with downloading the newest

What are the solutions for resolving problems with the display and functionality of a multi-page form in Internet Explorer?