wvega / timepicker

A jQuery plugin to enhance standard form input fields helping users to select (or type) times
http://timepicker.co
GNU General Public License v2.0
216 stars 93 forks source link

Selecting Previous Hour #76

Open jkardong opened 8 years ago

jkardong commented 8 years ago

Say I have set the time to "5:30 PM". I don't see how you can select "5:00", only times moving forward.

Can I have this in the dropdown?

etc.. 4:00 4:30 5:00 5:30 (SET TIME) 6:00 6:30 7:00 etc..

wvega commented 8 years ago

Try setting the dynamic option to false:

$('.timepicker').timepicker({
    // your other options
    dynamic: false
});

Does that work?

jkardong commented 8 years ago

Thanks, but no, unfortunately that doesn't work.

wvega commented 8 years ago

Can you share your initialisation code here? A screenshot of what you are seeing would also help. If you can put a working example of your problem on http://jsfiddle.net, that would be great as well. You can use this fiddle as a starting point: http://jsfiddle.net/wvega/05kk6s1w/.

jkardong commented 8 years ago

Not much to it really

            $('#time-chooser').timepicker({
                timeFormat: 'h:mm:ss p',
                interval: 1,
                startHour: '1:00am',
                defaultTime: '10:30 PM',
                startTime: '10:30 PM',
                dynamic: false,
                dropdown: true,
                scrollbar: true
            });
wvega commented 8 years ago

This is what I see in http://jsfiddle.net/wvega/05kk6s1w/ using your initialisation code:

jquery_timepicker_basic_demo_-_jsfiddle

I think the time entries in the screenshot shows your desired behaviour from the description of this issue. Time entries occurring both before and after the selected time are being shown.

jkardong commented 8 years ago

So, it's close, but I need to be able to scroll backwards as well. So if the current time is 10:30, I need to see 10:29, 10:28, 10:27 and such. I'm not sure if this can be done with the tool or not?

time

wvega commented 8 years ago

The problem I see, is that you set the startTime option to '10:30:00 PM' in the configuration, so that's going to be the first value you see.

You also defined startHour, but when both startTime and startHour are defined, only startTime is considered.

What were you trying to achieve with those two options?

jkardong commented 8 years ago

Thanks @wvega

The 10:30 was just an example, prob should have been new Date() or a MomentJS type of variant where it gets the current time.

I set startHour and startTime simply because that's what was in the example online, so replicated it. I just removed everything but startTime and not doing what I want. Here is updated code

        $('#time-chooser').timepicker({
            timeFormat: 'h:mm:ss p',
            interval: 1,
            startTime: moment().format("HH:mm:ss"),
            dynamic: false,
            dropdown: true,
            scrollbar: true
        });

Seems so very strange to me you are unable to scroll to a previous time. Seems like you can do it, I just can't figure this out.

wvega commented 8 years ago

The time entries in the dropdown have a beginning and an end. You should be able to scroll back and forward within those beginning and end. However, if you select the first time entry, you can't scroll to a previous time anymore, and if you select the last time entry, you can't scroll to a future time.

The first time entry in the dropdown can be configured with the startTime setting. The rest of the time entries will be generated based on that setting, taking into account the value of the minTime and maxTime settings, that constraint the allowed values.

If you set startTime to 10:30pm, interval to one minute and define no value for minTime and maxTime, then the first time entry will be 10:30pm and the following entries will go from 10:31pm to 11:59pm, followed by the time entries between 12:00am and 10:29pm (one minute before the startTime).

wvega commented 8 years ago

@jkardong Let's say I'm using your application and I'm about to pick a value for the field that is using the timepicker. This is my first interaction with that field. The following questions may help me to understand what settings you need for your particular case:

  1. Does the field have a default value? or is it empty?
  2. When I click on the field, or move focus to the field, what do you want to be the first time entry in the dropdown?

Now I picked one of the available options (choose a value, any, just to continue the example), but decided I need to change the value, so I move focus back to the field, or click on it again:

  1. What should be the first time entry in the dropdown this time?
    1. The one you set in startTime?
    2. The next allowed value (one minute after the selected value)?
    3. The selected value?
jkardong commented 8 years ago
  1. There is a default time

  2. First time entry should be the time that is set in #1

  3. i. The selected value

This might help. I'll describe what I'm trying to use this with. This is a Scheduling Application allowing users to select a time they want to come in.

  1. User has an assigned time for an appointment.
  2. Assigned time is saved in a database
  3. User logs into system and pulls up their appointment
  4. Decides they want to come ten minutes earlier
  5. Selects time and sets the time
  6. Saves
wvega commented 8 years ago

Try using the defaultTime option to pass the value stored in the database to the timepicker's configuration. Drop the startTime option and keep dynamic set to false. That should get you very close to the desired behaviour. Does it?


I noticed two bugs in the current version that need to be fixed and may be affecting your experience:

  1. The timepicker should use the value from HTML value attribute of the input field as the default time. Surprisingly, it doesn't do that automatically.
  2. When you use the defaultTime option and open the dropdown of time entries for the first time, the selected value is not being shown automatically, so you have to scroll to find it.

    If you want to pick a value that is just 10 minutes before the currently selected value, it would be a lot better if the plugin automatically scroll the time entries to show the selected value and the values around it.

    This used to work fine in a previous version. I'll figure out when it broke and will release a fix soon.

aidanayalacb commented 8 years ago

Any ETA on this?

I also require to be able to select previous times and times in the future.

And for the scroll to be defaulted on the default time.

wuestkamp commented 5 years ago

+1

Isn't it possible to just have all times from 00:00 till 24:00 and just select the default one in the list? So the user can scroll up and down in order?