Force Greater End Time.
Force the user to enter an end time greater than the start time.
Instructions
- Install this snippet with our free Custom JavaScript plugin. https://gravitywiz.com/gravity-forms-code-chest/
- Configure based on the inline instructions.
Code
Filename: gw-force-greater-end-time.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
/**
* Gravity Wiz // Gravity Forms // Force Greater End Time.
* https://gravitywiz.com/
*
* Experimental Snippet
*
* Force the user to enter an end time greater than the start time.
*
* Instructions:
*
* 1. Install this snippet with our free Custom JavaScript plugin.
* https://gravitywiz.com/gravity-forms-code-chest/
* 2. Configure based on the inline instructions.
*/
// Update "3" to the Start Date Field ID.
var startDateId = 1;
// Update "4" to the End Date Field ID.
var endDateId = 3;
// Update "5" to the Start Time Field ID.
var startTimeFieldId = 4;
// Update "6" to the End Date Field ID.
var endTimeFieldId = 5;
var selectors = [
'#input_'+ GFFORMID + '_' + startDateId,
'#input_'+ GFFORMID + '_' + endDateId,
'#field_' + GFFORMID + '_' + startTimeFieldId,
'#field_' + GFFORMID + '_' + endTimeFieldId
];
$( selectors.join( ', ' ) ).change( function(){
evaluateTimes();
} );
function evaluateTimes() {
var startTimestamp = getTimestamp( startDateId, startTimeFieldId );
var endTimestamp = getTimestamp( endDateId, endTimeFieldId );
if ( ! startTimestamp || ! endTimestamp ) {
return false;
}
var difference = endTimestamp - startTimestamp;
if ( difference <= 60 * 60 * 1000 ) {
setEndTime( startTimestamp );
}
}
function getTimestamp ( dateFieldId, timeFieldId ){
var inputs = $( '#field_' + GFFORMID + '_' + timeFieldId ).find('input, select' );
var hour = inputs.eq( 0 ).val();
var min = inputs.eq( 1 ).val();
var ampm = inputs.eq( 2 ).val();
// @todo This only supports datepickers.
var datetime = new Date( $( '#input_'+ GFFORMID + '_' + dateFieldId ).val() );
if ( inputs.eq( 0 ).val() =='' || inputs.eq( 1 ).val() == '' ){
return false
}
if ( inputs.eq( 2 ).length ) {
if ( ampm.toLowerCase() === 'pm' ) {
datetime.setHours( parseInt( hour ) + ( hour === '12' ? 0 : 12 ) );
}else if ( ampm.toLowerCase() === 'am') {
datetime.setHours( parseInt( hour ) - ( hour === '12' ? 12 : 0 ) );
}
else{
datetime.setHours( parseInt( hour ) );
}
} else {
datetime.setHours( parseInt( hour ) );
}
datetime.setMinutes( min );
return datetime.getTime();
}
function setEndTime ( startTimestamp ) {
var endDateTime = new Date( startTimestamp );
var endInputs = $( '#field_' + GFFORMID + '_' + endTimeFieldId ).find( 'input, select' );
var hours = isNaN( endDateTime.getHours() ) ? '' : endDateTime.getHours() + 1,
minutes = isNaN( endDateTime.getMinutes() ) ? '' : endDateTime.getMinutes(),
hasAMPM = endInputs.length === 3,
isPM = false;
if ( hasAMPM ) {
if ( hours === 0 ) {
hours = 12;
} else if ( hours > 12 ) {
hours -= 12;
isPM = true;
} else if ( hours == 12 ) {
// for 12 PM, the PM display should update
isPM = true;
}
}
endInputs.eq( 0 ).val( ( '0' + hours ).slice( -2 ) );
endInputs.eq( 1 ).val( ( '0' + minutes ).slice( -2 ) );
if ( hasAMPM ) {
if ( isPM ) {
endInputs.eq( 2 ).find( 'option:last' ).prop( 'selected', true );
} else {
endInputs.eq( 2 ).find( 'option:first' ).prop( 'selected', true );
}
}
}