date picker. user selects a start date click radio button then give an end date

Report · Nov 22, 2011

i have seen the widget for date picker that works great but i need another function.

Once the user selects that date (their start date from the date picker) underneath this there are 2 radio buttons one for 43 weeks and one for 52 weeks. I need that once the required "weeks" is selected a feild underneath is populated with a new date adding either 43 or 52 weeks to the start date.

php mysql used

i think this is done using javascript

if there is another way less complicated to do it i would live to know

thanks

Report · Nov 22, 2011

I'm not a big javascript person myself, so what I would do is allow them to select the start date with the date picker and a radio button for the weeks like you did. Then I would run a confirmation page instead of submitting instantly and calculate the end date on the next page using the PHP strtotime function ( http://php.net/manual/en/function.strtotime.php ) to get a date and then put that into the database if they choose to accept the confirmation.

Here's an example of what I'm talking about: http://www.brightcherry.co.uk/scribbles/2009/01/06/php-adding-and-subtracting-dates/

In Response To Ben M · Nov 22, 2011

what so you mean make a comfirmation page for the whole form that includes the date picker date and the radio button result then when they go to the next (confirmation page) this will calculate the end date?

In Response To Jonathan_Fortis · Nov 22, 2011

Jonathan Fortis wrote:
what so you mean make a comfirmation page for the whole form that includes the date picker date and the radio button result then when they go to the next (confirmation page) this will calculate the end date?

No the confirmation page won't have the date picker. The submission form will have the date picker, then you store the variables in a session, display a confirmation page for the users to verify the infromation and say something like: "43 Week Plan - Next Renewal 8/23/12".

Or here's something else I came across. Looks to be what you are looking for with JQuery populating a hidden field:

http://stackoverflow.com/questions/3813973/jquery-ui-datepicker-add-days

I should add that's for the JQuery UI Datepicker:

http://jqueryui.com/demos/datepicker/

In Response To Ben M · Nov 23, 2011

ok, that is exaclty what i need, never used jquery before. so will have to look at how to do it.

Does all the information site on the webpage. ie the date picker and the jquery. or does it use external files?

In Response To Jonathan_Fortis · Nov 23, 2011

sorry sit on the website.....not site

In Response To Jonathan_Fortis · Nov 23, 2011

The Datepicker I see in the Widget browser appears to be along the lines of the one from JQueryUI. But the one in the widget browser is not from anyone on the development team from what I can tell so I can't say without examining the code more in depth whether changes were made however at a first glance it does not appear that changes were made.

Basically with the JQueryUI you include the jquery.js file ( http://code.jquery.com/jquery.min.js ) and then the JQueryUI ( https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js ) then you can download and include the datepicker.js and upload that to your site and include. The reason I'd recommend using those external sites because if users have visited other sites including those files your page will load quicker because those files are already cached by the browser. You could download the individual files to your site, but it would increase the initial load time and if there is an update to Jquery or JqueryUI you would have to go download and upload the new js file as opposed to only changing the header.

Then the last step is the code for the datepicker they give you here:

http://jqueryui.com/demos/datepicker/

Just click the view source button. Insert the HTML to your form and the javascript to your head. Inside the default script there are many options to choose from at the bottom of the page with examples that you would copy into the javascript header code they give you.

Lastly, if you want to make a custom theme you can click on Themes at the top and they have a very nice theme builder which will export CSS for your datepicker so you can make it look however you want.

In Response To Ben M · Nov 23, 2011

ok i downloaded the

jquery.min.js

jquery-ui.min.js

and i have also made the page

<head>

<title>blank</title>

$(function() {

$( "#datepicker" ).datepicker();

});

</script>

</head><body>

</div>

<p>The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>

</div>

</body></html>

i have then uploaded these files to my server but no luck

i think i am missing something

you mentioned datepicker.js...is this another files that needs to be downloaded? if so where is this?

thanks

In Response To Jonathan_Fortis · Nov 23, 2011

ok, i have sorted that part of it now.i used this date picker

http://javascriptcalendar.org/

seems to do all i need the bit i need to do now is the next part

http://stackoverflow.com/questions/3813973/jquery-ui-datepicker-add-days

i take it i just put this

$('#arrivalDate').datepicker({

onSelect: function(dateStr) {

var nights = parseInt($('#numOfNights').val());

var depart = $.datepicker.parseDate('mm/dd/yy',dateStr);

depart.setDate(depart.getDate() + nights);

$('#departureDate').val(depart);

}

});

$('#numOfNights').change(function() {

var nights = parseInt($('#numOfNights').val());

var depart = $.datepicker.parseDate('mm/dd/yy',$('#arrivalDate').val());

depart.setDate(depart.getDate() + nights);

$('#departureDate').val(depart);

});

in the header section and

Arrive: <input type="text" id="arrivalDate"class="datepicker"><br />

Nights: <input type="text" id="numOfNights" value="0"><br />

Depart: <input type="text" id="departureDate">

these extra feilds in the form?

thanks

In Response To Jonathan_Fortis · Nov 23, 2011

no that hasnt worked. i used the date picker from that http://jsfiddle.net/JKGvD/ site, but the formatting isnt very good. is there a way i can use another date picker like the one you recommend?

In Response To Jonathan_Fortis · Nov 23, 2011

Going back to this post you are missing the includes in that page. Take a look at the source of the example page:

http://jqueryui.com/demos/datepicker/default.html

The files have to be included in the head before the javascript is run. And they have to be called in a particular order jquery->jqueryui->datepicker. Also for the code the #arrivalDate and so on, will need to be updated to match your form. The #arrivalDate notes the ID that is being called from your form. In this person's example the #arrivalDate is where their datepicker is setup.

I can try to set up an example page but with the holiday I might not be able to put more time into it until the end of the weekend or early next week.

In Response To Ben M · Nov 24, 2011

ok thanks, i will try and do as much as i can today / tonight and will see how i get on.

I post what it acheive, thanks

In Response To Jonathan_Fortis · Nov 26, 2011

so use the date picker in the link provided and replace the relevent code from the example here

http://jsfiddle.net/JKGvD/

is that what i have to do?

In Response To Jonathan_Fortis · Nov 28, 2011

Jonathan Fortis wrote:
so use the date picker in the link provided and replace the relevent code from the example here
http://jsfiddle.net/JKGvD/
is that what i have to do?

Yes. The source code from the bottom right frame will give you the most accurate results. But just from looking at the code and their example they did not attach the CSS file that stylizes the datepicker so you will need to go back to: http://jqueryui.com/themeroller/ and get a CSS file from their generator or click on the Gallery tab (top left, next to "Roll Your Own") and download a pre-made CSS document to include.

In Response To Ben M · Nov 28, 2011

can i use that formatted date picker from http://jqueryui.com/themeroller/ and replace the date picker from http://jsfiddle.net/JKGvD/ ?

then just use the other two input fields from the http://jsfiddle.net/JKGvD/

the nights and depart?

would it just be a case of adding the code to the formatted date picker to make the calculation?

In Response To Jonathan_Fortis · Nov 28, 2011

can i use that formatted date picker from http://jqueryui.com/themeroller/ and replace the date picker from http://jsfiddle.net/JKGvD/ ?

They are the same date picker. The only difference is the CSS style. In the jsfiddle site the CSS file is actually missing and not showing up. Once you include a CSS file it can look however you want it to.

then just use the other two input fields from the http://jsfiddle.net/JKGvD/
the nights and depart?
would it just be a case of adding the code to the formatted date picker to make the calculation?

Yep, I think you are understanding it more now. Just take those pieces that you need and plug them in.

In Response To Ben M · Nov 29, 2011

OK i think im nearly there..but something strange is happening. it works when i click on the date picker the first time ( all the formatting is there, but if i want to re choose a date the formatting is gone

here is all the code so you can see what i mean:-

<head>

<title>jsDatePick Javascript example</title>

<!--

jsDatePick is distributed under the terms of the GNU General Public License.

****************************************************************************************

Copy paste these 2 lines of code to every page you want the calendar to be available at

-->

<!--

OR if you want to use the calendar in a right-to-left website

just use the other CSS file instead and don't forget to switch g_jsDatePickDirectionality variable to "rtl"!

-->

<!--

After you copied those 2 lines of code , make sure you take also the files into the same folder 🙂

Next step will be to set the appropriate statement to "start-up" the calendar on the needed HTML element.

The first example of Javascript snippet is for the most basic use , as a popup calendar

for a text field input.

-->

window.onload = function(){

new JsDatePick({

useMode:2,

target:"arrivalDate",

dateFormat:"%d-%M-%Y"

/*selectedDate:{ This is an example of what the full configuration offers.

day:5, For full documentation about these settings please see the full version of the code.

month:9,

year:2006

},

yearsRange:[1978,2020],

limitToToday:false,

cellColorScheme:"beige",

dateFormat:"%m-%d-%Y",

imgPath:"img/",

weekStartDay:1*/

});

};

</script>

$(window).load(function(){

$('#arrivalDate').datepicker({

onSelect: function(dateStr) {

var nights = parseInt($('#numOfNights').val());

var depart = $.datepicker.parseDate('mm/dd/yy', dateStr);

depart.setDate(depart.getDate() + nights);

$('#departureDate').val(depart);

}

});

$('#numOfNights').change(function() {

var nights = parseInt($('#numOfNights').val());

var depart = $.datepicker.parseDate('mm/dd/yy', $('#arrivalDate').val());

depart.setDate(depart.getDate() + nights);

$('#departureDate').val(depart);

});

});//]]>

</script>

</head>

<body>

<h2>JsDatePick's Javascript Calendar usage example</h2>

<tr>

<td width="264">Start Date : </td>

</tr>

<tr>

<td>Duration: </td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

In Response To Jonathan_Fortis · Nov 30, 2011

I don't see why the CSS would load once but not a second time. What browser/version is involved?

In Response To Ben M · Dec 01, 2011

google chrome latest version and IE latest version

In Response To Jonathan_Fortis · Dec 05, 2011

i am still getting knowhere with this date picker problem

ideally what i really need to do is date picker date to select a start date, then give them two radio boxes one saying 43 weeks and the other saying 52 weeks, whatever one they choose this amount of weeks is added the the start date then gives them an end date

any ideas

thanks