How can I get javascript to write dates in my input boxes?

Question

I made this fiddle http://jsfiddle.net/cyrtx7qw/1/ and I cant figure out how to make these two dates write on page load. I need them to check if the boxes are empty and then I want to write the today's date and today-7 respectively.

 if ($('#datePickersAppearance').is(':empty')) {
     var today = new Date();
     var curr_date = today.getDate();
     var curr_month = today.getMonth();
     curr_month++;
     var curr_year = today.getFullYear();
     document.getElementById("to").innerHTML = curr_date + "." + curr_month + "." + curr_year;

     today.setDate(today.getDate() - 7);

     var new_date = today.getDate();

     var new_month = today.getMonth();
     new_month++;
     var new_year = today.getFullYear();

     document.getElementById("from").innerHTML = new_date + "." + new_month + "." + new_year;
 }

Also, is there a way keep another date after page reload in case I change the default ones? I need the if statement to not trigger then...

Irfan TahirKheli · Accepted Answer · 2015-03-03 08:46:27Z

4

filddle

if ($('#datePickersAppearance').is(':empty'))
 to
if ($('.datePickersAppearance').val() == '')



 document.getElementById("from").innerHTML

should be

document.getElementById("from").value

edited Mar 3, 2015 at 8:46

answered Mar 3, 2015 at 8:16

Irfan TahirKheli

3,6621 gold badge26 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Vrankela Over a year ago

Yes, that was it, so is there a way to get a newly typed date to stick after page reload? Because, right now, it will always revert to the default...

Irfan TahirKheli Over a year ago

forums.asp.net/t/… @Vrankela

Vrankela Over a year ago

unlike the guy in that thread, I use MVC, so how would I go about it in that case then?

Irfan TahirKheli Over a year ago

i don't know about MVC. but i dont think this is a difficult thing to maintain controls data across postbacks. @Vrankela

Irfan TahirKheli Over a year ago

yeh sorry .. i noticed it now. reverted my answer. @Vrankela

|

FactoryAidan · Accepted Answer · 2015-03-03 08:50:06Z

1

The biggest problem is that <input> elements do not have a .innerHTML property. It is instead .value.

Your jQuery was traded for JavaScript.

Code was truncated for readability.

Use this instead:

(function loadDates(element){
    var from =  document.getElementById('from')
    var to =    document.getElementById('to')

    if(!from.value.length && !to.value.length ){

        var my_date = new Date()
        to.value =  my_date.getDate() + "." + my_date.getMonth() + "." + my_date.getFullYear()

        //  Redefine date object
        my_date.setDate(my_date.getDate() - 7)
        from.value =    my_date.getDate() + "." + my_date.getMonth() + "." + my_date.getFullYear()

    }//endif
})();

edited Mar 3, 2015 at 8:50

answered Mar 3, 2015 at 8:26

FactoryAidan

2,6041 gold badge15 silver badges13 bronze badges

Comments

jyrkim · Accepted Answer · 2015-03-03 13:47:49Z

1

Updated, you can use sessionStorage to save your dates for page reloads. Also .blur() event handler is used to save data for sessionStorage, so that it's available when the page loads :-) Some other event handlers like .change() could be use as well. Fiddle

var today = new Date();
var curr_date = today.getDate();
var curr_month = today.getMonth();
curr_month++;
var curr_year = today.getFullYear();

var toDate = "";

//check if there's a to Date in sessionStorage 
if (sessionStorage.getItem("toDate")) {
  toDate = sessionStorage.getItem("toDate");
  sessionStorage.setItem("toDate", toDate);
} else {

  toDate = curr_date + "." + curr_month + "." + curr_year;
  sessionStorage.setItem("toDate", toDate);
}

document.getElementById("to").value = toDate;

today.setDate(today.getDate() - 7);

var new_date = today.getDate();

var new_month = today.getMonth();
new_month++;
var new_year = today.getFullYear();

var fromDate = "";

//check if there's a from Date in sessionStorage 
if (sessionStorage.getItem("fromDate")) {
  console.log("if");
  fromDate = sessionStorage.getItem("fromDate");
  sessionStorage.setItem("fromDate", fromDate);
} else {
  // actually else part of the code never runs because there's toDate in sessionStorage.
  console.log("else");

  fromDate = new_date + "." + new_month + "." + new_year;
  sessionStorage.setItem("fromDate", fromDate);

}

document.getElementById("from").value = fromDate;


$("#from").blur(function() {
  //check that there is data before saving into sessionStorage
  if (this.value.length >= 8)
    sessionStorage.setItem("fromDate", this.value)
});

$("#to").blur(function() {
  //check that there is data before saving into sessionStorage
  if (this.value.length >= 8)
    sessionStorage.setItem("toDate", this.value)
})

edited Mar 3, 2015 at 13:47

answered Mar 3, 2015 at 9:10

jyrkim

2,8791 gold badge26 silver badges35 bronze badges

7 Comments

Vrankela Over a year ago

close, but something is wrong here, now I dont need the if ($('#datePickersAppearance').val('')) since you introduced the session storage. But even when I remove it, I still don't get the changed dates after refresh

Vrankela Over a year ago

The whole point of the check if empty was to see if a date was written before page reload

jyrkim Over a year ago

@Vrankela sorry I was away for a while :-) now I've added blur event handlers to save the session data so that it's available for page reloads. Also made the changes that you proposed i.e removed if ($('#datePickersAppearance').val('') check

Vrankela Over a year ago

I just tried it in my MVC visual studio application, it doesn't work. It wont display the changed dates after I reload the page, any thoughts?

jyrkim Over a year ago

@Vrankela are you using IE browser? If so, have you tried with some other browser like Chrome, Opera or etc. Alternatively, if you plan to use IE, then can you deploy it to IIS first and then try again. It could be that you need to access the page from Web server if sessionStorage is used with IE. More info: stackoverflow.com/questions/16212347/…

|

Collectives™ on Stack Overflow

How can I get javascript to write dates in my input boxes?

3 Answers 3

6 Comments

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related