3

Good morning, this is my first question here in stackoverflow so have mercy ;)

I'm using the jQuery clockpicker plugin for some forms.

It seems, that the usage of the clockpicker is not clear for some of my users. They open the dialog, pick a hour and submit the form without picking a minute in the clockpicker! If they do so, the input for the time is empty (or is filled with the last used value). How can I get the selected hour from the clockpicker and put it into my input?

I found out, that there is an afterHourSelect() so I think this is what I need. My question is really simple I guess.

$('#tTimeFrom".$x."').clockpicker({
    autoclose: true,
    afterHourSelect: function() {
        $('#tTimeFrom".$x."').val( ??? );
    }
});

What do I have to write instead of ??? to get the actual selected hour from the clockpicker?

Insane Skull
  • 9,220
  • 9
  • 44
  • 63
Marian Schrader
  • 35
  • 6
  • 1
    provide a link to the jquery plugin source code and/or options documentation please. Welcome. – Nikos M. Dec 11 '15 at 09:17
  • nothing. write it into a variable: var actTime = $('#tTimeFrom".$x."').val(); – brandelizer Dec 11 '15 at 09:34
  • $('#tTimeFrom".$x."').val() is the input field and it's empty. I need the actual selected hour from the clockpicker and the clockpicker filles the input only if a hour AND a minute is selected. – Marian Schrader Dec 11 '15 at 09:37

2 Answers2

3

Sounds like your users want to be done when they pick the hours, you can grab the hours value inside the afterHourSelect callback and set the input value with X:00 before they chose minutes. This way if they quit the clockpicker dialogue you will have their input.

var end = $('#end').clockpicker({
    afterHourSelect: function() {
        var c = end.data();
        $('#end').val(c.clockpicker.hours + ':00');
    }
});
Phillip Rodgers
  • 46
  • 3
1

Oh I misunderstood the problem before.

There doesn't seem to be a built in way of doing what you need, but maybe you could guide your users by keeping the clock picker open until a selection is made. You could make the button a different colour too.

Something like:

beforeHide: function() {
    if ($('#tTimeFrom".$x."').val == "") {
        $('#tTimeFrom".$x."').show();
        $('.clockpicker-button').addClass("brightRed");
    }
}
rhinosforhire
  • 1,305
  • 11
  • 20
  • The minute would be selected, thats right. But the selected time is not transfered into the input field. That only happens, when the clockpicker is "done". So I have to manipulate the clockpicker in that way, that the actual value will be written into the input field, after a hour is selected ... I think :( – Marian Schrader Dec 11 '15 at 09:49
  • I see, thx. Damn, it sounded so easy :( Your idea is good, but sometimes the input field is allready filled with previous values. Maybe its the easiest solution if i check all these things after form submit?!? I'm not very into jQuery and it's easier for me to do it with php – Marian Schrader Dec 11 '15 at 10:29
  • It's faster to validate the form data on the client side. Something simple you could do is add the [required attribute to the input](http://www.w3schools.com/tags/att_input_required.asp) (and please accept the answer if it's helpful :D) – rhinosforhire Dec 12 '15 at 10:56