nadchif/html-duration-picker.js

Turn an HTML input box to a duration picker, without jQuery

Hi there 👋

I'm Chif, a web developer

• 📫 How to reach me:
  • Twitter: @dchif
  • Website: https://danielchif.dev
  • Email: [email protected]
• 😄 Pronouns: He/Him
• ⚡ Fun fact: I have 32 29 teeth 🦷

html-duration-picker.js's Issues

Automatically move focus from mm to ss after input

Current Behavior:
When a user types in the minutes in the mm section (see image),

The cursor remains there.

Wanted Behavior:
After a user enters the minutes in the mm section, the cursor should jump past : and go to focus on the ss section

Change 5 to 6 in documentation

Great for first timers.

1. Change 5 to 6 on line 29 of README.md

For a step by step guide on how to do this. See CONTRIBUTING.md

NOTE TO EXPERIENCED USERS: Please leave this issue for users who are new or first timers to OSS. This provides them an opportunity to learn Open Source Contribution workflow.

Implement UI/UX feedback when user clicks up and down buttons

This issue may not be ideal for first timers. If you want first timer friendly issues, kindly go here or here

Current Behavior
Right now when a user taps the increase/decrease buttons, everything works as expected, but visually, theres no user feedback on the button.

Wanted Behavior
It would be nice if we can implement some form of feedback. For example the caret could change opacity, or the button could darken a little

Additional context
If you have suggestions or think of a better idea for this feature, we are open to discussion.

Improve UX on mobile devices

This issue may not be ideal for first timers. If you want first timer friendly issues, kindly go here or here

Current Behavior
The picker works very well on desktop/tablet. On a mobile device, the buttons are too small, and practically unusable.

Wanted Behavior
It would be nice if we can offer better UX on mobile devices or small screen. Some methods could be:

• On mobile, the picker defaults to a larger size.

• On mobile, when a user taps the picker, it pop ups a larger, picker. Similar to this:
  
  

Additional context
If you have suggestions or think of a better idea for this feature, we are open to discussion.

Change "html-duration-picker" attribute into valid HTML

Is your feature request related to a problem? Please describe.
The current way to implement the html-duration-picker is by adding "html-duration-picker" to the input like this: <input html-duration-picker>.
That's simple, but in my understanding this is not valid HTML.

Describe the solution you'd like
In my opinion the best solution would be to turn this custom attribute into a class, so that it can be implemented like that: <input class="html-duration-picker">.

Create a new CSS file to remove javscript inline styling

In html-duration-picker.js setAttribute was used to add Styling, I can create an individual CSS file for it.

Eg: code snippet

scrollUpBtn.setAttribute('style', `text-align:center; width: 16px;padding: 0px 4px; border:none; cursor:default; height:${(picker.offsetHeight/2)-1}px !important; position:absolute; top: 1px;`); scrollUpBtn.classList.add('scroll-up'); scrollDownBtn.setAttribute('type', 'button'); scrollDownBtn.setAttribute('aria-label', 'Decrease duration'); scrollDownBtn.setAttribute('style', `text-align:center; width: 16px;padding: 0px 4px; border:none; cursor:default; height:${(picker.offsetHeight/2)-1}px !important; position:absolute; top: ${(picker.offsetHeight/2)-1}px;`);

Change Default Input to Duration Picker Input in README.md

Great for first timers.

1. Change [Default Input] to [Duration Picker Input] on line 22 in README.md

For a step by step guide on how to do this. See CONTRIBUTING.md

Make it possible to delete the zeros like in the input type=time element

At the moment it is not possible to reach the case --:-- like in the input type=time field (Delete the zeros)

If the time input is set to these value, it returns an empty string ""

Do you think there is a chance to achieve the same behavior ?

Or to you have any suggestions how to solve this ?

Thanks in advance!

Firefox Browser freezes after using increase/decrease button

This issue may not be ideal for first timers. If you want first timer friendly issues, kindly go here or here

Describe the bug
On Mozilla Firefox, If you use the increase or decrease control buttons, the browser freezes.

To Reproduce
Steps to reproduce the behavior:

1. Run the dev server

npm run dev

2. Open Mozilla Firefox
3. Visit http://localhost:3000/
4. Click either the increase or decrease button
5. Browser freezes completely

Expected behavior
The increase and decrease functions should work as expected. Like this:

Instead this is what is happening:

Issue can be seen on:

• OS: Mac OS 10.13
  -- Browser: Firefox
  -- Version: 70

• OS: Windows 7 SP3 64-bit
  -- Browser: Firefox
  -- Version: 50

• OS: Ubuntu 19
  -- Browser: Firefox
  -- Version: 68

Add cursor style [Task 2] in html-duration-picker.js

Great for first timers.

1. Add cursor:default; to Line 249 after border:none; in html-duration-picker.js

For a step by step guide on how to do this. See CONTRIBUTING.md

Add additional line break in index.html

Good for first timers

CURRENT ISSUE: The file src/index.html is missing a <br> after line 29. Right now the code is like this:

29.    <br>
30.    <input type="text" class="html-duration-picker" data-duration="00:29:50" data-duration-min="00:30:10" data-duration-max="00:31:05">
31.    <br>

WHAT WE NEED: Add an additional <br> after line 29. It should end up something like this:

29.    <br>
30.    <br>
31.    <input type="text" class="html-duration-picker" data-duration="00:29:50" data-duration-min="00:30:10" data-duration-max="00:31:05">
32.    <br>

For a step by step guide on how to do this. See CONTRIBUTING.md

Change 'demp' to 'demo' in README.md

Great for first timers.

Correct the spellings 'Demp' to 'Demo' in README.md

For a step by step guide on how to do this. See CONTRIBUTING.md

Weird vuejs interaction

Describe the bug
Trying to use this with vuejs makes it kinda hard to use.

Basically any time you type a number while being on the hours part, it immediately shifts to minutes (Typing 1 while being on hours, shifts to minutes).

Thus making it impossible to type hours completely.

To Reproduce
Steps to reproduce the behavior:
git clone https://github.com/Herz3h/test-html-duration-picker
yarn install
yarn serve
Go to http://localhost:8080/
Put cursor on hours and type any number

Expected behavior
It should stay on hours until it is done then it should shift to minutes.

Desktop (please complete the following information):

• OS: [e.g. iOS] MacOS Catalina
• Browser [e.g. chrome, safari] Chrome 85.0.4183.121 (64bits)
• Version [e.g. 22] 2.2.8 (latest)

Additional context
Add any other context about the problem here.

Edit: After trying to figure out the problem, it seems that it really depends where you click. If say I have this duration:

12:34

And click on the 2, the above weird behavior happens. However clicking on the 1, it behaves as expected.

Wouldn't it be better if we put cursor to leftmost digit on every click (If I click hours it goes to leftmost digit, if I click minutes it goes to leftmost digit) ?

Implement Min and Max

This issue may not be ideal for first timers. If you want first timer friendly issues, kindly go here or here

Current Behavior
Right now the duration timer accepts any value equal to or higher than 00:00:00

Wanted Behavior
It would be nice if we can implement a data-minimum attribute or something similar. So if a user did this

<input html-duration-picker data-minimum="00:30:00">

Then the picker sets any values below that to become 00:30:00

Additional context
If you have suggestions or think of a better data-* attribute name for this feature, we are open to discussion.

Arrow left and Arrow Right key to move focus between hh, mm, and ss

Current Behavior:
The Arrow Left <- and Arrow Right -> keys are disabled from working within the duration picker.

Wanted Behavior:
When a user is in the hh region like this:

and a user presses the arrow right -> the focus it should jump to mm, like this:

Wrong data-hide-seconds behavior

When using the data-hide-seconds option, the seconds are hidden upon initialization, but once the input gets and loses focus they appear again. This behavior can be seen on the demo page

Think there's a chance to fix this?

Thanks!

html-duration-picker.js contains console log

Describe the bug
html-duration-picker.js contains a console log on line 174 in the function insertFormatted. This console log outputs everytime you input a value in the input. This console.log should be removed

  const insertFormatted = (inputBox, secondsValue, dispatchSyntheticEvents, adjustmentFactor = 1) => {
    const hideSeconds = shouldHideSeconds(inputBox);
    const formattedValue = secondsToDuration(secondsValue, hideSeconds);
    const existingValue = inputBox.value;
    // Don't use setValue method here because
    // it breaks the arrow keys and arrow buttons control over the input
    inputBox.value = formattedValue;
    // save current cursor location for automatic increase

    // manually trigger an "input" event for other event listeners
    if (dispatchSyntheticEvents !== false) {
      if (existingValue != formattedValue) {
        inputBox.dispatchEvent(createEvent('change', {bubbles: true, cancelable: true}));
      }
      inputBox.dispatchEvent(createEvent('input'));
    }
    inputBox.setAttribute('data-adjustment-factor', adjustmentFactor);
    console.log({adjustmentFactor}); // <--------------
    highlightTimeUnitArea(inputBox, adjustmentFactor);
  };

To Reproduce
Steps to reproduce the behavior:

1. Add the input in an html file
2. View the console.log for messages coming in

Expected behavior
The console output console log messages.

Duration picker is not changing the model value when using up or down arrow.

Describe the bug
Duration picker is not changing the model value when using up or down arrow. It works fine when I directly enter the value using keyboard.

To Reproduce

Use Duration picker using new Angular project, take developer tool, pick the element.

Expected behavior
Same behavior should happen for both keyboard input and up and down arrow click

Screenshots

Desktop (please complete the following information):

• OS: Win 10
• Browser Any
• Version [e.g. 22]

Picker receives focus when user hovers over buttons

Describe the bug
When you hover over the button carets, and you move your mouse away, the picker receives focus

To Reproduce
Steps to reproduce the behavior:

1. Load a page with a duration picker input box
2. Move your mouse to hover either a up ^ or v button.
3. Without clicking anything, move your mouse away.

Expected behavior
If a user hovers past a button, the picker should automatically get focus

Screenshots

Desktop (please complete the following information):

• OS: MacOS 14
• Browser: Chrome
• Version: 81

Update landing page to use latest version of picker

Good for first timers

CURRENT ISSUE: The file src/index.html uses a fixed version (2.3.4). Right now the code is like this:

77.    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html-duration-picker.min.js"></script>

WHAT WE NEED: Instead of using a set version, we need to just use the latest npm version available. It should end up something like this:

77.    <script src="https://cdn.jsdelivr.net/npm/html-duration-picker@latest/dist/html-duration-picker.min.js"></script>

For a step by step guide on how to do this. See CONTRIBUTING.md

Add 'download' link on Github Page

Great for first timers.

Update index.html (located in the root) to have a download link to html-duration-picker.min.js located in the dist folder. The link should point to: https://github.com/nadchif/html-duration-picker.js/raw/master/dist/html-duration-picker.min.js

For a step by step guide on how to do this. See CONTRIBUTING.md

Add cursor style in html-duration-picker.js

Great for first timers.

1. Add cursor:default; to Line 224 after border:none; in html-duration-picker.js

For a step by step guide on how to do this. See CONTRIBUTING.md

Add continuous increase/decrease on long-press

Currently the buttons on html-duration-picker increase or decrease values on each click. It would be great for a user to hold down the increase or decrease button, and the value will continue to increase until the user releases the click.

Add a data-default-value attribute functionality to picker

This issue may not be ideal for first timers. If you want first timer friendly issues, kindly go here or here

Current Behavior
Right now the duration timer starts with 00:00:00 and whenever there is invalid input, it falls back to 00:00:00

Wanted Behavior
It would be nice if we can implement a data-default-value attribute or something similar. So if a user did this

<input html-duration-picker data-default-value="00:30:00">

Then the default value would be 00:30:00

Additional context
If you have suggestions or think of a better data-* attribute name for this feature, we are open to discussion.

Refactor Code for better performance and smaller build size

This issue may not be ideal for first timers. If you want first timer friendly issues, kindly go here

Current Behavior
Right now the build size of html-duration-picker.min.js is about 6.35kb

Wanted Behavior
It would be nice if we can refactor the code to further reduce the build size. It is important though that we also maintain balance making sure the refactored code is

1. Distribution build is smaller in size
2. Remains performant or improves performance
3. Source code is readable by other developers who may also want to contribute

Additional context
If you have suggestions or think of a better idea regarding this issue, we are open to discussion.

Maintainer NEEDED

Looking for someone to help maintain this picker.

Must be someone passionate about open source and with a

• Good understanding of javascript and html.
• A good idea on different browser behaviors

Recently been busy with work and school it's been hard to give the right attention for this project.

Are you interested? Please comment on this issue and let's get in touch

---

Adjust arrow holding and mouse holding to same speed

Is your feature request related to a problem? Please describe.
When one increase or decrease by holding down arrow keys it currently scrolls faster than holding down with my mouse on the arrow icons.

Describe the solution you'd like
I would like that the value increases in the same speed, no matter if I press and hold a key or the arrow icon with my mouse.

Fix spellings and punctuation in DOCUMENTATION.md

Great for first timers.

Correct the spellings and punctuation in DOCUMENTATION.md. Sentences should start with capital letters etc.

For a step by step guide on how to do this. See CONTRIBUTING.md

Suggestion for increaseValue and decreaseValue Functions Refactor

Starting on line 96 of

html-duration-picker.js/src/html-duration-picker.js

Line 96 in 2000d6a

// increase time value;

the 2 functions are similar enough that you could refactor them - if you wanted to.

The main difference...

increaseValue():

secondsValue += adjustmentFactor;

decreaseValue():

secondsValue -= adjustmentFactor;
  if (secondsValue < 0) {
    secondsValue = 0;
  }

My suggestion would be to combine the functions and add a parameter to differentiate the 2 actions.

const changeValue = (inputBox, direction) => {
  const rawValue = inputBox.value;
  const sectioned = rawValue.split(':');
  const adjustmentFactor = getAdjustmentFactor(inputBox);
  let secondsValue = 0;
  if (sectioned.length === 3) {
    secondsValue = Number(sectioned[2]) + Number(sectioned[1] * 60) + Number(sectioned[0] * 60 * 60);
  }
  switch (direction){
    case "up":
      secondsValue += adjustmentFactor;
      break;
    case: "down":
      secondsValue -= adjustmentFactor;
      if (secondsValue < 0) {
        secondsValue = 0;
      }
      break;
  }  
  insertFormatted(inputBox, secondsValue);
  highlightIncrementArea(inputBox, adjustmentFactor);
};

This could save 14 lines of code, but more importantly would make it so that you don't need to make the same changes twice. If you do decide to make this change, be sure to update the function calls on lines 176, 179, 262, 263, 265, and 266 with the additional parameter.

Default class name for the target element is being replaced

html-duration-picker.js/src/html-duration-picker.js

Line 385 in 2b216b8

picker.setAttribute('class', 'pickerStyles');

It seems to be a problem, at least for me. I need an element I assigned duration picker to have also other classes. Unfortunately, the aforementioned line replaces everything with pickerStyles value.

Punctuate and correct spellings in comments

Good for first timers

CURRENT ISSUE: Not all the comments within html-duration-picker.js are properly punctuated. For example, if you go to line 93, you find

// increase time value;

WHAT WE NEED: The punctuation and capitalization should be fixed. For example, line 93 would become:

// Increase time value

For a step by step guide on how to do this. See CONTRIBUTING.md

Feature: Add support for negative values

Current Behavior
Right now the duration timer accepts any value equal to or higher than 00:00:00

Wanted Behavior
Add support for negative values like -00:03:00

Discussed in #131

^{Originally posted by dev-hardev September 28, 2021}
Hello everyone,
I want to insert a negative time value in DB.
How can I get a negative duration value in HTML form?

Add an additional new line in CONTRIBUTING.md

Good for first timers

Need help to insert an additional new line between "request. " and "Resources" in CONTRIBUTING.md

CURRENT ISSUE: There is just one "enter" (return/new line) after the word "pull request" on step 6. As a result, when you view the file on github, it appears something like this:

6. Create a pull request. Resources:

WHAT WE NEED: The word Resources should be on the next line, like this:

6. Create a pull request.
   Resources:

For a step by step guide on how to do this. See CONTRIBUTING.md

Ability to limit number of digits for hours

Is your feature request related to a problem? Please describe.
Currently you can have as many digits in hours as you want. And this is annoying since, sometimes:

• You don't want users to type in more than N digits for hours
• Allowing unlimited number of digits for hours, doesn't autoswitch to minute after being done typing hours

Describe the solution you'd like
Attribute or js option to specify number of maximum digits for hours (by default set to infinite for BC)

Describe alternatives you've considered
An alternative would be, binding TAB key so you can easily switch between hours and minutes, and so on (I know arrow key do that, but they are too far away from left side of keyboard, and imo not very intuitive)

Additional context