Support » Plugin: Date Picker in List Fields for Gravity Forms » Using datepicker for time only

  • Hi Ovann,

    Great plug-in. I was just wondering if it is possible to use it as a time selector only.
    Is there a way to do this with only javascript or does it require changing the plug-in?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author ovann86

    (@ovann86)

    Hey,

    Time is a great idea, but not something this plugin (or any other I know of) does.

    Sorry.

    Something worth adding – as I understand it, the Gravity Forms development team have started work on native “repeater” sections – so eventually you will be able to add a “time” field and have it repeat in your form, like you do with a list field. I don’t think they had a time frame, which makes me think it will be at least 6 months away.

    … if you’re desperate there is a third party plugin that tries to do this … but I WOULDNT use it – it has many issues, for example not working with the ‘save and continue’ feature.

    Ovann thank you for the info.

    It is some work but it all works now. Just wanted to share this so maybe someone can use it.
    For now I fixed it by loading the jquery.timepicker.min.js, some css styling.

    And adding this to the form HTML field:

    <script>
    jQuery(document).ready(function($){
        $('input.timepicker').timepicker({
            timeFormat: 'HH:mm',
            // year, month, day and seconds are not important
            minTime: new Date(0, 0, 0, 0, 0, 0),
            maxTime: new Date(0, 0, 0, 8, 0, 0),
            // time entries start being generated at 6AM but the plugin 
            // shows only those within the [minTime, maxTime] interval
            startHour: 6,
            // the value of the first item in the dropdown, when the input
            // field is empty. This overrides the startHour and startMinute 
            // options
            startTime: new Date(0, 0, 0, 0, 0, 0),
            // items in the dropdown are separated by at interval minutes
            interval: 15
        });
    });
    </script>
    

    I am using 15 minute intervals and max 8 hours as this is used for a registration form of worked hours.

    I changed the input field in de form with this code in functions.php:

    // ------------------------------------
    // add the timepicker class to list items
    // ------------------------------------
    
    function change_column_content( $input, $input_info, $field, $text, $value, $form_id ) {
        //build field name, must match List field syntax to be processed correctly
        $input_field_name = 'input_' . $field->id . '[]';
        $tabindex = GFCommon::get_tabindex();
        $new_input = '<input type="text" name="' . $input_field_name . '" ' . $tabindex . ' class="timepicker" value="'.$value.'" />';
        return $new_input;
    }
    

    And add the above function to the different fields. Make sure the numbers match your form fields.

    
    if(!is_admin()) {
    	// row 1 field 2
    	add_filter( 'gform_column_input_content_1_2_2', 'change_column_content', 10, 6 );
    	// row 1 field 3 
    	add_filter( 'gform_column_input_content_1_2_3', 'change_column_content', 10, 6 );
    .... et cetera
    }
    
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Using datepicker for time only’ is closed to new replies.