3
2
1
Request from our call center forms to replace our current time field (in hh:mm format) by a time picker of some sort.
Has anyone done this? Would they have any advantage using any kind of time picker over using dropdowns for time?
  1. Doug Oldmeadow
    I'd welcome having a time picker too! My users are primarily mobile, so I've implemented this in drop-downs hours and minutes (in 15 minute increments). It's quite ugly from a form design perspective, but is very efficient from a mobile-data-entry perspective.
    I've also tried using a plain old text field with a regex to enforce hh:mm format, but being a text field, users have to manually switch to the numeric keyboard.
CommentAdd your comment...

1 answer

  1.  
    1
    0
    -1

    I managed to get this one working 

    http://xdsoft.net/jqplugins/datetimepicker/

     

    But it took a bit of wrangling. You have to add the js and css libraries as unwrapped (search.replace and wrap.in.closure = false). You can only get to one of those fields in the list view. 

    You also need to add a custom style to the fields you want to attach the picker to and create a separate script to init the fields. 

     

    jQuery(document).ready(function() {
    // options at http://xdsoft.net/jqplugins/datetimepicker/
    	jQuery('.zzdatetimepicker input').each(function() {
    	    jQuery(this).datetimepicker({
    	    format: 'd/m/Y H:i',
    	    defaultDate:new Date(),
    	    validateOnBlur: false,
    	    step: 15
    	    });
    	});
    	
    	jQuery('.zztimepicker input').each(function() {
    	    jQuery(this).datetimepicker({
    	    format: 'H:i',
    	    defaultDate:new Date(),
    	    datepicker:false,
    	    validateOnBlur: false,
    	    step: 15
    	    });
    	});
    });

    Is what I used to init my datetime and time pickers. 

    Details on writing jQuery selectors is here:

    http://www.w3schools.com/jquery/jquery_ref_selectors.asp

     

    I used validateOnBlur false, as it was throwing an error after losing focus trying to do some kind of mask based validation, but you can always validate using the built in avoka field validation.

    You may also have to include another vanilla version of jQuery if the above doesn't work. I previously attached it during my experiments.

     

    The only thing I have to figure out is if I can add an icon to the field to indicate it's a date or a time.  

      CommentAdd your comment...