Is it possible to set a default value?

[lluukinha]

When there is no time defined, it starts at 12:00, can I set the default value for it to be the current time (for example)?

[pglejzer]

Yes, you're right. By default I setted if there is no value in input this is gonna setting to 12:00 with 24h clockType or to 12:00 PM with 12h clockType.

The is no option to set current time on start if you don't have value or not but you can avoid that behaviur to set value to input by js/ts.

Something like this:

<div class="test" style="max-width: 300px">
  <input type="text" class="timepicker-ui-input form-control" />
</div>

const test = document.querySelector('.test') as HTMLDivElement;
const testPicker = new TimepickerUI(test);

const inputElement = test.querySelector('input') as HTMLInputElement;

inputElement.value = new Date().toLocaleTimeString('en-us', { timeStyle: 'short' });

testPicker.create();

But I can add this option if you want.

[lluukinha]

Thanks for the feedback, indeed this way it works, thanks!

But it's something that would be good to have in there when you have time.

Thank you for your answer, and congratz for the package. It's very useful.

[pglejzer]

Thanks! I will try to add this option. I'm not closing this issue now, If I will release new version I will close it.

[pglejzer]

Hi, I added new release with option called currentTime, it's allows to set currentTime to picker/input if you set it currentTime: true it's forcing clockType to set based on your time locatin and update input on start or you can use object with keys time, updateInput, locales, preventClockType.

• time allows to set any valid Date to update time
• updateInput is undefined on default so if you are using object type you have to set it to true if you want update input value
• locales allows to pust string or string[] to update toLocaleTimeString()
• preventClockType this key allows to force option clockType to set it based on your location. For example if you set

  const options = {
  clockType: '12h',
  currentTime: {
  preventClockType: true,
  },
  };

  and your location is using 24 h clockType so this first option will be ignored and forced to your current time preferes. If you find bugs let me know

[lluukinha]

Hello @pglejzer , its not working as it should (i think now its a bug), when we have date defined, it still opens with a default value set.

[pglejzer]

Hmm, can you show me your code what you try to init?

[lluukinha]

The currentTime is overriding the value of the input even if the value is set

const currentDate = new Date();
            currentDate.setMinutes(0);
            const tm = new TimepickerUI(this.tmRef.current, {
                clockType,
                timeLabel: 'Add scheduled start',
                currentTime: {
                    time: currentDate,
                    preventClockType: this.props.store.team.timeFormat === TimeFormat.TwentyFourHour
                }
            });

[lluukinha]

But even if I just set it to currentTime: true, the same thing happens, every time I open the picker it shows the current time instead of startTime from state.

OBS: My intention is not change the input, just the default value instead of 12:00PM to current hour

[pglejzer]

Ok, thanks for the explanation . I see that you probably using framework like Vue or library like React? I think It can be problem with that. I think state is not updeting in every state change casue this library is not using a virtual DOM and it's is based on normal DOM. I try will look into that and find some solution

[lluukinha]

indeed, I am using react

[pglejzer]

Ok, I think I found the problem. The problem was in my code. I will try to make new release asap :)

[pglejzer]

So as an explanation, it's working now that:

• if currentTime is set to true is gonna update input value with current time and this value is setting to display in the picker

if object is set:

• The time key - display selected time in the picker but if the updateInput is set to false/undefined and the default value from the input not exist, the time key value will be displayed in the picker. If the updateInput is set to false/undefined but the default value from the input exist, the time key will be ignored.
• The updateInput key is set to true it's going update input value with set time key and display this time in the picker.
• preventClockType key - works as earlier

[lluukinha]

Seems that is working now! Thanks a lot.