Geek Answers Handbook

Split jQuery UI datepicker into 3 separate text fields

Does anyone know of an elegant way to split jquery-ui datepicker input into 3 separate fields?

By default, its input is only one text field: DD/MM/YYYY

I need to divide the input into 3 separate ones for the day, month and year: DD , MM and YYYY .

+4
source share
3 answers
 <input type='text' id='fullDate' name='fulldate'> <!-- Your other HTML fields listed above --> $('#fullDate').datepicker({ onSelect: function(dateText, inst) { var pieces = dateText.split('/'); $('#day').val(pieces[0]); $('#month').val(pieces[1]); $('#year').val(pieces[2]); } })

working example http://jsfiddle.net/jomanlk/7NgpQ/

+5
source

You can use the datepicker onClose function, then capture the value.

See http://jsfiddle.net/96FPU/

This will only work if dateFormat correctly refers to the index of the array, that is, in my example it works with day = index 0, month = index 1, year = index 1. Also in my example, I'm just assigning spans' values

+5
source

You can use the .datepicker('dialog') method to achieve this effect.

 function onSelect(dateText, inst) { var pieces = dateText.split('/'); for (var i = 0; i < pieces.length; ++i) $('.date:eq('+i+')').val(pieces[i]); }; $('.date').click(function(event) { var d = $('.date').map(function() { return $(this).val() }).get().join('/'); $(this).datepicker('dialog', d, onSelect, { dateFormat: 'dd/mm/yy' }, [10, 40]); });

See this in action: http://jsfiddle.net/william/QHasQ/ .

+3
source

More articles:


All Articles