I had a need for a “Duration” field, and liked the idea of (instead of using a masked textbox or two dates (start and end)) using range sliders to increment the duration parts of the value.
Here’s how it’s built in the form designer.
A few notes about the form elements:
- Set the Initial Value of the “slider” TextBoxes to 0 (zero)
- Set the Control Id of each TextBox and then match your scripts
- Use an IncludeHTML component to define your CSS, if desired
Before we go over the code, note that formatted text in a javascript text creator field can break functionality, so the easiest way I’ve found to copy/paste javascript is to have a spare Notepad open to paste to first. Click to view:
I didn’t completely sanitize the code after extracting it from my production project, so there may be some extraneous code that can be stripped if desired. And here’s the code:
In the “Script” section of the form (javascript) –
function SetDuration() {
var timeSpent = document.getElementById('InputTimeSpent');
var timeSpentDays = document.getElementById('InputTimeSpentDays');
var timeSpentHours = document.getElementById('InputTimeSpentHours');
var timeSpentMins = document.getElementById('InputTimeSpentMins');
timeSpent.value = timeSpentDays.value + 'd ' + timeSpentHours.value + 'h ' + timeSpentMins.value + 'm';
if (timeSpent.value == '0d 0h 0m') {
timeSpent.value = timeSpent.placeholder;
timeSpent.className = 'gaInputBoxRequired';
} else {
timeSpent.className = 'gaInputBox aInputValid';
}
}
In the Body onload event of the form (javascript)-
// declarations
var timeSpent = document.getElementById('InputTimeSpent');
var timeSpentDays = document.getElementById('InputTimeSpentDays');
var timeSpentHours = document.getElementById('InputTimeSpentHours');
var timeSpentMins = document.getElementById('InputTimeSpentMins');
// create and value placeholder attributes for textboxes
timeSpent.setAttribute('placeholder','Enter Time Spent');
// assign appropriate type and css class to Time Spent text boxes
SetDuration();
timeSpent.readOnly = true;
timeSpentDays.setAttribute('type', 'range');
timeSpentDays.setAttribute('min', '0');
timeSpentDays.setAttribute('max', '30');
timeSpentDays.setAttribute('oninput', 'SetDuration()');
timeSpentHours.setAttribute('type', 'range');
timeSpentHours.setAttribute('min', '0');
timeSpentHours.setAttribute('max', '23');
timeSpentHours.setAttribute('oninput', 'SetDuration()');
timeSpentMins.setAttribute('type', 'range');
timeSpentMins.setAttribute('min', '0');
timeSpentMins.setAttribute('max', '59');
timeSpentMins.setAttribute('oninput', 'SetDuration()');
And here is the CSS to accompany the className javascript adjustments. Remember in your IncludeHTML component to wrap the entire CSS block in style tags.
.gaInputBox {
font-size: 12px;
font-family: Verdana, Serif;
padding-left: 3px;
padding-bottom: 2px;
background-color: #f7f7f7;
color: #999999;
-webkit-appearance: none;
border-radius: 0;
outline: none;
}
.gaInputBoxRequired {
font-size: 12px;
font-family: Verdana, Serif;
padding-left: 3px;
padding-bottom: 2px;
background-color: #f7f7f7;
color: #999999;
-webkit-appearance: none;
border-radius: 0;
border-right: solid 2px #cd5c5c;
outline: none;
}
.aInputValid {
background-color: #ffffff !important;
color: #525252 !important;
}
.gaInputTime {
padding-bottom: 2px;
background-color: #e6e6e6;
-webkit-appearance: none;
border-radius: 2px;
outline: none;
}
.gaLabel {
font-size: 12px;
font-family: Verdana, Serif;
text-align: left;
padding-left: 4px;
color: #525252;
}
.gaBlueButton {
text-transform: uppercase;
font-family: Verdana, Serif;
font-size: 12px;
letter-spacing: .5px;
border: none;
text-align: center;
color: white;
background-color: #569fbe;
outline: none !important;
padding-bottom: 2px;
cursor: pointer;
-webkit-appearance: none;
border-radius: 6px;
outline: none;
-moz-transition: top 200ms ease-in-out;
-o-transition: top 200ms ease-in-out;
-webkit-transition: top 200ms ease-in-out;
transition: top 200ms ease-in-out;
}
Here’s the link to a demo package as well Check out the Demos page for a demo package of this concept; dissecting it will likely be much more helpful than this write-up.
Further Reading
Featured Components
