Force Greater End Time.

🧪

Experimental Snippet

This snippet was discovered in the wizard’s chaotic laboratory — an unpolished experiment, conjured to solve a niche challenge. Use at your own risk.

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.

Code

Filename: gw-force-greater-end-time.js

/**
 * 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 );
		}
	}
}

Leave a Reply

Your email address will not be published. Required fields are marked *

  • Trouble installing this snippet? See our troubleshooting tips.
  • Need to include code? Create a gist and link to it in your comment.
  • Reporting a bug? Provide a URL where this issue can be recreated.

By commenting, I understand that I may receive emails related to Gravity Wiz and can unsubscribe at any time.