Datepicker not auto updating

[unplugged_web]

I came across this http://www.eyecon.ro/bootstrap-datepicker

 

I've be grateful if anybody has any suggestions

Edited July 1, 2014 by thehappyappy

[justsomeguy]

Suggestions for what?

[unplugged_web]

Sorry not everything I wrote ended up in the post - that'll teach me to type it in a text document then paste it in.

 

I'm trying to get this to change the actual value so when somebody submits the form it has the correct dates. At the moment it updates it on the screen but in the source code the value doesn't change.

Edited July 2, 2014 by thehappyappy

[justsomeguy]

That will update the value of the form field. When you submit the form the field will have the value you see.

[unplugged_web]

That will update the value of the form field. When you submit the form the field will have the value you see.

Yes that does update after you've submitted the form but I'm trying to get it to update before the form is submitted. It's being used on a page where people can search within a date range, they select the dates (using this method) then click submit to show the results within that range - but at the moment for it to work they're having to click the button after after its loaded and I'd like to stop that from happening

[justsomeguy]

I don't see that on the demo page. If I use that first field on the demo page, pick a date, and run this in the console:console.log(document.getElementById('dp1').value);It shows the correct value.

[unplugged_web]

I did try and although it worked on that page it didn't work on the site I'm working on. At the moment I've got the form like this:

<form method="post" id="report_filter">  <div class="form-group"><label for="form_date_from" class="required control-label">Date from</label><input type="text" id="form_date_from" name="form[date_from]" required="required"    class="form-control" value="02/07/14" ></div><div class="form-group"><label for="form_date_to" class="required control-label">Date to</label><input type="text" id="form_date_to" name="form[date_to]" required="required"    class="form-control" value="03/07/14" ></div><input type="hidden" id="form__token" name="form[_token]"    class="form-control" value="9ec20eed7ca26764be0c40c3ea7b2fcc2eb5910f" >  <div class="form-group">    <button type="submit" class="btn btn-default" onSubmit="return validate_form()"><i class="glyphicon glyphicon-search"></i> Filter</button>  </div></form> 

and the function here:

function validate_form(){        var f = document.getElementById('form_date_from').value;        var t = document.getElementById('form_date_to').value;        var fAlert = "Please enter a from date.";        var tAlert = "Please enter a to date.";        var em;         if (!f.value) {                 alert (fAlert);                 return false;         }         if (!t.value) {                 alert (tAlert);                 return false;         }         return true;   } 

but I'm still having to click filter again after the page has refreshed for the correct results to show.

 

I want the dates to update before the form is sent so that when the database query is sent it's getting the dates shown on the screen.

Edited July 4, 2014 by thehappyappy

[unplugged_web]

What I really want to do is send the new date results. So if somebody changes the date I want to form to send those new dates.

[justsomeguy]

You can put an onchange handler on the fields to submit the form when the value changes.

[unplugged_web]

I changed it to this:

<script>function dateTo(){var x=document.getElementById("form_date_to");x.value=x.value.new Date();}function dateFrom(){var x=document.getElementById("form_date_from");x.value=x.value.new Date();}</script>

but as soon as I add the JavaScript in the date selector stops working. The value of the date fields stays the same regardless so it's still not changing ti.

The form now looks like this:

<form method="post" id="report_filter"> <div class="form-group"><label for="form_date_from" class="required control-label">Date from</label><input type="text" id="form_date_from" name="form[date_from]" required="required" onchange="dateFrom()" 0=" " class="form-control" value="22/07/14" ></div><div class="form-group"><label for="form_date_to" class="required control-label">Date to</label><input type="text" id="form_date_to" name="form[date_to]" required="required" onchange="dateTo()" 0=" " class="form-control" value="28/07/14" ></div><input type="hidden" id="form__token" name="form[_token]" class="form-control" value="67f70a9bac24a6c4167beae497fea635cbd27d74" > <div class="form-group"> <button class="btn btn-default" onSubmit="return validate_form()"><i class="glyphicon glyphicon-search"></i> Filter</button> </div> </form> 

There's also this function for validating the form:

function validate_form(){         var f = document.getElementById('form_date_from').value;         var t = document.getElementById('form_date_to').value;         var fAlert = "Please enter a from date.";         var tAlert = "Please enter a to date.";         var em;          if (!f.value) {                  alert (fAlert);                  return false;          }          if (!t.value) {                  alert (tAlert);                  return false;          }          return true;    }

[justsomeguy]

First "x.value.new Date();" is not valid, if you were looking at your developer console you would see a parse error on that line. That's why it's not working. Second, it looks like you're trying to set it up so that when the value of the field changes, you set the value to the current date. Is that what you're actually trying to do?

[johncc]

f and t are strings and so don't have a ".value".

[unplugged_web]

First "x.value.new Date();" is not valid, if you were looking at your developer console you would see a parse error on that line. That's why it's not working. Second, it looks like you're trying to set it up so that when the value of the field changes, you set the value to the current date. Is that what you're actually trying to do?

I'm trying to change the value when the date changes so that when the form is sent it has the chosen date.

 

At the moment although it appears the date changes (from the users point of view) when I look at the source code the date hasn't changed.