Calculating and populating a date field

mcwatson

Asked on November 3, 2014 at 6:00 PM

Hi,

I have a form where I want the user to choose the week ending date and based on that date, the subsequent daily dates auto populate with their respective date.

Therefore if the week ending date is 07.11.14 (being a Friday), then the Thursday field is populated with 06.11.14, the Wednesday field is populated as 05.11.14 and so on.

If you look at the attached screen shot, I have the week ending field at the top and then I want to deduct 1 day, 2 days, 3 days as I go down the form and populate the Saturday, Friday, Thursday date.

I've tried to achieve this using the conditions wizard but with no luck. I've also tried using the Field Calculator widget and I can get the field to receive a value but not in a date form, bit like how the number shows in excel when it's not a date field but just a numerical.

Can anyone help?

Thanks,
raul

Replied on November 3, 2014 at 8:47 PM

Hello,

Unfortunately you cannot accomplish this with conditional logic, since if I understand correctly you need to calculate the dates from each day based on the Week Ending selected date and this cannot be accomplished using conditional logic.

You'll need to use JavaScript and probably the full source code to calculate these dates and populate the Date Pickers for each day accordingly.

To calculate the dates you would use a function similar to the described in this tutorial: http://www.htmlgoodies.com/html5/javascript/calculating-the-difference-between-two-dates-in-javascript.html in your case you'll need to capture the selected date from the "Week Ending" Date Picker and then calculate the dates for the others date pickers.
var endWeekDate = new Date(2010, 1, 14); //Month is 0-11 in JavaScript var Saturday = endWeekDate.setDate(1); var Sunday = endWeekDate.setDate(2); var Monday = endWeekDate.setDate(3); var Tuesday = endWeekDate.setDate(4);
Then you use the calculated values to fill the date pickers for each day.

If you have any questions, please let us know.
Thank you.
mcwatson

Replied on November 4, 2014 at 3:14 AM

Thanks for this........ I have little to no idea of where to put this script into the source code, any chance you could advise if I cut and paste it below?

<script src="//max.jotfor.ms/static/prototype.forms.js" type="text/javascript"></script>

<script src="//max.jotfor.ms/static/jotform.forms.js?3.2.4234" type="text/javascript"></script>

<script src="https://js.jotform.com/vendor/postMessage.min.js" type="text/javascript"></script>

<script src="https://js.jotform.com/WidgetsServer.js" type="text/javascript"></script>

<script type="text/javascript">

JotForm.init(function(){

JotForm.calendarMonths = ["January","February","March","April","May","June","July","August","September","October","November","December"];

JotForm.calendarDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];

JotForm.calendarOther = {"today":"Today"};

JotForm.setCalendar("4", false);

JotForm.displayLocalTime("hour_4", "min_4", "ampm_4");

JotForm.calendarMonths = ["January","February","March","April","May","June","July","August","September","October","November","December"];

JotForm.calendarDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];

JotForm.calendarOther = {"today":"Today"};

JotForm.setCalendar("7", false);

JotForm.displayLocalTime("hour_7", "min_7", "ampm_7");

JotForm.displayLocalTime("input_8_hourSelect", "input_8_minuteSelect", "input_8_ampm");

JotForm.displayLocalTime("input_51_hourSelect", "input_51_minuteSelect", "input_51_ampm");

JotForm.calendarMonths = ["January","February","March","April","May","June","July","August","September","October","November","December"];

JotForm.calendarDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];

JotForm.calendarOther = {"today":"Today"};

JotForm.setCalendar("12", false);

JotForm.displayLocalTime("hour_12", "min_12", "ampm_12");

JotForm.displayLocalTime("input_14_hourSelect", "input_14_minuteSelect", "input_14_ampm");

JotForm.displayLocalTime("input_22_hourSelect", "input_22_minuteSelect", "input_22_ampm");

JotForm.calendarMonths = ["January","February","March","April","May","June","July","August","September","October","November","December"];

JotForm.calendarDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];

JotForm.calendarOther = {"today":"Today"};

JotForm.setCalendar("20", false);

JotForm.displayLocalTime("hour_20", "min_20", "ampm_20");

JotForm.displayLocalTime("input_21_hourSelect", "input_21_minuteSelect", "input_21_ampm");

JotForm.displayLocalTime("input_9_hourSelect", "input_9_minuteSelect", "input_9_ampm");

JotForm.calendarMonths = ["January","February","March","April","May","June","July","August","September","October","November","December"];

JotForm.calendarDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];

JotForm.calendarOther = {"today":"Today"};

JotForm.setCalendar("25", false);

JotForm.displayLocalTime("hour_25", "min_25", "ampm_25");

JotForm.displayLocalTime("input_26_hourSelect", "input_26_minuteSelect", "input_26_ampm");

JotForm.displayLocalTime("input_27_hourSelect", "input_27_minuteSelect", "input_27_ampm");

JotForm.calendarMonths = ["January","February","March","April","May","June","July","August","September","October","November","December"];

JotForm.calendarDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];

JotForm.calendarOther = {"today":"Today"};

JotForm.setCalendar("30", false);

JotForm.displayLocalTime("hour_30", "min_30", "ampm_30");

JotForm.displayLocalTime("input_31_hourSelect", "input_31_minuteSelect", "input_31_ampm");

JotForm.displayLocalTime("input_32_hourSelect", "input_32_minuteSelect", "input_32_ampm");

JotForm.calendarMonths = ["January","February","March","April","May","June","July","August","September","October","November","December"];

JotForm.calendarDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];

JotForm.calendarOther = {"today":"Today"};

JotForm.setCalendar("35", false);

JotForm.displayLocalTime("hour_35", "min_35", "ampm_35");

JotForm.displayLocalTime("input_36_hourSelect", "input_36_minuteSelect", "input_36_ampm");

JotForm.displayLocalTime("input_37_hourSelect", "input_37_minuteSelect", "input_37_ampm");

JotForm.calendarMonths = ["January","February","March","April","May","June","July","August","September","October","November","December"];

JotForm.calendarDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];

JotForm.calendarOther = {"today":"Today"};

JotForm.setCalendar("40", false);

JotForm.displayLocalTime("hour_40", "min_40", "ampm_40");

JotForm.displayLocalTime("input_41_hourSelect", "input_41_minuteSelect", "input_41_ampm");

JotForm.displayLocalTime("input_42_hourSelect", "input_42_minuteSelect", "input_42_ampm");

});

</script>

<link href="http://max.jotfor.ms/static/formCss.css?3.2.4234" rel="stylesheet" type="text/css" />

<link type="text/css" rel="stylesheet" href="http://max.jotfor.ms/css/styles/big.css?3.2.4234" />

<link type="text/css" media="print" rel="stylesheet" href="http://max.jotfor.ms/css/printForm.css?3.2.4234" />

<style type="text/css">

.form-label-left{

width:200px !important;

}

.form-line{

padding-top:12px;

padding-bottom:12px;

}

.form-label-right{

width:200px !important;

}

.form-all{

width:325px;

color:black !important;

font-family:'Verdana';

font-size:18px;

}

.form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header{

color: black;

}

/* Injected CSS Code */

/* line 82, https://www.jotform.com/themes/css/style.less */

.form-all {

font-family: "Verdana", sans-serif;

}

/* line 115, https://www.jotform.com/themes/css/style.less */

.form-all {

width: 600px;

}

/* line 131, https://www.jotform.com/themes/css/style.less */

.form-label-left,

.form-label-right {

width: 150px;

}

/* line 142, https://www.jotform.com/themes/css/style.less */

.form-label {

white-space: normal;

}

/* line 144, https://www.jotform.com/themes/css/style.less */

.form-label.form-label-auto {

display: inline-block;

float: left;

text-align: left;

width: 150px;

}

/* line 168, https://www.jotform.com/themes/css/style.less */

.form-label-left {

display: inline-block;

white-space: normal;

float: left;

text-align: left;

}

/* line 175, https://www.jotform.com/themes/css/style.less */

.form-label-right {

display: inline-block;

white-space: normal;

float: left;

text-align: right;

}

/* line 182, https://www.jotform.com/themes/css/style.less */

.form-label-top {

white-space: normal;

display: block;

float: none;

text-align: left;

}

/* line 195, https://www.jotform.com/themes/css/style.less */

.form-all {

font-size: 12px;

}

/* line 207, https://www.jotform.com/themes/css/style.less */

.form-label {

font-weight: bold;

}

/* line 211, https://www.jotform.com/themes/css/style.less */

.form-checkbox-item label,

.form-radio-item label {

font-weight: normal;

}

/* line 278, https://www.jotform.com/themes/css/style.less */

.supernova {

background-color: none;

}

/* line 280, https://www.jotform.com/themes/css/style.less */

.supernova body {

background-color: transparent;

}

/*

@width30: (unit(@formWidth, px) + 60px);

@width60: (unit(@formWidth, px)+ 120px);

@width90: (unit(@formWidth, px)+ 180px);

*/

/* | */

@media screen and (min-width: 480px) {

/* line 296, https://www.jotform.com/themes/css/style.less */

.supernova {

background-color: #ffffff;

}

}

/* | */

/* | */

@media screen and (max-width: 480px) {

/* line 316, https://www.jotform.com/themes/css/style.less */

.jotform-form {

padding: 10px 0;

}

}

/* | */

/* | */

@media screen and (min-width: 480px) and (max-width: 768px) {

/* line 322, https://www.jotform.com/themes/css/style.less */

.jotform-form {

padding: 30px 0;

}

}

/* | */

/* | */

@media screen and (min-width: 768px) and (max-width: 1024px) {

/* line 328, https://www.jotform.com/themes/css/style.less */

.jotform-form {

padding: 60px 0;

}

}

/* | */

/* | */

@media screen and (min-width: 1024px) {

/* line 334, https://www.jotform.com/themes/css/style.less */

.jotform-form {

padding: 90px 0;

}

}

/* | */

/* line 343, https://www.jotform.com/themes/css/style.less */

.form-all {

background-color: none;

border: 1px solid transparent;

}

/* line 369, https://www.jotform.com/themes/css/style.less */

.form-all {

color: #000000;

}

/* line 374, https://www.jotform.com/themes/css/style.less */

.form-header-group .form-header {

color: #000000;

}

/* line 377, https://www.jotform.com/themes/css/style.less */

.form-header-group .form-subHeader {

color: #1a1a1a;

}

/* line 382, https://www.jotform.com/themes/css/style.less */

.form-sub-label {

color: #1a1a1a;

}

/* line 388, https://www.jotform.com/themes/css/style.less */

.form-label-top,

.form-label-left,

.form-label-right {

color: #000000;

}

/* line 394, https://www.jotform.com/themes/css/style.less */

.form-textbox,

.form-textarea,

.form-radio-other-input,

.form-checkbox-other-input,

.form-captcha input,

.form-spinner input,

.form-checkbox-item label,

.form-radio-item label {

color: #1a1a1a;

}

/* line 437, https://www.jotform.com/themes/css/style.less */

.form-line.form-line-active {

-webkit-transition-property: all;

-moz-transition-property: all;

-ms-transition-property: all;

-o-transition-property: all;

transition-property: all;

-webkit-transition-duration: 0.3s;

-moz-transition-duration: 0.3s;

-ms-transition-duration: 0.3s;

-o-transition-duration: 0.3s;

transition-duration: 0.3s;

-webkit-transition-timing-function: ease;

-moz-transition-timing-function: ease;

-ms-transition-timing-function: ease;

-o-transition-timing-function: ease;

transition-timing-function: ease;

background-color: #ffffe0;

}

/* ömer */

/* line 445, https://www.jotform.com/themes/css/style.less */

.form-radio-item,

.form-checkbox-item {

padding-bottom: 0px !important;

}

/* line 447, https://www.jotform.com/themes/css/style.less */

.form-radio-item:last-child,

.form-checkbox-item:last-child {

padding-bottom: 0;

}

/* ömer */

/*.ctrl-custom-size(@bgSize, @tickSize, @tickOffsetTop, @tickOffsetLeft, @radius) {

input {

display: none;

}

label {

position: relative;

margin-left: 0;

}

label:before {

content: '';

position: relative;

display: inline-block;

vertical-align: baseline;

margin-right: 4px;

.border-box();

.rounded(@radius);

width: @bgSize;

height: @bgSize;

}

label:after {

content: '';

position: absolute;

z-index: 10;

display: inline-block;

opacity: 0;

top:@tickOffsetTop;

left:@tickOffsetLeft;

width: @tickSize;

height: @tickSize;

.rounded(@radius);

}

input:checked + label:after {

opacity: 1;

}

}*/

/* line 684, https://www.jotform.com/themes/css/style.less */

.form-single-column .form-checkbox-item,

.form-single-column .form-radio-item {

width: 100%;

}

/* line 1165, https://www.jotform.com/themes/css/style.less */

.supernova {

background-repeat: no-repeat;

background-attachment: scroll;

background-position: center top;

background-repeat: repeat;

}

/* | */

@media screen and (min-width: 480px) {

/* line 1188, https://www.jotform.com/themes/css/style.less */

.supernova {

background-image: url("//static-interlogyllc.netdna-ssl.com/themes/img/blank.gif");

}

}

/* line 1195, https://www.jotform.com/themes/css/style.less */

#stage {

background-image: url("//static-interlogyllc.netdna-ssl.com/themes/img/blank.gif");

}

/* | */

/* line 1209, https://www.jotform.com/themes/css/style.less */

.form-all {

background-image: url("//static-interlogyllc.netdna-ssl.com/themes/img/blank.gif");

background-repeat: no-repeat;

background-attachment: scroll;

background-position: center top;

background-repeat: repeat;

}

/* line 1238, https://www.jotform.com/themes/css/style.less */

.form-header-group {

background-repeat: no-repeat;

background-attachment: scroll;

background-position: center top;

}

/* line 1265, https://www.jotform.com/themes/css/style.less */

.form-line {

margin-top: 12px;

margin-bottom: 12px;

}

/* line 1283, https://www.jotform.com/themes/css/style.less */

.form-line {

padding: 12px 36px;

}

/* line 1411, https://www.jotform.com/themes/css/style.less */

.form-all .qq-upload-button,

.form-all .form-submit-button,

.form-all .form-submit-reset,

.form-all .form-submit-print {

font-size: 1em;

padding: 9px 15px;

font-family: "Verdana", sans-serif;

font-size: 12px;

font-weight: normal;

}

/* line 1550, https://www.jotform.com/themes/css/style.less */

.form-all .form-pagebreak-back,

.form-all .form-pagebreak-next {

font-size: 1em;

padding: 9px 15px;

font-family: "Verdana", sans-serif;

font-size: 12px;

font-weight: normal;

}

/*

TODO: Significant improvement possibility:

following import statement is not required in design mode,

but it should be inside the exported css of current design, in the form itself

when it is shown to people. Being of this here, causing re-drawn problems.

we should find a way to only include this in css send while saving current design

see prepareModel4Save for implementation for @buttonFontType

*/

/*

& when ( @buttonFontType = google ) {

@import (css) "@{buttonFontLink}";

}

*/

/* line 1687, https://www.jotform.com/themes/css/style.less */

h2.form-header {

line-height: 1.618em;

font-size: 1.714em;

}

/* line 1694, https://www.jotform.com/themes/css/style.less */

h2 ~ .form-subHeader {

line-height: 1.5em;

font-size: 1.071em;

}

/* line 1708, https://www.jotform.com/themes/css/style.less */

.form-header-group {

text-align: left;

}

/* line 1719, https://www.jotform.com/themes/css/style.less */

.form-header-group {

background-image: url("//static-interlogyllc.netdna-ssl.com/themes/img/blank.gif");

}

/*.form-dropdown,

.form-radio-item,

.form-checkbox-item,

.form-radio-other-input,

.form-checkbox-other-input,*/

/* line 2003, https://www.jotform.com/themes/css/style.less */

.form-captcha input,

.form-spinner input,

.form-error-message {

padding: 4px 3px 2px 3px;

}

/* line 2018, https://www.jotform.com/themes/css/style.less */

.form-header-group {

font-family: "Verdana", sans-serif;

}

/* line 2039, https://www.jotform.com/themes/css/style.less */

.form-section {

padding: 0px 0px 0px 0px;

}

/* line 2050, https://www.jotform.com/themes/css/style.less */

.form-header-group {

margin: 12px 36px 12px 36px;

}

/* line 2061, https://www.jotform.com/themes/css/style.less */

.form-header-group {

padding: 24px 0px 24px 0px;

}

/* line 2104, https://www.jotform.com/themes/css/style.less */

.form-textbox,

.form-textarea {

padding: 4px 3px 2px 3px;

}

/*@textInputStyle: "ti-default";

@textInputBorderWidth: -1;

@textInputBorderStyle: -1;

@clrTextInputBorder: -1;

@clrTextInputBg: -1;

@clrTextInputFont: -1;

@textInputHeight: -1;

@textAreaHeight: -1;

& when ( @formControlStyle = ti-default ) {

}*/

/* line 2318, https://www.jotform.com/themes/css/style.less */

[data-type="control_dropdown"] .form-input,

[data-type="control_dropdown"] .form-input-wide {

width: 150px;

}

/* line 2685, https://www.jotform.com/themes/css/style.less */

.form-label {

font-family: "Verdana", sans-serif;

}

/* line 2705, https://www.jotform.com/themes/css/style.less */

li[data-type="control_image"] div {

text-align: left;

}

/* line 2709, https://www.jotform.com/themes/css/style.less */

li[data-type="control_image"] img {

border: none;

border-width: 0px !important;

border-style: solid !important;

border-color: false !important;

}

/* line 2751, https://www.jotform.com/themes/css/style.less */

.form-line-column {

width: auto;

}

/* line 2796, https://www.jotform.com/themes/css/style.less */

.form-line-error {

overflow: hidden;

-webkit-transition-property: none;

-moz-transition-property: none;

-ms-transition-property: none;

-o-transition-property: none;

transition-property: none;

-webkit-transition-duration: 0.3s;

-moz-transition-duration: 0.3s;

-ms-transition-duration: 0.3s;

-o-transition-duration: 0.3s;

transition-duration: 0.3s;

-webkit-transition-timing-function: ease;

-moz-transition-timing-function: ease;

-ms-transition-timing-function: ease;

-o-transition-timing-function: ease;

transition-timing-function: ease;

background-color: #fff4f4;

}

/* line 2801, https://www.jotform.com/themes/css/style.less */

.form-line-error .form-error-message {

background-color: #ff3200;

width: 150px;

clear: both;

float: none;

}

/* line 2806, https://www.jotform.com/themes/css/style.less */

.form-line-error .form-error-message .form-error-arrow {

border-bottom-color: #ff3200;

}

/* line 2811, https://www.jotform.com/themes/css/style.less */

.form-line-error input:not(#coupon-input),

.form-line-error textarea,

.form-line-error .form-validation-error {

border: 1px solid #ff3200;

-webkit-box-shadow: 0 0 3px #ff3200;

-moz-box-shadow: 0 0 3px #ff3200;

box-shadow: 0 0 3px #ff3200;

}

/* | */

@media screen and (max-width: 768px) {

/* line 3077, https://www.jotform.com/themes/css/style.less */

.form-all {

border: 0;

width: 100%;

}

/* line 3078, https://www.jotform.com/themes/css/style.less */

.form-sub-label-container {

width: 100%;

margin: 0;

}

/* line 3079, https://www.jotform.com/themes/css/style.less */

.form-input {

width: 100%;

}

/* line 3080, https://www.jotform.com/themes/css/style.less */

.form-label {

width: 100%!important;

}

/* line 3081, https://www.jotform.com/themes/css/style.less */

.form-line {

padding: 2% 5%;

margin: 0;

}

/* line 3082, https://www.jotform.com/themes/css/style.less */

input[type=text],

input[type=email],

input[type=tel],

textarea {

width: 100%;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

/* line 3083, https://www.jotform.com/themes/css/style.less */

.form-header-group {

padding: 3% 0!important;

margin: 5%!important;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

/* line 3084, https://www.jotform.com/themes/css/style.less */

.form-buttons-wrapper {

margin: 0!important;

}

/* line 3085, https://www.jotform.com/themes/css/style.less */

.form-buttons-wrapper button {

width: 100%;

}

/* line 3087, https://www.jotform.com/themes/css/style.less */

table {

width: 100%!important;

}

/* line 3088, https://www.jotform.com/themes/css/style.less */

table td + td {

padding-left: 3%;

}

/* line 3091, https://www.jotform.com/themes/css/style.less */

.form-checkbox-item input,

.form-radio-item input {

width: auto;

}

}

/* | */

/*__INSPECT_SEPERATOR__*/

.form-textbox {

}

.time-dropdown.noDefault.form-dropdown {

}

#input_8_hourSelect {

}

#input_8_ampm {

}

#input_14_ampm {

}

/* Injected CSS Code */

</style>

<form class="jotform-form" action="http://submit.jotformeu.com/submit/42853437275360/" method="post" name="form_42853437275360" id="42853437275360" accept-charset="utf-8">

<input type="hidden" name="formID" value="42853437275360" />

<div class="form-all">

<ul class="form-section">

<li id="cid_61" class="form-input-wide" data-type="control_head">

<div class="form-header-group">

<div class="header-text httal htvam">

<h2 id="header_61" class="form-header">

CIS EMPLOYEE TIMESHEET

</h2>

</div>

</div>

</li>

<li class="form-line" data-type="control_textbox" id="id_3">

<label class="form-label form-label-left form-label-auto" id="label_3" for="input_3">

Employee Name:

<span class="form-required">

*

</span>

</label>

<div id="cid_3" class="form-input">

<input type="text" class=" form-textbox validate[required]" data-type="input-textbox" id="input_3" name="q3_employeeName" size="20" value="" />

</div>

</li>

<li class="form-line" data-type="control_datetime" id="id_4">

<label class="form-label form-label-left form-label-auto" id="label_4" for="input_4">

Week Ending:

<span class="form-required">

*

</span>

</label>

<div id="cid_4" class="form-input">

<span class="form-sub-label-container">

<input class="form-textbox validate[required]" id="day_4" name="q4_weekEnding[day]" type="tel" size="2" maxlength="2" value="04" />

<span class="date-separate">

 -

</span>

<label class="form-sub-label" for="day_4" id="sublabel_day"> Day </label>

</span>

<span class="form-sub-label-container">

<input class="form-textbox validate[required]" id="month_4" name="q4_weekEnding[month]" type="tel" size="2" maxlength="2" value="11" />

<span class="date-separate">

 -

</span>

<label class="form-sub-label" for="month_4" id="sublabel_month"> Month </label>

</span>

<span class="form-sub-label-container">

<input class="form-textbox validate[required]" id="year_4" name="q4_weekEnding[year]" type="tel" size="4" maxlength="4" value="2014" />

<label class="form-sub-label" for="year_4" id="sublabel_year"> Year </label>

</span>

<span class="form-sub-label-container">

<img class="showAutoCalendar" alt="Pick a Date0" id="input_4_pick" src="//max.jotfor.ms/images/calendar.png" align="absmiddle" />

<label class="form-sub-label" for="input_4_pick">

<div>

   

</div>

</label>

</span>

</div>

</li>

<li class="form-line" data-type="control_text" id="id_60">

<div id="cid_60" class="form-input-wide">

<div id="text_60" class="form-html">

<p></p>

<hr style="color:#666666;border:dashed;" />

</div>

</div>

</li>

<li class="form-line" data-type="control_datetime" id="id_7">

<label class="form-label form-label-left form-label-auto" id="label_7" for="input_7"> SATURDAY: </label>

<div id="cid_7" class="form-input">

<span class="form-sub-label-container">

<input class="noDefault form-textbox" id="day_7" name="q7_saturday7[day]" type="tel" size="2" maxlength="2" value="" />

<span class="date-separate">

 -

</span>

<label class="form-sub-label" for="day_7" id="sublabel_day"> Day </label>

</span>

<span class="form-sub-label-container">

<input class="form-textbox" id="month_7" name="q7_saturday7[month]" type="tel" size="2" maxlength="2" value="" />

<span class="date-separate">

 -

</span>

<label class="form-sub-label" for="month_7" id="sublabel_month"> Month </label>

</span>

<span class="form-sub-label-container">

<input class="form-textbox" id="year_7" name="q7_saturday7[year]" type="tel" size="4" maxlength="4" value="" />

<label class="form-sub-label" for="year_7" id="sublabel_year"> Year </label>

</span>

<span class="form-sub-label-container">

<img class="showAutoCalendar" alt="Pick a Date0" id="input_7_pick" src="//max.jotfor.ms/images/calendar.png" align="absmiddle" />

<label class="form-sub-label" for="input_7_pick">

<div>

   

</div>

</label>

</span>

</div>

</li>

<li class="form-line" data-type="control_time" id="id_8">

<label class="form-label form-label-left form-label-auto" id="label_8" for="input_8"> Time started: </label>

<div id="cid_8" class="form-input">

<span class="form-sub-label-container">

<select class="time-dropdown noDefault form-dropdown" id="input_8_hourSelect" name="q8_timeStarted[hourSelect]">

<option> </option>

<option value="1"> 1 </option>

<option value="2"> 2 </option>

<option value="3"> 3 </option>

<option value="4"> 4 </option>

<option value="5"> 5 </option>

<option value="6"> 6 </option>

<option value="7"> 7 </option>

<option value="8"> 8 </option>

<option value="9"> 9 </option>

<option value="10"> 10 </option>

<option value="11"> 11 </option>

<option value="12"> 12 </option>

</select>

<span class="date-separate">

 :

</span>

<label class="form-sub-label" for="input_8_hourSelect" id="sublabel_hour"> Hour </label>

</span>

<span class="form-sub-label-container">

<select class="time-dropdown form-dropdown" id="input_8_minuteSelect" name="q8_timeStarted[minuteSelect]">

<option> </option>

<option value="00"> 00 </option>

<option value="10"> 10 </option>

<option value="20"> 20 </option>

<option value="30"> 30 </option>

<option value="40"> 40 </option>

<option value="50"> 50 </option>

</select>

<label class="form-sub-label" for="input_8_minuteSelect" id="sublabel_minutes"> Minutes </label>

</span>

<span class="form-sub-label-container">

<select class="time-dropdown form-dropdown" id="input_8_ampm" name="q8_timeStarted[ampm]">

<option selected="selected" value="AM"> AM </option>

<option value="PM"> PM </option>

</select>

<label class="form-sub-label" for="input_8_ampm">

<div>

   

</div>

</label>

</span>

</div>

</li>

<li class="form-line" data-type="control_time" id="id_51">

<label class="form-label form-label-left form-label-auto" id="label_51" for="input_51"> Time Finished: </label>

<div id="cid_51" class="form-input">

<span class="form-sub-label-container">

<select class="time-dropdown noDefault form-dropdown" id="input_51_hourSelect" name="q51_timeFinished51[hourSelect]">

<option> </option>

<option value="1"> 1 </option>

<option value="2"> 2 </option>

<option value="3"> 3 </option>

<option value="4"> 4 </option>

<option value="5"> 5 </option>

<option value="6"> 6 </option>

<option value="7"> 7 </option>

<option value="8"> 8 </option>

<option value="9"> 9 </option>

<option value="10"> 10 </option>

<option value="11"> 11 </option>

<option value="12"> 12 </option>

</select>

<span class="date-separate">

 :

</span>

<label class="form-sub-label" for="input_51_hourSelect" id="sublabel_hour"> Hour </label>

</span>

<span class="form-sub-label-container">

<select class="time-dropdown form-dropdown" id="input_51_minuteSelect" name="q51_timeFinished51[minuteSelect]">

<option> </option>

<option value="00"> 00 </option>

<option value="10"> 10 </option>

<option value="20"> 20 </option>

<option value="30"> 30 </option>

<option value="40"> 40 </option>

<option value="50"> 50 </option>

</select>

<label class="form-sub-label" for="input_51_minuteSelect" id="sublabel_minutes"> Minutes </label>

</span>

<span class="form-sub-label-container">

<select class="time-dropdown form-dropdown" id="input_51_ampm" name="q51_timeFinished51[ampm]">

<option selected="selected" value="AM"> AM </option>

<option value="PM"> PM </option>

</select>

<label class="form-sub-label" for="input_51_ampm">

<div>

   

</div>

</label>

</span>

</div>

</li>

<li class="form-line" data-type="control_textbox" id="id_11">

<label class="form-label form-label-left form-label-auto" id="label_11" for="input_11"> Job Reference: </label>

<div id="cid_11" class="form-input">

<input type="text" class=" form-textbox" data-type="input-textbox" id="input_11" name="q11_jobReference" size="20" value="" />

</div>

</li>

<li class="form-line" data-type="control_textarea" id="id_16">

<label class="form-label form-label-left form-label-auto" id="label_16" for="input_16"> Activities: </label>

<div id="cid_16" class="form-input">

<textarea id="input_16" class="form-textarea" name="q16_activities16" cols="29" rows="6"></textarea>

</div>

</li>

<li class="form-line" data-type="control_text" id="id_53">

<div id="cid_53" class="form-input-wide">

<div id="text_53" class="form-html">

<p></p>

<hr style="color:#666666;border:dashed;" />

</div>

</div>

</li>

<li class="form-line" data-type="control_datetime" id="id_12">

<label class="form-label form-label-left form-label-auto" id="label_12" for="input_12"> SUNDAY: </label>

<div id="cid_12" class="form-input">

<span class="form-sub-label-container">

<input class="noDefault form-textbox" id="day_12" name="q12_sunday12[day]" type="tel" size="2" maxlength="2" value="" />

<span class="date-separate">

 -

</span>

<label class="form-sub-label" for="day_12" id="sublabel_day"> Day </label>

</span>

<span class="form-sub-label-container">

<input class="form-textbox" id="month_12" name="q12_sunday12[month]" type="tel" size="2" maxlength="2" value="" />

<span class="date-separate">

 -

</span>

<label class="form-sub-label" for="month_12" id="sublabel_month"> Month </label>

</span>

<span class="form-sub-label-container">

<input class="form-textbox" id="year_12" name="q12_sunday12[year]" type="tel" size="4" maxlength="4" value="" />

<label class="form-sub-label" for="year_12" id="sublabel_year"> Year </label>

</span>

<span class="form-sub-label-container">

<img class="showAutoCalendar" alt="Pick a Date0" id="input_12_pick" src="//max.jotfor.ms/images/calendar.png" align="absmiddle" />

<label class="form-sub-label" for="input_12_pick">

<div>

   

</div>

</label>

</span>

</div>

</li>

<li class="form-line" data-type="control_time" id="id_14">

<label class="form-label form-label-left form-label-auto" id="label_14" for="input_14"> Time started: </label>

<div id="cid_14" class="form-input">

<span class="form-sub-label-container">

<select class="time-dropdown noDefault form-dropdown" id="input_14_hourSelect" name="q14_timeStarted14[hourSelect]">

<option> </option>

<option value="1"> 1 </option>

<option value="2"> 2 </option>

<option value="3"> 3 </option>

<option value="4"> 4 </option>

<option value="5"> 5 </option>

<option value="6"> 6 </option>

<option value="7"> 7 </option>

<option value="8"> 8 </option>

<option value="9"> 9 </option>

<option value="10"> 10 </option>

<option value="11"> 11 </option>

<option value="12"> 12 </option>

</select>

<span class="date-separate">

 :

</span>

<label class="form-sub-label" for="input_14_hourSelect" id="sublabel_hour"> Hour </label>

</span>

<span class="form-sub-label-container">

<select class="time-dropdown form-dropdown" id="input_14_minuteSelect" name="q14_timeStarted14[minuteSelect]">

<option> </option>

<option value="00"> 00 </option>

<option value="10"> 10 </option>

<option value="20"> 20 </option>

<option value="30"> 30 </option>

<option value="40"> 40 </option>

<option value="50"> 50 </option>

</select>

<label class="form-sub-label" for="input_14_minuteSelect" id="sublabel_minutes"> Minutes </label>

</span>

<span class="form-sub-label-container">

<select class="time-dropdown form-dropdown" id="input_14_ampm" name="q14_timeStarted14[ampm]">

<option selected="selected" value="AM"> AM </option>

<option value="PM"> PM </option>

</select>

<label class="form-sub-label" for="input_14_ampm">

<div>

   

</div>

</label>

</span>

</div>

</li>

<li class="form-line" data-type="control_time" id="id_22">

<label class="form-label form-label-left form-label-auto" id="label_22" for="input_22"> Time Finished: </label>

<div id="cid_22" class="form-input">

<span class="form-sub-label-container">

<select class="time-dropdown noDefault form-dropdown" id="input_22_hourSelect" name="q22_timeFinished22[hourSelect]">

<option> </option>

<option value="1"> 1 </option>

<option value="2"> 2 </option>

<option value="3"> 3 </option>

<option value="4"> 4 </option>

<option value="5"> 5 </option>

<option value="6"> 6 </option>

<option value="7"> 7 </option>

<option value="8"> 8 </option>

<option value="9"> 9 </option>

<option value="10"> 10 </option>

<option value="11"> 11 </option>

<option value="12"> 12 </option>

</select>

<span class="date-separate">

 :

</span>

<label class="form-sub-label" for="input_22_hourSelect" id="sublabel_hour"> Hour </label>

</span>

<span class="form-sub-label-container">

<select class="time-dropdown form-dropdown" id="input_22_minuteSelect" name="q22_timeFinished22[minuteSelect]">

<option> </option>

<option value="00"> 00 </option>

<option value="10"> 10 </option>

<option value="20"> 20 </option>

<option value="30"> 30 </option>

<option value="40"> 40 </option>

<option value="50"> 50 </option>

</select>

<label class="form-sub-label" for="input_22_minuteSelect" id="sublabel_minutes"> Minutes </label>

</span>

<span class="form-sub-label-container">

<select class="time-dropdown form-dropdown" id="input_22_ampm" name="q22_timeFinished22[ampm]">

<option selected="selected" value="AM"> AM </option>

<option value="PM"> PM </option>

</select>

<label class="form-sub-label" for="input_22_ampm">

<div>

   

</div>

</label>

</span>

</div>

</li>

<li class="form-line" data-type="control_textbox" id="id_15">

<label class="form-label form-label-left form-label-auto" id="label_15" for="input_15"> Job Reference: </label>

<div id="cid_15" class="form-input">

<input type="text" class=" form-textbox" data-type="input-textbox" id="input_15" name="q15_jobReference15" size="20" value="" />

</div>

</li>

<li class="form-line" data-type="control_textarea" id="id_10">

<label class="form-label form-label-left form-label-auto" id="label_10" for="input_10"> Activities: </label>

<div id="cid_10" class="form-input">

<textarea id="input_10" class="form-textarea" name="q10_activities" cols="29" rows="6"></textarea>

</div>

</li>

<li class="form-line" data-type="control_text" id="id_54">

<div id="cid_54" class="form-input-wide">

<div id="text_54" class="form-html">

<p></p>

<hr style="color:#666666;border:dashed;" />

</div>

</div>

</li>

<li class="form-line" data-type="control_datetime" id="id_20">

<label class="form-label form-label-left form-label-auto" id="label_20" for="input_20"> MONDAY: </label>

<div id="cid_20" class="form-input">

<span class="form-sub-label-container">

<input class="noDefault form-textbox" id="day_20" name="q20_monday[day]" type="tel" size="2" maxlength="2" value="" />

<span class="date-separate">

 -

</span>

<label class="form-sub-label" for="day_20" id="sublabel_day"> Day </label>

</span>

<span class="form-sub-label-container">

<input class="form-textbox" id="month_20" name="q20_monday[month]" type="tel" size="2" maxlength="2" value="" />

<span class="date-separate">

 -

</span>

<label class="form-sub-label" for="month_20" id="sublabel_month"> Month </label>

</span>

<span class="form-sub-label-container">

<input class="form-textbox" id="year_20" name="q20_monday[year]" type="tel" size="4" maxlength="4" value="" />

<label class="form-sub-label" for="year_20" id="sublabel_year"> Year </label>

</span>

<span class="form-sub-label-container">

<img class="showAutoCalendar" alt="Pick a Date0" id="input_20_pick" src="//max.jotfor.ms/images/calendar.png" align="absmiddle" />

<label class="form-sub-label" for="input_20_pick">

<div>

   

</div>

</label>

</span>

</div>

</li>

<li class="form-line" data-type="control_time" id="id_21">

<label class="form-label form-label-left form-label-auto" id="label_21" for="input_21"> Time started: </label>

<div id="cid_21" class="form-input">

<span class="form-sub-label-container">

<select class="time-dropdown noDefault form-dropdown" id="input_21_hourSelect" name="q21_timeStarted21[hourSelect]">

<option> </option>

<option value="1"> 1 </option>

<option value="2"> 2 </option>

<option value="3"> 3 </option>

<option value="4"> 4 </option>

<option value="5"> 5 </option>

<option value="6"> 6 </option>

<option value="7"> 7 </option>

<option value="8"> 8 </option>

<option value="9"> 9 </option>

<option value="10"> 10 </option>

<option value="11"> 11 </option>

<option value="12"> 12 </option>

</select>

<span class="date-separate">

 :

</span>

<label class="form-sub-label" for="input_21_hourSelect" id="sublabel_hour"> Hour </label>

</span>

<span class="form-sub-label-container">

<select class="time-dropdown form-dropdown" id="input_21_minuteSelect" name="q21_timeStarted21[minuteSelect]">

<option> </option>

<option value="00"> 00 </option>

<option value="10"> 10 </option>

<option value="20"> 20 </option>

<option value="30"> 30 </option>

<option value="40"> 40 </option>

<option value="50"> 50 </option>

</select>

<label class="form-sub-label" for="input_21_minuteSelect" id="sublabel_minutes"> Minutes </label>

</span>

<span class="form-sub-label-container">

<select class="time-dropdown form-dropdown" id="input_21_ampm" name="q21_timeStarted21[ampm]">

<option selected="selected" value="AM"> AM </option>

<option value="PM"> PM </option>

</select>

<label class="form-sub-label" for="input_21_ampm">

<div>

   

</div>

</label>

</span>

</div>

</li>

<li class="form-line" data-type="control_time" id="id_9">

<label class="form-label form-label-left form-label-auto" id="label_9" for="input_9"> Time Finished: </label>

<div id="cid_9" class="form-input">

<span class="form-sub-label-container">

<select class="time-dropdown noDefault form-dropdown" id="input_9_hourSelect" name="q9_timeFinished[hourSelect]">

<option> </option>

<option value="1"> 1 </option>

<option value="2"> 2 </option>

<option value="3"> 3 </option>

<option value="4"> 4 </option>

<option value="5"> 5 </option>

<option value="6"> 6 </option>

<option value="7"> 7 </option>

<option value="8"> 8 </option>

<option value="9"> 9 </option>

<option value="10"> 10 </option>

<option value="11"> 11 </option>

<option value="12"> 12 </option>

</select>

<span class="date-separate">

 :

</span>

<label class="form-sub-label" for="input_9_hourSelect" id="sublabel_hour"> Hour </label>

</span>

<span class="form-sub-label-container">

<select class="time-dropdown form-dropdown" id="input_9_minuteSelect" name="q9_timeFinished[minuteSelect]">

<option> </option>

<option value="00"> 00 </option>

<option value="10"> 10 </option>

<option value="20"> 20 </option>

<option value="30"> 30 </option>

<option value="40"> 40 </option>

<option value="50"> 50 </option>

</select>

<label class="form-sub-label" for="input_9_minuteSelect" id="sublabel_minutes"> Minutes </label>

</span>

<span class="form-sub-label-container">

<select class="time-dropdown form-dropdown" id="input_9_ampm" name="q9_timeFinished[ampm]">

<option selected="selected" value="AM"> AM </option>

<option value="PM"> PM </option>

</select>

<label class="form-sub-label" for="input_9_ampm">

<div>

   

</div>

</label>

</span>

</div>

</li>

<li class="form-line" data-type="control_textbox" id="id_23">

<label class="form-label form-label-left form-label-auto" id="label_23" for="input_23"> Job Reference: </label>

<div id="cid_23" class="form-input">

<input type="text" class=" form-textbox" data-type="input-textbox" id="input_23" name="q23_jobReference23" size="20" value="" />

</div>

</li>

<li class="form-line" data-type="control_textarea" id="id_24">

<label class="form-label form-label-left form-label-auto" id="label_24" for="input_24"> Activities: </label>

<div id="cid_24" class="form-input">

<textarea id="input_24" class="form-textarea" name="q24_activities24" cols="40" rows="6"></textarea>

</div>

</li>

<li class="form-line" data-type="control_text" id="id_55">

<div id="cid_55" class="form-input-wide">

<div id="text_55" class="form-html">

<p></p>

<hr style="color:#666666;border:dashed;" />

</div>

</div>

</li>

<li class="form-line" data-type="control_datetime" id="id_25">

<label class="form-label form-label-left form-label-auto" id="label_25" for="input_25"> TUESDAY: </label>

<div id="cid_25" class="form-input">

<span class="form-sub-label-container">

<input class="noDefault form-textbox" id="day_25" name="q25_tuesday[day]" type="tel" size="2" maxlength="2" value="" />

<span class="date-separate">

 -

</span>

<label class="form-sub-label" for="day_25" id="sublabel_day"> Day </label>

</span>

<span class="form-sub-label-container">

<input class="form-textbox" id="month_25" name="q25_tuesday[month]" type="tel" size="2" maxlength="2" value="" />

<span class="date-separate">

 -

</span>

<label class="form-sub-label" for="month_25" id="sublabel_month"> Month </label>

</span>

<span class="form-sub-label-container">

<input class="form-textbox" id="year_25" name="q25_tuesday[year]" type="tel" size="4" maxlength="4" value="" />

<label class="form-sub-label" for="year_25" id="sublabel_year"> Year </label>

</span>

<span class="form-sub-label-container">

<img class="showAutoCalendar" alt="Pick a Date0" id="input_25_pick" src="//max.jotfor.ms/images/calendar.png" align="absmiddle" />

<label class="form-sub-label" for="input_25_pick">

<div>

   

</div>

</label>

</span>

</div>

</li>

<li class="form-line" data-type="control_time" id="id_26">

<label class="form-label form-label-left form-label-auto" id="label_26" for="input_26"> Time started: </label>

<div id="cid_26" class="form-input">

<span class="form-sub-label-container">

<select class="time-dropdown noDefault form-dropdown" id="input_26_hourSelect" name="q26_timeStarted26[hourSelect]">

<option> </option>

<option value="1"> 1 </option>

<option value="2"> 2 </option>

<option value="3"> 3 </option>

<option value="4"> 4 </option>

<option value="5"> 5 </option>

<option value="6"> 6 </option>

<option value="7"> 7 </option>

<option value="8"> 8 </option>

<option value="9"> 9 </option>

<option value="10"> 10 </option>

<option value="11"> 11 </option>

<option value="12"> 12 </option>

</select>

<span class="date-separate">

 :

</span>

<label class="form-sub-label" for="input_26_hourSelect" id="sublabel_hour"> Hour </label>

</span>

<span class="form-sub-label-container">

<select class="time-dropdown form-dropdown" id="input_26_minuteSelect" name="q26_timeStarted26[minuteSelect]">

<option> </option>

<option value="00"> 00 </option>

<option value="10"> 10 </option>

<option value="20"> 20 </option>

<option value="30"> 30 </option>

<option value="40"> 40 </option>

<option value="50"> 50 </option>

</select>

<label class="form-sub-label" for="input_26_minuteSelect" id="sublabel_minutes"> Minutes </label>

</span>

<span class="form-sub-label-container">

<select class="time-dropdown form-dropdown" id="input_26_ampm" name="q26_timeStarted26[ampm]">

<option selected="selected" value="AM"> AM </option>

<option value="PM"> PM </option
Ashwin JotForm Support

Replied on November 4, 2014 at 7:18 AM

Hello mcwatson,

The code you have shared above is your form's source code.

Have you written the custom JavaScript code as suggested by my colleague? You cannot paste the code as it is and needs to be customized for your form fields. I am not sure if you want us to do that for you?

Do get back to us on this and we will try to help you. Please be noted that we cannot assure on the ETA as custom script workaround is little out of scope and we can only work in our free time.

Thank you!
mcwatson

Replied on November 4, 2014 at 10:39 AM

Hi Ashwin_d,

I thought your colleague suggested that I needed to get the source code of my form and then install the appropriate javascript within to retrieve the week ending date and work out the 'each day' dates. I didn't know how to do this so cut and paste the source code within the post above.

If I've misunderstood, then please delete that particular post as it makes for a very long reply!!

But whilst I'm relatively IT literate, I don't know how to carry out what has been suggested.

Mark.
raul

Replied on November 4, 2014 at 11:01 AM

Hi Mark,

I apologize for not explaining myself correctly.

What I meant was that you'll need the full source code of your form (the one you pasted here) and then you'll need to create the scripts in order to populate the date pickers with the calculated dates (the link that I shared with you provides a way to do this calculation).

What I suggest is that you create an HTML file, paste the full source code of your form and then try to capture the selected date for the Week Ending date picker and make one calculation for the date picker for Saturday using JavaScript, if you're able to do this then try with the Sunday date picker and then go on with the other date pickers.

As mentioned by @ashwin_d we can help you if you hit a bump, but if you want us to provide a complete solution then you'll need to allow us some time to work on it since we would have to do it in our free time.

Please let us know if you have further questions.
Thank you.