Skip to main content
J
Jonathan_Fortis
Inspiring
November 22, 2011
Question

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

  • November 22, 2011
  • 1 reply
  • 6418 views

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

This topic has been closed for replies.

1 reply

B
Community Expert
Ben MCommunity Expert
Community Expert
November 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/

J
Jonathan_FortisAuthor
Inspiring
November 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?

B
Community Expert
Ben MCommunity Expert
Community Expert
November 30, 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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jsDatePick Javascript example</title>

<!--

          Copyright 2009 Itamar Arjuan

          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

-->

<link rel="stylesheet" type="text/css" media="all" href="datepickers/jsDatePick_ltr.min.css" />

<!--

          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"!

 

          <link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.css" />

-->

<script type="text/javascript" src="datepickers/jsDatePick.min.1.3.js"></script>

<!--

          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.

-->

<script type="text/javascript">

          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>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js"></script>

  <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>

<script type='text/javascript'>//<![CDATA[

$(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>

<table width="264" border="0" cellspacing="0" cellpadding="0">

      <tr>

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

        <td width="264"><input type="text" id="arrivalDate" class="datepicker" /></td>

      </tr>

      <tr>

        <td>Duration:        </td>

        <td><input type="text" id="numOfNights" value="0" /></td>

      </tr>

      <tr>

        <td>End Date:        </td>

        <td><input type="text" id="departureDate" /></td>

      </tr>

</table>

</body>

</html>


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

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices