Jump to content

Function that will reset input date?

w3schoon

By w3schoon
in CSS

 Share

Recommended Posts

w3schoon Newbie

w3schoon

Posted
Posted

Nice be with you everyone! Problem: Is there a function that will reset input date?_________________________________________________________________________________________________________ // Here's my code: <script type="JavaScript"> function reset() { // Is there a function that will reset input date?} <script> <input type="date" name="date"> <button onclick="reset()">Reset Date</button>_________________________________________________________________________________________________________ Thank you.

Link to comment
Share on other sites
niche Devoted Member

niche

Posted
Posted (edited)

Didn't know that . Thanks dsonesuk. I will use something like this instead:

function updateInput(ish){	document.getElementById("fieldname").value = ish;}

Edited by niche
Link to comment
Share on other sites
w3schoon Newbie

w3schoon

Posted
  • Author
Posted (edited)

Finally I made it (reset input date)!_________________________________________________________________________________________________________ // Here is my code: <script type="JavaScript"> function reset() { // Creat date datatype variable and set it to null value var a=new Date();a.setFullYear(0,0,0); // Get input date element and insert a value with that variable var b=document.getElementsByName("name")[0];b.value=a; } <script> <input type="date" name="date"> <button onclick="reset()">Reset Date</button>_________________________________________________________________________________________________________ @dsonesuk: Thank you for http://w3schools.com...ef_obj_date.asp @niche: Thank you I found out that innerHTML is only for changing text inside of an element.

Edited by w3schoon
Link to comment
Share on other sites
callumacrae Newbie

callumacrae

Posted
Posted
Finally I made it (reset input date)!_________________________________________________________________________________________________________ // Here is my code: <script type="JavaScript"> function reset() { // Creat date datatype variable and set it to null value var a=new Date();a.setFullYear(0,0,0); // Get input date element and insert the variable a var b=document.getElementsByName("name")[0];b.value=a; } <script> <input type="date" name="date"> <button onclick="reset()">Reset Date</button>_________________________________________________________________________________________________________ @dsonesuk: Thank you for http://w3schools.com...ef_obj_date.asp @niche: Thank you I found out that innerHTML is only for changing text inside of an element.
You shouldn't use the onclick attribute to add events, you should use the addEventListener function (and possibly .attachEvent if you want support for oldIE).
Link to comment
Share on other sites
w3schoon Newbie

w3schoon

Posted
  • Author
Posted (edited)

Did you mean like this?________________________________________________________________________________________________________ function load() { var a = document.getElementsByName("name")[0]; a.addEventListener("click", function(){ reset() }, false); }________________________________________________________________________________________________________ @callumacrae: Am I right?

Edited by w3schoon
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

If you go that route,(1) A id reference is required for the button to apply event listener(2) you will have to take into account most better browsers will use addEventListener with 'click' while crappy IE will use attachEvent with 'onclick', so you will have to check which it will accept and make appropriate convertion.(3) you will have to add these events once the page is fully loaded.(4) the button you are using will cause a reload of the page, so it will reset the input with the date you set, but the page will reload, and it will end up blank again at its default state, so you will have to prevent reload of page, when the button is clicked.

Link to comment
Share on other sites
w3schoon Newbie

w3schoon

Posted
  • Author
Posted 
<!DOCTYPE html><html><head><title>Reset input date</title><script type="text/javascript">// Function to add event listener to id2function load() {var a=document.getElementById("id2");a.addEventListener("click", resetDate, false);}// Function to reset input datefunction resetDate() {var a=new Date();a.setFullYear(0,0,0);var b=document.getElementById("id1");b.value=a;}document.addEventListener("DOMContentLoaded", load, false);</script></head><body><input id="id1" type="date" name="date"><button id="id2">Reset Date</button></body></html>

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Yes! it works but only for IE9+ and other browser, as IE versions lower don't recognise addEventListener only attachEvent, and also as long as you don't place the button element within form tags, it will still work, but! if you do, it will fail because it will do a complete reload of page, as it be will treated as a submit button to submit the form.

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

Another problem. I suspect you are testing in FF or IE. Neither of those has implemented the type="date" input. So it acts like a plain text input. Try your code in Chrome. You will find that Chrome expects to receive the date value in a very specific format. Unfortunately, I'm too lazy to read if the Chrome format is or will become an industry standard. I can say that the output of a.setFullYear(0,0,0) is NOT the expected format.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...