Javascript - Yagisanatode

Colory – A small JavaScript Class for HEX to RGB, RGB to HEX conversion and Gradient Color List Building

This is a small JavaScript pseudo-class that I use to quickly convert HEX to RGB colour format and RGB back to HEX and also create an array of gradient colours between two colours.

This guide is just a convenient place for me to store this reference for future use. I hope you can get some use out of it too.

Methods

rgbToHex(r, g, b) – returns String – A hexadecimal colour.
hexToRgb(hex) – returns [Number, Number, Number] – A red, green and blue (RGB) array of numbers from 0-255
generateColorGradient(colorStart, colorEnd, steps) – returns [[Number, Number, Number], ...] – An array of RGB colours by a set step.

The Code – Colory Class in JavaScript

/**
 * A small JavaScript Color Class used to:
 * 1. Convet RGB to HEX
 * 2. Convert HEX to RGB
 * 3. Generate a colour gradient between two colours. 
 * 
 * @author Scott Donald  <scott@yagisanatode.com>
 * @see Documentation {@link https://yagisanatode.com/colory}
 * @license BSD 3-Clause
 * 
 */
function colory(){

  const publicAPI = {}

  /**
   * Converts rgb to hex.
   * If your rgb is in an array you can use the spread operator.
   * e.g. color().rgbToHex(...rgb)
   * @param {Number} r - red 3-digit color code. 
   * @param {Number} g - green 3-digit color code. 
   * @param {Number} b - blue 3-digit color code.
   * @returns {String} Hexadeciaml string 
   */
  publicAPI.rgbToHex = function(r, g, b){

    const rgbValue = (r << 16) | (g << 8) | (b << 0);
    const hex =  '#' + (0x1000000 + rgbValue).toString(16).slice(1);
    return hex
  }

  /**
   * Converts Hexadecimal colour to RGB
   * @param {String} hex
   * @returns {[Number, Number, Number]} RGB number set for target color.
   */
  publicAPI.hexToRgb = function(hex){
    // Remove the leading # if it's there
    hex = hex.replace(/^#/, '');

    // Parse the hex values
    let colorInt = parseInt(hex, 16);
    let r = (colorInt >> 16) & 255;
    let g = (colorInt >> 8) & 255;
    let b = colorInt & 255;

    return [r,g,b]
  }

  /**
   * Generates a color gradient based on the start and 
   * end colours. 
   * @param {String|[Number, Number, Number]} colorStart - Start color as Hexadeciaml string or set of 3 RGB 3-digit number series.
   * @param {String|[Number, Number, Number]} colorEnd - Start color as Hexadeciaml string or set of 3 RGB 3-digit number series.
   * @param {Number} steps - total number of steps to break down into.
   * @returns {[Number, Number, Number]} RGB number set for target color. 
   */
  publicAPI.generateColorGradient = function(colorStart, colorEnd, steps){

    if(typeof colorStart === "string"){
      colorStart = this.hexToRgb(colorStart)
    }

    if(typeof colorEnd === "string"){
      colorEnd = this.hexToRgb(colorEnd)
    }

    const colors = []

    steps = steps - 1

    for(let i = 0; i <= steps; i++){
      const r = Math.round(colorStart[0] + ((colorEnd[0] - colorStart[0]) / steps) * i);
      const g = Math.round(colorStart[1] + ((colorEnd[1] - colorStart[1]) / steps) * i);
      const b = Math.round(colorStart[2] + ((colorEnd[2] - colorStart[2]) / steps) * i);
      colors.push([r, g, b]) 
    }

    return colors
  }

  return publicAPI

}

/**

* A small JavaScript Color Class used to:

* 1. Convet RGB to HEX

* 2. Convert HEX to RGB

* 3. Generate a colour gradient between two colours.

* @author Scott Donald <scott@yagisanatode.com>

* @see Documentation {@link https://yagisanatode.com/colory}

* @license BSD 3-Clause

function colory(){

const publicAPI = {}

/**

* Converts rgb to hex.

* If your rgb is in an array you can use the spread operator.

* e.g. color().rgbToHex(...rgb)

* @param {Number} r - red 3-digit color code.

* @param {Number} g - green 3-digit color code.

* @param {Number} b - blue 3-digit color code.

* @returns {String} Hexadeciaml string

publicAPI.rgbToHex = function(r, g, b){

const rgbValue = (r << 16) | (g << 8) | (b << 0);

const hex = '#' + (0x1000000 + rgbValue).toString(16).slice(1);

return hex

}

/**

* Converts Hexadecimal colour to RGB

* @param {String} hex

* @returns {[Number, Number, Number]} RGB number set for target color.

publicAPI.hexToRgb = function(hex){

// Remove the leading # if it's there

hex = hex.replace(/^#/, '');

// Parse the hex values

let colorInt = parseInt(hex, 16);

let r = (colorInt >> 16) & 255;

let g = (colorInt >> 8) & 255;

let b = colorInt & 255;

return [r,g,b]

}

/**

* Generates a color gradient based on the start and

* end colours.

* @param {String|[Number, Number, Number]} colorStart - Start color as Hexadeciaml string or set of 3 RGB 3-digit number series.

* @param {String|[Number, Number, Number]} colorEnd - Start color as Hexadeciaml string or set of 3 RGB 3-digit number series.

* @param {Number} steps - total number of steps to break down into.

* @returns {[Number, Number, Number]} RGB number set for target color.

publicAPI.generateColorGradient = function(colorStart, colorEnd, steps){

if(typeof colorStart === "string"){

colorStart = this.hexToRgb(colorStart)

}

if(typeof colorEnd === "string"){

colorEnd = this.hexToRgb(colorEnd)

}

const colors = []

steps = steps - 1

for(let i = 0; i <= steps; i++){

const r = Math.round(colorStart[0] + ((colorEnd[0] - colorStart[0]) / steps) * i);

const g = Math.round(colorStart[1] + ((colorEnd[1] - colorStart[1]) / steps) * i);

const b = Math.round(colorStart[2] + ((colorEnd[2] - colorStart[2]) / steps) * i);

colors.push([r, g, b])

}

return colors

}

return publicAPI

}

Detailed Documentation

rgbToHex(r, g, b)

Converts RGB color (Red, Green Blue) to hexadecimal colour.

If your rgb is in an array you can use the spread operator. e.g. color().rgbToHex(…rgb)

const hex = "#137333"
const rgb = colory().hexToRgb(hex)
console.log("From HEX", hex ,"To RGB",rgb)

// RESULT:
// HEX #137333 To RGB [ 19, 115, 51 ]

const hex = "#137333"

const rgb = colory().hexToRgb(hex)

console.log("From HEX", hex ,"To RGB",rgb)

// RESULT:

// HEX #137333 To RGB [ 19, 115, 51 ]

Parameters

{Number} r – red 3-digit colour code.
{Number} g – green 3-digit colour code.
{Number} b – blue 3-digit colour code.

Returns

String – Hexadecimal string.

hexToRgb(hex)

Converts Hexadecimal colour to RGB

const rgb = [ 19, 115, 51 ]
const hex = colory().rgbToHex(...rgb)
console.log("from RGB", rgb, "To HEX", hex)

// Result:
// from RGB [ 19, 115, 51 ] To HEX #137333

const rgb = [ 19, 115, 51 ]

const hex = colory().rgbToHex(...rgb)

console.log("from RGB", rgb, "To HEX", hex)

// Result:

// from RGB [ 19, 115, 51 ] To HEX #137333

Parameters

{String} hex – hexadecimal colour as a string.

Returns

[Number, Number, Number] – RGB number set for the target colour.

generateColorGradient(colorStart, colorEnd, steps)

Generates a colour gradient based on the start and end colours at a set number of steps. Start and end colours can be added as hexadecimal string values or RGB number values within an array.

// Example 1: start and end colour as RGB
const gradient = colory().generateColorGradient([0, 0, 255], [255, 0, 0], 20)
console.log(gradient)

// Result:
// [
//   [ 0, 0, 255 ],   [ 13, 0, 242 ],
//   [ 27, 0, 228 ],  [ 40, 0, 215 ],
//   [ 54, 0, 201 ],  [ 67, 0, 188 ],
//   [ 81, 0, 174 ],  [ 94, 0, 161 ],
//   [ 107, 0, 148 ], [ 121, 0, 134 ],
//   [ 134, 0, 121 ], [ 148, 0, 107 ],
//   [ 161, 0, 94 ],  [ 174, 0, 81 ],
//   [ 188, 0, 67 ],  [ 201, 0, 54 ],
//   [ 215, 0, 40 ],  [ 228, 0, 27 ],
//   [ 242, 0, 13 ],  [ 255, 0, 0 ]
// ]



// Example 1: start and end colour as HEX
const gradient = colory().generateColorGradient("#0000ff" , "#ff0100", 20)
console.log(gradient)

// Result:
// [
//   [ 0, 0, 255 ],   [ 13, 0, 242 ],
//   [ 27, 0, 228 ],  [ 40, 0, 215 ],
//   [ 54, 0, 201 ],  [ 67, 0, 188 ],
//   [ 81, 0, 174 ],  [ 94, 0, 161 ],
//   [ 107, 0, 148 ], [ 121, 0, 134 ],
//   [ 134, 0, 121 ], [ 148, 0, 107 ],
//   [ 161, 0, 94 ],  [ 174, 0, 81 ],
//   [ 188, 0, 67 ],  [ 201, 0, 54 ],
//   [ 215, 0, 40 ],  [ 228, 0, 27 ],
//   [ 242, 0, 13 ],  [ 255, 0, 0 ]
// ]

// Example 1: start and end colour as RGB

const gradient = colory().generateColorGradient([0, 0, 255], [255, 0, 0], 20)

console.log(gradient)

// Result:

// [

// [ 0, 0, 255 ], [ 13, 0, 242 ],

// [ 27, 0, 228 ], [ 40, 0, 215 ],

// [ 54, 0, 201 ], [ 67, 0, 188 ],

// [ 81, 0, 174 ], [ 94, 0, 161 ],

// [ 107, 0, 148 ], [ 121, 0, 134 ],

// [ 134, 0, 121 ], [ 148, 0, 107 ],

// [ 161, 0, 94 ], [ 174, 0, 81 ],

// [ 188, 0, 67 ], [ 201, 0, 54 ],

// [ 215, 0, 40 ], [ 228, 0, 27 ],

// [ 242, 0, 13 ], [ 255, 0, 0 ]

// ]

// Example 1: start and end colour as HEX

const gradient = colory().generateColorGradient("#0000ff" , "#ff0100", 20)

console.log(gradient)

// Result:

// [

// [ 0, 0, 255 ], [ 13, 0, 242 ],

// [ 27, 0, 228 ], [ 40, 0, 215 ],

// [ 54, 0, 201 ], [ 67, 0, 188 ],

// [ 81, 0, 174 ], [ 94, 0, 161 ],

// [ 107, 0, 148 ], [ 121, 0, 134 ],

// [ 134, 0, 121 ], [ 148, 0, 107 ],

// [ 161, 0, 94 ], [ 174, 0, 81 ],

// [ 188, 0, 67 ], [ 201, 0, 54 ],

// [ 215, 0, 40 ], [ 228, 0, 27 ],

// [ 242, 0, 13 ], [ 255, 0, 0 ]

// ]

Parameters

{String|[Number, Number, Number]} colorStart – Start colour as Hexadecimal string or set of 3 RGB 3-digit number series.
{String|[Number, Number, Number]} colorEnd – Start colour as Hexadecimal string or set of 3 RGB 3-digit number series.
{Number} steps – total number of steps to break down into.

Returns

{[[Number, Number, Number], …]} – A 2d array of RGB number arrays at the set step length.

Conclusion

This is mostly used for solo projects, often in Google Apps Script. As such, I have not included any error handling. This also increased performance because the code has less work to do. The JS doc tooltips are enough for me here and you could deduce most errors from natural errors caused in JavaScript.

My recommendation is to only add the methods that you believe you are going to use and remove the rest. No need to bloat out your own project.

Having said that, let me know if there are some other methods you would like to see in the class and I will have a crack at adding them in.

~ Yagi

A custom-build HTML Time Input Element

Recently while working on a project, I found that the standard HTML Time Input field (see below) wasn’t sufficient for my needs.

<input type="time" id="setTime" name="setTime" />

Standard HTML time input field

I needed users to be able to input 24hr time right down to the milliseconds. Something like this:

Table of Contents

Features

Mobile Input will display the number pad

Under the hood, each input field is a number. This means that mobile devices should default to the number pad for convenience.

Value retrieval

Values are stored under the name time-<<timeType>> , for example time-hours.

You can loop over your form data and retrieve the names as needed or set a custom ID to the field as you create it dynamically with JavaScript. You can see an example of this in the Example 1: Single time field section.

Automatically moves to the next input

Setting field character limitsSetting character limits on each time field allows the cursor to automatically move to the next fields.

Client-Side Validation

Removing ‘Accepted’ number input characters that are not numbers

Yeah, yeah, you know you got to validate server-side too, but it’s good to let the user know that if they accidentally put in an accepted number character like e, +, - that it will be removed for them automatically.

Cannot exceed the number range

The max and min number ranges are set by default, but you can always change them manually.

Maybe you want to start with minutes, but as a duration and not a time, have minutes that go all the way up to 10,000. All good, just change the max value in the time-minute number input.

If a user puts in a number greater or less than the default min or max, the number will be replaced by the min or max respectively.

So for example, if the user sets 69 (hur hur hur) minutes but the max minutes is 60 then the field will default to 60.

Likewise, if the user sets the millisecond cell to 2 but your min is 500, then it will default to 500 milliseconds.

This is done with some JavaScript event listeners.

Returning back a tab will clear the field

Returning back a tab by cursor or shift-tab will clear out the field for the user to start afresh.

Prepends Zeros (0) to Any Number Not At Max Character Length

This is just an aesthetic thing, but it makes a difference. When a number’s character length is less than the maximum character length, then additional zeroes will be added to the front of the number.

Quickly add or remove a time input

The values of the time inputs are formatted using a generated CSS method for number inputs within the timeInput class. Further event listeners are looped over this class to allow for fewer or greater number-input elements.

As such, you can add days, months and years or, nanoseconds, microseconds and zeptoseconds. Alternatively, you could remove one of the existing time measures from the field.

The Code for the Custom Time Input field

You can grab a basic sample of the code here:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--     For the tutorial: A Custom-Built HTML Time Input Element
    https://yagisanatode.com/a-custom-build-html-time-input-element/ -->
    <title>Time</title>
</head>

<body>
    <style>
        .timeInput {
            display: grid;
            grid-template-columns: repeat(7, auto);
            width: 8.5em;

        }

        .timeInput input::-webkit-outer-spin-button,
        .timeInput input::-webkit-inner-spin-button {
            display: none;
            margin: 0;
        }

        .timeInput .time-lables {
            font-size: x-small;
            text-align: center;
        }

        .timeInput .time-hours {
            width: 1.2em;
            text-align: center;
        }

        .timeInput .time-minutes {
            width: 1.2em;
            text-align: center;
        }

        .timeInput .time-seconds {
            width: 1.2em;
            text-align: center;
        }

        .timeInput .time-milliseconds {
            width: 2.7em;
            text-align: center;
        }
    </style>
    <div class="timeInput">
        <span class="time-lables">HH</span>
        <span class="time-lables"></span>
        <span class="time-lables">MM</span>
        <span class="time-lables"></span>
        <span class="time-lables">SS</span>
        <span class="time-lables"></span>
        <span class="time-lables">MS</span>
        <input class="time-hours" type="number" name="time-hours" min=0 max=24 step=1 placeholder="00" data-maxlen=2>
        <span>:</span>
        <input class="time-minutes" type="number" name="time-minutes" min=0 max=60 step=1 placeholder="00" data-maxlen=2>
        <span>:</span>
        <input class="time-seconds" type="number" name="time-seconds" min=0 max=60 step=1 placeholder="00" data-maxlen=2>
        <span>:</span>
        <input class="time-milliseconds" type="number" name="time-milliseconds" min=0 max=999 step=1 placeholder="000"
            data-maxlen=4>
    </div>
    <br>
    <br>
    <br>
    <input type="time" id="setTime" name="setTime" />

    <script type="text/javascript">

        /**
         * Handles the time values for the timeInput element.
         * - Provides validation
         * -- Only numbers
         * -- witin min and max
         * -- max length
         * - Moves cursor to next input after max length is exceeded.
         */
        function customTimeHandler() {

            /**
             * Validates the input value.
             * @param {HTMLElement} input
             */
            function validate(input) {
                let val = input.value

                // Check for non numbers & remove
                val = val.replaceAll(/\D/g, "")

                // If greater than data-maxlen, remove last char
                val = val.substring(0, input.dataset.maxlen)

                const valNum = Number(val)

                // If greater than max, set max
                if (valNum < input.min) {
                    val = input.min
                }
                // If less than min, set min
                else if (valNum > input.max) {
                    val = input.max
                }
                // If less than total number of chars in the placeholder add leading zero
                const placeholderZeroes = input.placeholder
                const charLenMax = 10 ** (input.placeholder.length - 1)

                if (valNum == 0) {
                    val = placeholderZeroes
                }
                else if (valNum < charLenMax) {
                    const lenDif = placeholderZeroes.length + 1 - val.length
                    const addedZeros = placeholderZeroes.substring(1, lenDif)

                    val = addedZeros + val
                }

                input.value = val
            }

            const timeInputElements = document.querySelectorAll(".timeInput")


            timeInputElements.forEach(timeInputEl => {

                const timeInputs = timeInputEl.querySelectorAll('input')

                timeInputs.forEach((input, idx) => {


                    input.addEventListener('focus', function() {
                        input.value = ""
                    })

                    input.addEventListener('input', function() {
                        const inputLen = input.value.length
                        const maxLen = input.dataset.maxlen

                        if (inputLen >= maxLen) {

                            validate(input)
                            if (idx < timeInputs.length - 1) {

                                timeInputs[idx + 1].focus()
                            }
                        }
                    })

                    input.addEventListener('focusout', function() {
                        validate(input)
                    })

                })

            })
        }

        customTimeHandler()
    </script>


</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

<!DOCTYPE html>

<html>

<head>

<!-- For the tutorial: A Custom-Built HTML Time Input Element

https://yagisanatode.com/a-custom-build-html-time-input-element/ -->

</head>

<body>

<style>

.timeInput {

display: grid;

grid-template-columns: repeat(7, auto);

width: 8.5em;

}

.timeInput input::-webkit-outer-spin-button,

.timeInput input::-webkit-inner-spin-button {

display: none;

margin: 0;

}

.timeInput .time-lables {

font-size: x-small;

text-align: center;

}

.timeInput .time-hours {

width: 1.2em;

text-align: center;

}

.timeInput .time-minutes {

width: 1.2em;

text-align: center;

}

.timeInput .time-seconds {

width: 1.2em;

text-align: center;

}

.timeInput .time-milliseconds {

width: 2.7em;

text-align: center;

}

</style>

<input class="time-milliseconds" type="number" name="time-milliseconds" min=0 max=999 step=1 placeholder="000"

data-maxlen=4>

</div>

<br>

/**

* Handles the time values for the timeInput element.

* - Provides validation

* -- Only numbers

* -- witin min and max

* -- max length

* - Moves cursor to next input after max length is exceeded.

function customTimeHandler() {

/**

* Validates the input value.

* @param {HTMLElement} input

function validate(input) {

let val = input.value

// Check for non numbers & remove

val = val.replaceAll(/\D/g, "")

// If greater than data-maxlen, remove last char

val = val.substring(0, input.dataset.maxlen)

const valNum = Number(val)

// If greater than max, set max

if (valNum < input.min) {

val = input.min

}

// If less than min, set min

else if (valNum > input.max) {

val = input.max

}

// If less than total number of chars in the placeholder add leading zero

const placeholderZeroes = input.placeholder

const charLenMax = 10 ** (input.placeholder.length - 1)

if (valNum == 0) {

val = placeholderZeroes

}

else if (valNum < charLenMax) {

const lenDif = placeholderZeroes.length + 1 - val.length

const addedZeros = placeholderZeroes.substring(1, lenDif)

val = addedZeros + val

}

input.value = val

}

const timeInputElements = document.querySelectorAll(".timeInput")

timeInputElements.forEach(timeInputEl => {

const timeInputs = timeInputEl.querySelectorAll('input')

timeInputs.forEach((input, idx) => {

input.addEventListener('focus', function() {

input.value = ""

})

input.addEventListener('input', function() {

const inputLen = input.value.length

const maxLen = input.dataset.maxlen

if (inputLen >= maxLen) {

validate(input)

if (idx < timeInputs.length - 1) {

timeInputs[idx + 1].focus()

}

})

input.addEventListener('focusout', function() {

validate(input)

})

}

customTimeHandler()

</script>

</body>

</html>

Example 1: Single time field

In this simple example, we will encapsulate the time input into a form and add a ‘submit’ button. Of course, you can add other form elements to the form as well.

In our script section, we added two functions submitForm() and getFormData() that is called on submit and retrieve all values in the form by their ‘name’ attribute.

I’ve put the submit button outside the form so you can see the logged results. If you wish to refresh the page or move to another page you can add the submit button inside the form.

Custom HTML Time Input Field inside a form with logged values

Check out the updated code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--     For the tutorial: A Custom-Built HTML Time Input Element
    https://yagisanatode.com/a-custom-build-html-time-input-element/ -->
    <title>Time</title>
</head>

<body>
    <style>
        .timeInput {
            display: grid;
            grid-template-columns: repeat(7, auto);
            width: 8.0em;

        }

        .timeInput input::-webkit-outer-spin-button,
        .timeInput input::-webkit-inner-spin-button {
            display: none;
            margin: 0;
        }

        .timeInput .time-lables {
            font-size: x-small;
            text-align: center;
        }

        .timeInput .time-hours {
            width: 1.2em;
            text-align: center;
        }

        .timeInput .time-minutes {
            width: 1.2em;
            text-align: center;
        }

        .timeInput .time-seconds {
            width: 1.2em;
            text-align: center;
        }

        .timeInput .time-milliseconds {
            width: 2em;
            text-align: center;
        }
    </style>
    <form id="inputForm">
        <div class="timeInput">
            <span class="time-lables">HH</span>
            <span class="time-lables"></span>
            <span class="time-lables">MM</span>
            <span class="time-lables"></span>
            <span class="time-lables">SS</span>
            <span class="time-lables"></span>
            <span class="time-lables">MS</span>
            <input class="time-hours" type="number" name="time-hours" min=0 max=24 step=1 placeholder="00" data-maxlen=2>
            <span>:</span>
            <input class="time-minutes" type="number" name="time-minutes" min=0 max=60 step=1 placeholder="00" data-maxlen=2>
            <span>:</span>
            <input class="time-seconds" type="number" name="time-seconds" min=0 max=60 step=1 placeholder="00" data-maxlen=2>
            <span>:</span>
            <input class="time-milliseconds" type="number" name="time-milliseconds" min=0 max=999 step=1 placeholder="000"
                data-maxlen=4>
        </div>
        <hr>
    </form>
        <button onclick="submitForm()">Submit</button>          



    <script type="text/javascript">

        /**
         * Handles the time values for the timeInput element.
         * - Provides validation
         * -- Only numbers
         * -- witin min and max
         * -- max length
         * - Moves cursor to next input after max length is exceeded.
         */
        function customTimeHandler() {

            /**
             * Validates the input value.
             * @param {HTMLElement} input
             */
            function validate(input) {
                let val = input.value

                // Check for non numbers & remove
                val = val.replaceAll(/\D/g, "")

                // If greater than data-maxlen, remove last char
                val = val.substring(0, input.dataset.maxlen)

                const valNum = Number(val)

                // If greater than max, set max
                if (valNum < input.min) {
                    val = input.min
                }
                // If less than min, set min
                else if (valNum > input.max) {
                    val = input.max
                }
                // If less than total number of chars in the placeholder add leading zero
                const placeholderZeroes = input.placeholder
                const charLenMax = 10 ** (input.placeholder.length - 1)

                if (valNum == 0) {
                    val = placeholderZeroes
                }
                else if (valNum < charLenMax) {
                    const lenDif = placeholderZeroes.length + 1 - val.length
                    const addedZeros = placeholderZeroes.substring(1, lenDif)

                    val = addedZeros + val
                }

                input.value = val
            }

            const timeInputElements = document.querySelectorAll(".timeInput")


            timeInputElements.forEach(timeInputEl => {

                const timeInputs = timeInputEl.querySelectorAll('input')

                timeInputs.forEach((input, idx) => {


                    input.addEventListener('focus', function() {
                        input.value = ""
                    })

                    input.addEventListener('input', function() {
                        const inputLen = input.value.length
                        const maxLen = input.dataset.maxlen

                        if (inputLen >= maxLen) {

                            validate(input)
                            if (idx < timeInputs.length - 1) {

                                timeInputs[idx + 1].focus()
                            }
                        }
                    })

                    input.addEventListener('focusout', function() {
                        validate(input)
                    })

                })

            })
        }

        customTimeHandler()

        /**
         * ##### SUBMIT FORM #####
         * 
         */

        // Function to handle form submission
        function submitForm() {
            const form = document.getElementById('inputForm');


            const data = getFormData(form)


            console.log(data)
            // Send the data back serverside.
        }

        // Function to collect form data into an object
        function getFormData(form) {
            let formData = {};

            for (let i = 0; i < form.elements.length; i++) {
                const element = form.elements[i];
                if (element.name) {

                    if (element.type === "checkbox" || element.type === "radio") {
                        formData[element.name] = element.checked;
                    } else {
                        formData[element.name] = element.value;
                    }
                }
            }
            return formData;
        }


    </script>


</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

<!DOCTYPE html>

<html>

<head>

<!-- For the tutorial: A Custom-Built HTML Time Input Element

https://yagisanatode.com/a-custom-build-html-time-input-element/ -->

</head>

<body>

<style>

.timeInput {

display: grid;

grid-template-columns: repeat(7, auto);

width: 8.0em;

}

.timeInput input::-webkit-outer-spin-button,

.timeInput input::-webkit-inner-spin-button {

display: none;

margin: 0;

}

.timeInput .time-lables {

font-size: x-small;

text-align: center;

}

.timeInput .time-hours {

width: 1.2em;

text-align: center;

}

.timeInput .time-minutes {

width: 1.2em;

text-align: center;

}

.timeInput .time-seconds {

width: 1.2em;

text-align: center;

}

.timeInput .time-milliseconds {

width: 2em;

text-align: center;

}

</style>

<input class="time-milliseconds" type="number" name="time-milliseconds" min=0 max=999 step=1 placeholder="000"

data-maxlen=4>

</div>

<hr>

</form>

<button onclick="submitForm()">Submit</button>

/**

* Handles the time values for the timeInput element.

* - Provides validation

* -- Only numbers

* -- witin min and max

* -- max length

* - Moves cursor to next input after max length is exceeded.

function customTimeHandler() {

/**

* Validates the input value.

* @param {HTMLElement} input

function validate(input) {

let val = input.value

// Check for non numbers & remove

val = val.replaceAll(/\D/g, "")

// If greater than data-maxlen, remove last char

val = val.substring(0, input.dataset.maxlen)

const valNum = Number(val)

// If greater than max, set max

if (valNum < input.min) {

val = input.min

}

// If less than min, set min

else if (valNum > input.max) {

val = input.max

}

// If less than total number of chars in the placeholder add leading zero

const placeholderZeroes = input.placeholder

const charLenMax = 10 ** (input.placeholder.length - 1)

if (valNum == 0) {

val = placeholderZeroes

}

else if (valNum < charLenMax) {

const lenDif = placeholderZeroes.length + 1 - val.length

const addedZeros = placeholderZeroes.substring(1, lenDif)

val = addedZeros + val

}

input.value = val

}

const timeInputElements = document.querySelectorAll(".timeInput")

timeInputElements.forEach(timeInputEl => {

const timeInputs = timeInputEl.querySelectorAll('input')

timeInputs.forEach((input, idx) => {

input.addEventListener('focus', function() {

input.value = ""

})

input.addEventListener('input', function() {

const inputLen = input.value.length

const maxLen = input.dataset.maxlen

if (inputLen >= maxLen) {

validate(input)

if (idx < timeInputs.length - 1) {

timeInputs[idx + 1].focus()

}

})

input.addEventListener('focusout', function() {

validate(input)

})

}

customTimeHandler()

/**

* ##### SUBMIT FORM #####

// Function to handle form submission

function submitForm() {

const form = document.getElementById('inputForm');

const data = getFormData(form)

console.log(data)

// Send the data back serverside.

}

// Function to collect form data into an object

function getFormData(form) {

let formData = {};

for (let i = 0; i < form.elements.length; i++) {

const element = form.elements[i];

if (element.name) {

if (element.type === "checkbox" || element.type === "radio") {

formData[element.name] = element.checked;

} else {

formData[element.name] = element.value;

}

return formData;

}

</script>

</body>

</html>

Example 2: Multiple time fields

What if we want to have multiple instances of the custom time input in our HTML?

In this example, we will have a start and end time. Notice that we will need to change the name each time slightly so that the value is stored.

As such, in the example we append -start and -end to the input fields.

Yeap, that’s all you need to do.

Multiple Custom HTML Time Input Fields inside a form with logged values

Check out the updated code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--     For the tutorial: A Custom-Built HTML Time Input Element
    https://yagisanatode.com/a-custom-build-html-time-input-element/ -->
    <title>Time</title>
</head>

<body>
    <style>
        .timeInput {
            display: grid;
            grid-template-columns: repeat(7, auto);
            width: 8.0em;

        }

        .timeInput input::-webkit-outer-spin-button,
        .timeInput input::-webkit-inner-spin-button {
            display: none;
            margin: 0;
        }

        .timeInput .time-lables {
            font-size: x-small;
            text-align: center;
        }

        .timeInput .time-hours {
            width: 1.2em;
            text-align: center;
        }

        .timeInput .time-minutes {
            width: 1.2em;
            text-align: center;
        }

        .timeInput .time-seconds {
            width: 1.2em;
            text-align: center;
        }

        .timeInput .time-milliseconds {
            width: 2em;
            text-align: center;
        }
    </style>
    <form id="inputForm">
        <div>Start Time</div>
        <div class="timeInput">
            <span class="time-lables">HH</span>
            <span class="time-lables"></span>
            <span class="time-lables">MM</span>
            <span class="time-lables"></span>
            <span class="time-lables">SS</span>
            <span class="time-lables"></span>
            <span class="time-lables">MS</span>
            <input class="time-hours" type="number" name="time-hours-start" min=0 max=24 step=1 placeholder="00" data-maxlen=2>
            <span>:</span>
            <input class="time-minutes" type="number" name="time-minutes-start" min=0 max=60 step=1 placeholder="00" data-maxlen=2>
            <span>:</span>
            <input class="time-seconds" type="number" name="time-seconds-start" min=0 max=60 step=1 placeholder="00" data-maxlen=2>
            <span>:</span>
            <input class="time-milliseconds" type="number" name="time-milliseconds-start" min=0 max=999 step=1 placeholder="000"
                data-maxlen=4>
        </div>
        <hr>
        <div>Start Time</div>
        <div class="timeInput">
            <span class="time-lables">HH</span>
            <span class="time-lables"></span>
            <span class="time-lables">MM</span>
            <span class="time-lables"></span>
            <span class="time-lables">SS</span>
            <span class="time-lables"></span>
            <span class="time-lables">MS</span>
            <input class="time-hours" type="number" name="time-hours-end" min=0 max=24 step=1 placeholder="00" data-maxlen=2>
            <span>:</span>
            <input class="time-minutes" type="number" name="time-minutes-end" min=0 max=60 step=1 placeholder="00" data-maxlen=2>
            <span>:</span>
            <input class="time-seconds" type="number" name="time-seconds-end" min=0 max=60 step=1 placeholder="00" data-maxlen=2>
            <span>:</span>
            <input class="time-milliseconds" type="number" name="time-milliseconds-end" min=0 max=999 step=1 placeholder="000"
                data-maxlen=4>
        </div>
        <hr>
    </form>
        <button onclick="submitForm()">Submit</button>          



    <script type="text/javascript">

        /**
         * Handles the time values for the timeInput element.
         * - Provides validation
         * -- Only numbers
         * -- witin min and max
         * -- max length
         * - Moves cursor to next input after max length is exceeded.
         */
        function customTimeHandler() {

            /**
             * Validates the input value.
             * @param {HTMLElement} input
             */
            function validate(input) {
                let val = input.value

                // Check for non numbers & remove
                val = val.replaceAll(/\D/g, "")

                // If greater than data-maxlen, remove last char
                val = val.substring(0, input.dataset.maxlen)

                const valNum = Number(val)

                // If greater than max, set max
                if (valNum < input.min) {
                    val = input.min
                }
                // If less than min, set min
                else if (valNum > input.max) {
                    val = input.max
                }
                // If less than total number of chars in the placeholder add leading zero
                const placeholderZeroes = input.placeholder
                const charLenMax = 10 ** (input.placeholder.length - 1)

                if (valNum == 0) {
                    val = placeholderZeroes
                }
                else if (valNum < charLenMax) {
                    const lenDif = placeholderZeroes.length + 1 - val.length
                    const addedZeros = placeholderZeroes.substring(1, lenDif)

                    val = addedZeros + val
                }

                input.value = val
            }

            const timeInputElements = document.querySelectorAll(".timeInput")


            timeInputElements.forEach(timeInputEl => {

                const timeInputs = timeInputEl.querySelectorAll('input')

                timeInputs.forEach((input, idx) => {


                    input.addEventListener('focus', function() {
                        input.value = ""
                    })

                    input.addEventListener('input', function() {
                        const inputLen = input.value.length
                        const maxLen = input.dataset.maxlen

                        if (inputLen >= maxLen) {

                            validate(input)
                            if (idx < timeInputs.length - 1) {

                                timeInputs[idx + 1].focus()
                            }
                        }
                    })

                    input.addEventListener('focusout', function() {
                        validate(input)
                    })

                })

            })
        }

        customTimeHandler()

        /**
         * ##### SUBMIT FORM #####
         * 
         */

        // Function to handle form submission
        function submitForm() {
            const form = document.getElementById('inputForm');


            const data = getFormData(form)


            console.log(data)
            // Send the data back serverside.
        }

        // Function to collect form data into an object
        function getFormData(form) {
            let formData = {};

            for (let i = 0; i < form.elements.length; i++) {
                const element = form.elements[i];
                if (element.name) {

                    if (element.type === "checkbox" || element.type === "radio") {
                        formData[element.name] = element.checked;
                    } else {
                        formData[element.name] = element.value;
                    }
                }
            }
            return formData;
        }


    </script>


</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

<!DOCTYPE html>

<html>

<head>

<!-- For the tutorial: A Custom-Built HTML Time Input Element

https://yagisanatode.com/a-custom-build-html-time-input-element/ -->

</head>

<body>

<style>

.timeInput {

display: grid;

grid-template-columns: repeat(7, auto);

width: 8.0em;

}

.timeInput input::-webkit-outer-spin-button,

.timeInput input::-webkit-inner-spin-button {

display: none;

margin: 0;

}

.timeInput .time-lables {

font-size: x-small;

text-align: center;

}

.timeInput .time-hours {

width: 1.2em;

text-align: center;

}

.timeInput .time-minutes {

width: 1.2em;

text-align: center;

}

.timeInput .time-seconds {

width: 1.2em;

text-align: center;

}

.timeInput .time-milliseconds {

width: 2em;

text-align: center;

}

</style>

<div>Start Time</div>

<input class="time-milliseconds" type="number" name="time-milliseconds-start" min=0 max=999 step=1 placeholder="000"

data-maxlen=4>

</div>

<hr>

<div>Start Time</div>

<input class="time-milliseconds" type="number" name="time-milliseconds-end" min=0 max=999 step=1 placeholder="000"

data-maxlen=4>

</div>

<hr>

</form>

<button onclick="submitForm()">Submit</button>

/**

* Handles the time values for the timeInput element.

* - Provides validation

* -- Only numbers

* -- witin min and max

* -- max length

* - Moves cursor to next input after max length is exceeded.

function customTimeHandler() {

/**

* Validates the input value.

* @param {HTMLElement} input

function validate(input) {

let val = input.value

// Check for non numbers & remove

val = val.replaceAll(/\D/g, "")

// If greater than data-maxlen, remove last char

val = val.substring(0, input.dataset.maxlen)

const valNum = Number(val)

// If greater than max, set max

if (valNum < input.min) {

val = input.min

}

// If less than min, set min

else if (valNum > input.max) {

val = input.max

}

// If less than total number of chars in the placeholder add leading zero

const placeholderZeroes = input.placeholder

const charLenMax = 10 ** (input.placeholder.length - 1)

if (valNum == 0) {

val = placeholderZeroes

}

else if (valNum < charLenMax) {

const lenDif = placeholderZeroes.length + 1 - val.length

const addedZeros = placeholderZeroes.substring(1, lenDif)

val = addedZeros + val

}

input.value = val

}

const timeInputElements = document.querySelectorAll(".timeInput")

timeInputElements.forEach(timeInputEl => {

const timeInputs = timeInputEl.querySelectorAll('input')

timeInputs.forEach((input, idx) => {

input.addEventListener('focus', function() {

input.value = ""

})

input.addEventListener('input', function() {

const inputLen = input.value.length

const maxLen = input.dataset.maxlen

if (inputLen >= maxLen) {

validate(input)

if (idx < timeInputs.length - 1) {

timeInputs[idx + 1].focus()

}

})

input.addEventListener('focusout', function() {

validate(input)

})

}

customTimeHandler()

/**

* ##### SUBMIT FORM #####

// Function to handle form submission

function submitForm() {

const form = document.getElementById('inputForm');

const data = getFormData(form)

console.log(data)

// Send the data back serverside.

}

// Function to collect form data into an object

function getFormData(form) {

let formData = {};

for (let i = 0; i < form.elements.length; i++) {

const element = form.elements[i];

if (element.name) {

if (element.type === "checkbox" || element.type === "radio") {

formData[element.name] = element.checked;

} else {

formData[element.name] = element.value;

}

return formData;

}

</script>

</body>

</html>

Example 3: Build Multiple HTML Custom Time Input fields dynamically with JavaScript

In this final example, we want to dynamically create time input fields equal to the number of tests we have. We will do this with the createTimeHanlder() function.

Next, we will add the HTML for the custom time input into a template literal (A string with inputs) and then add a name and append a counter to the name tags of each number input element.

Dynamically create Multiple Custom HTML Time Input Fields inside a form with logged values

Here’s the updated code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--     For the tutorial: A Custom-Built HTML Time Input Element
    https://yagisanatode.com/a-custom-build-html-time-input-element/ -->
    <title>Time</title>
</head>

<body>
    <style>
        .timeInput {
            display: grid;
            grid-template-columns: repeat(7, auto);
            width: 8.0em;

        }

        .timeInput input::-webkit-outer-spin-button,
        .timeInput input::-webkit-inner-spin-button {
            display: none;
            margin: 0;
        }

        .timeInput .time-lables {
            font-size: x-small;
            text-align: center;
        }

        .timeInput .time-hours {
            width: 1.2em;
            text-align: center;
        }

        .timeInput .time-minutes {
            width: 1.2em;
            text-align: center;
        }

        .timeInput .time-seconds {
            width: 1.2em;
            text-align: center;
        }

        .timeInput .time-milliseconds {
            width: 2em;
            text-align: center;
        }
    </style>
    <form id="inputForm">
        <div id="target_timeInputs">
            

        </div>

    </form>
        <button onclick="submitForm()">Submit</button>          



    <script type="text/javascript">


        function createTimeFields(number){

            let htmlData = ""

            for(i= 0; i < number; i++){
                const num = i + 1

                const name = `Test ${num}`
                const appendName = `-${num}`

                const timeFields = `
            <div>${name}</div>
            <div class="timeInput">
                <span class="time-lables">HH</span>
                <span class="time-lables"></span>
                <span class="time-lables">MM</span>
                <span class="time-lables"></span>
                <span class="time-lables">SS</span>
                <span class="time-lables"></span>
                <span class="time-lables">MS</span>
                <input class="time-hours" type="number" name="time-hours${appendName}" min=0 max=24 step=1 placeholder="00" data-maxlen=2>
                <span>:</span>
                <input class="time-minutes" type="number" name="time-minutes${appendName}" min=0 max=60 step=1 placeholder="00" data-maxlen=2>
                <span>:</span>
                <input class="time-seconds" type="number" name="time-seconds${appendName}" min=0 max=60 step=1 placeholder="00" data-maxlen=2>
                <span>:</span>
                <input class="time-milliseconds" type="number" name="time-milliseconds${appendName}" min=0 max=999 step=1 placeholder="000"
                    data-maxlen=4>
            </div>
            <hr>

                `   
                htmlData += timeFields

            }
                const targetElement = document.getElementById("target_timeInputs")
                targetElement.innerHTML = htmlData
                customTimeHandler()

        }
        createTimeFields(4)

        /**
         * Handles the time values for the timeInput element.
         * - Provides validation
         * -- Only numbers
         * -- witin min and max
         * -- max length
         * - Moves cursor to next input after max length is exceeded.
         */
        function customTimeHandler() {

            /**
             * Validates the input value.
             * @param {HTMLElement} input
             */
            function validate(input) {
                let val = input.value

                // Check for non numbers & remove
                val = val.replaceAll(/\D/g, "")

                // If greater than data-maxlen, remove last char
                val = val.substring(0, input.dataset.maxlen)

                const valNum = Number(val)

                // If greater than max, set max
                if (valNum < input.min) {
                    val = input.min
                }
                // If less than min, set min
                else if (valNum > input.max) {
                    val = input.max
                }
                // If less than total number of chars in the placeholder add leading zero
                const placeholderZeroes = input.placeholder
                const charLenMax = 10 ** (input.placeholder.length - 1)

                if (valNum == 0) {
                    val = placeholderZeroes
                }
                else if (valNum < charLenMax) {
                    const lenDif = placeholderZeroes.length + 1 - val.length
                    const addedZeros = placeholderZeroes.substring(1, lenDif)

                    val = addedZeros + val
                }

                input.value = val
            }

            const timeInputElements = document.querySelectorAll(".timeInput")


            timeInputElements.forEach(timeInputEl => {

                const timeInputs = timeInputEl.querySelectorAll('input')

                timeInputs.forEach((input, idx) => {


                    input.addEventListener('focus', function() {
                        input.value = ""
                    })

                    input.addEventListener('input', function() {
                        const inputLen = input.value.length
                        const maxLen = input.dataset.maxlen

                        if (inputLen >= maxLen) {

                            validate(input)
                            if (idx < timeInputs.length - 1) {

                                timeInputs[idx + 1].focus()
                            }
                        }
                    })

                    input.addEventListener('focusout', function() {
                        validate(input)
                    })

                })

            })
        }

        

        /**
         * ##### SUBMIT FORM #####
         * 
         */

        // Function to handle form submission
        function submitForm() {
            const form = document.getElementById('inputForm');


            const data = getFormData(form)


            console.log(data)
            // Send the data back serverside.
        }

        // Function to collect form data into an object
        function getFormData(form) {
            let formData = {};

            for (let i = 0; i < form.elements.length; i++) {
                const element = form.elements[i];
                if (element.name) {

                    if (element.type === "checkbox" || element.type === "radio") {
                        formData[element.name] = element.checked;
                    } else {
                        formData[element.name] = element.value;
                    }
                }
            }
            return formData;
        }


    </script>


</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

<!DOCTYPE html>

<html>

<head>

<!-- For the tutorial: A Custom-Built HTML Time Input Element

https://yagisanatode.com/a-custom-build-html-time-input-element/ -->

</head>

<body>

<style>

.timeInput {

display: grid;

grid-template-columns: repeat(7, auto);

width: 8.0em;

}

.timeInput input::-webkit-outer-spin-button,

.timeInput input::-webkit-inner-spin-button {

display: none;

margin: 0;

}

.timeInput .time-lables {

font-size: x-small;

text-align: center;

}

.timeInput .time-hours {

width: 1.2em;

text-align: center;

}

.timeInput .time-minutes {

width: 1.2em;

text-align: center;

}

.timeInput .time-seconds {

width: 1.2em;

text-align: center;

}

.timeInput .time-milliseconds {

width: 2em;

text-align: center;

}

</style>

</div>

</form>

<button onclick="submitForm()">Submit</button>

function createTimeFields(number){

let htmlData = ""

for(i= 0; i < number; i++){

const num = i + 1

const name = `Test ${num}`

const appendName = `-${num}`

const timeFields = `

<input class="time-milliseconds" type="number" name="time-milliseconds${appendName}" min=0 max=999 step=1 placeholder="000"

data-maxlen=4>

</div>

<hr>

htmlData += timeFields

}

const targetElement = document.getElementById("target_timeInputs")

targetElement.innerHTML = htmlData

customTimeHandler()

}

createTimeFields(4)

/**

* Handles the time values for the timeInput element.

* - Provides validation

* -- Only numbers

* -- witin min and max

* -- max length

* - Moves cursor to next input after max length is exceeded.

function customTimeHandler() {

/**

* Validates the input value.

* @param {HTMLElement} input

function validate(input) {

let val = input.value

// Check for non numbers & remove

val = val.replaceAll(/\D/g, "")

// If greater than data-maxlen, remove last char

val = val.substring(0, input.dataset.maxlen)

const valNum = Number(val)

// If greater than max, set max

if (valNum < input.min) {

val = input.min

}

// If less than min, set min

else if (valNum > input.max) {

val = input.max

}

// If less than total number of chars in the placeholder add leading zero

const placeholderZeroes = input.placeholder

const charLenMax = 10 ** (input.placeholder.length - 1)

if (valNum == 0) {

val = placeholderZeroes

}

else if (valNum < charLenMax) {

const lenDif = placeholderZeroes.length + 1 - val.length

const addedZeros = placeholderZeroes.substring(1, lenDif)

val = addedZeros + val

}

input.value = val

}

const timeInputElements = document.querySelectorAll(".timeInput")

timeInputElements.forEach(timeInputEl => {

const timeInputs = timeInputEl.querySelectorAll('input')

timeInputs.forEach((input, idx) => {

input.addEventListener('focus', function() {

input.value = ""

})

input.addEventListener('input', function() {

const inputLen = input.value.length

const maxLen = input.dataset.maxlen

if (inputLen >= maxLen) {

validate(input)

if (idx < timeInputs.length - 1) {

timeInputs[idx + 1].focus()

}

})

input.addEventListener('focusout', function() {

validate(input)

})

}

/**

* ##### SUBMIT FORM #####

// Function to handle form submission

function submitForm() {

const form = document.getElementById('inputForm');

const data = getFormData(form)

console.log(data)

// Send the data back serverside.

}

// Function to collect form data into an object

function getFormData(form) {

let formData = {};

for (let i = 0; i < form.elements.length; i++) {

const element = form.elements[i];

if (element.name) {

if (element.type === "checkbox" || element.type === "radio") {

formData[element.name] = element.checked;

} else {

formData[element.name] = element.value;

}

return formData;

}

</script>

</body>

</html>

Conclusion

That’s it. I would love to hear how you used this in your own projects and what modifications you made. Let me know in the comments.

I am actually using this for a project for a Google Workspace Add-on using Google Apps Script along with an accompanying hosted private site using Golang, SQLite, temple and HTMX.

Have fun!

If you have found the tutorial helpful, why not shout me a coffee ☕? I'd really appreciate it.

Extracting the Valid Workdays Between Two Dates in JavaScript

Given a start date, end date, weekends and, holidays we will extract the valid workdays between two dates in JavaScript in this tutorial.

Sometimes we need to work backward from a date range and extract all the valid workdays within that range. Of course, we will need to exclude holidays and also days off for this period too so it is not just a simple case of subtracting the end date from the start date and adding one.

The best way to illustrate what we want to accomplish is by sharing some example data.

If you are looking to get the end work date given a start date and number of workdays, check out this tutorial:

Calculate the Workday End Date in JavaScript

The Example

For our example, we will need to prepare a list of date ranges, holiday periods and weekly days off (weekends).

We’ll say for convenience that we will work Monday to Friday and take Saturday and Sunday off. In JavaScirpt-land weekdays are represented as zero-based numbers with the USA-style start of the week occurring on Sunday. In this case, Sunday is zero (0) and Saturday is (6).

Let’s add in some holidays to give ourselves a well-earned break:

15 Sep 2024
31 Oct 2024 🎃🦇👻
24 Dec 2024
25 Dec 2024
01 Jan 2025

This could also be drawn from a regional API that provides dates for holidays in your area.

Finally, we will provide a small sample list of date ranges that we can check, but keep in mind that you can iterate over a much larger list at relatively good speed here.

10 Sep 2024 – 23 Sep 2024.
26 Oct 2024 – 4 Nov 2024.
22 Dec 2025 – 16 Jan 2024.

The blue represents the actual workdays, while the white section indicates the actual date range. Orange bold and underlined days are holidays that don’t fall on weekends. Light red days are weekly days off (in our case, weekends).

Across the top of the dates are the days of the week as a JavaScript day running from 0 (Sunday) to 8 (Saturday).

The Video Tutorial

To the video tutorial

Releases 8 Oct 2024

The Code

// EXTRACT THE WORKDAYS BETWEEN TWO DATES

// Given a start date, end date, weekends and holidays, extract the valid workdays between two dates. 


/**
 * Gets an array of workdays between two dates.
 * @param {Object} workperiod
 * @param {String} workperiod.startDate - Target date as valid JS date-string
 * @param {String} workperiod.endDate - Number of workdays. 
 * @param {Number[]} weekends - Array of days off as JS day of week. Sunday = 0, Saturday = 6
 * @param {String[]} holdays - Array of hoidays as JS-valid date-strings
 * @returns {Date[][]} Array of valid workdays.
 */
function getWorkdays(workperiod, weekends, holidays){
    const dayMilliseconds = 24 * 60 * 60 * 1000
    /**
     * Gets the UTC for current day.
     * @param {Sting} date 
     * @returns {Number} UTC Date in milliseconds
     */
    function getUTC(date){
        const dt = new Date(date)
        return Date.UTC(
            dt.getFullYear(),
            dt.getMonth(),
            dt.getDate()
        )
    }
    
    // Convert holidays of day of year as number. 
    const holidayUTC = holidays.map(holiday => getUTC(holiday))

    // Iterate over each date
    let workdays = workperiod.map(workday => {
        // -- Get day of year as number.
        const dayStart = getUTC(workday.startDate)
        const dayEnd   = getUTC(workday.endDate)

        // Get day of week
        let dayOfWeek = new Date(workday.startDate).getDay() 
        let day = dayStart

        let validWorkday = []
    
        while(day <= dayEnd){

            // Check if not weekends or holidays
            if(!weekends.includes(dayOfWeek) && !holidayUTC.includes(day)){
                const dt = new Date(day).toISOString().substring(0, 10)
                validWorkday.push(dt)
            }      

            day += dayMilliseconds
            dayOfWeek = dayOfWeek + 1 == 7? 0 : dayOfWeek + 1
        }

        return validWorkday

    })

    return workdays
}



/**
 * Main run test function
 */
function runsies(){
    // #### SAMPLE DATA 

    // HOLIDAYS
    const holidays = ["2024-09-15","2024-10-31","2024-12-24","2024-12-25","2025-01-01"]

    // DAYS OFF      [Sun: 0, Sat: 6] <- JavaScript Day of Week Standard.
    const weekends = [0, 6]

    const testRanges = [
        {
            startDate: '2024-09-10',
            endDate: '2024-09-23'
        },
        {
            startDate: '2024-10-26',
            endDate: '2024-11-04'
        },
        {
            startDate: '2024-12-22',
            endDate: '2025-01-16'
        },
    ]

    const respArray = getWorkdays(testRanges, weekends, holidays)

    testRanges.map((testRange, idx) => {
        testRange.validDays = respArray[idx]
        testRange.count = respArray[idx].length
    
        return testRange
    })
    
    console.log(JSON.stringify(testRanges,null, " "))

}

runsies()

100

101

102

103

104

105

106

107

// EXTRACT THE WORKDAYS BETWEEN TWO DATES

// Given a start date, end date, weekends and holidays, extract the valid workdays between two dates.

/**

* Gets an array of workdays between two dates.

* @param {Object} workperiod

* @param {String} workperiod.startDate - Target date as valid JS date-string

* @param {String} workperiod.endDate - Number of workdays.

* @param {Number[]} weekends - Array of days off as JS day of week. Sunday = 0, Saturday = 6

* @param {String[]} holdays - Array of hoidays as JS-valid date-strings

* @returns {Date[][]} Array of valid workdays.

function getWorkdays(workperiod, weekends, holidays){

const dayMilliseconds = 24 * 60 * 60 * 1000

/**

* Gets the UTC for current day.

* @param {Sting} date

* @returns {Number} UTC Date in milliseconds

function getUTC(date){

const dt = new Date(date)

return Date.UTC(

dt.getFullYear(),

dt.getMonth(),

dt.getDate()

)

}

// Convert holidays of day of year as number.

const holidayUTC = holidays.map(holiday => getUTC(holiday))

// Iterate over each date

let workdays = workperiod.map(workday => {

// -- Get day of year as number.

const dayStart = getUTC(workday.startDate)

const dayEnd = getUTC(workday.endDate)

// Get day of week

let dayOfWeek = new Date(workday.startDate).getDay()

let day = dayStart

let validWorkday = []

while(day <= dayEnd){

// Check if not weekends or holidays

if(!weekends.includes(dayOfWeek) && !holidayUTC.includes(day)){

const dt = new Date(day).toISOString().substring(0, 10)

validWorkday.push(dt)

}

day += dayMilliseconds

dayOfWeek = dayOfWeek + 1 == 7? 0 : dayOfWeek + 1

}

return validWorkday

})

return workdays

}

/**

* Main run test function

function runsies(){

// #### SAMPLE DATA

// HOLIDAYS

const holidays = ["2024-09-15","2024-10-31","2024-12-24","2024-12-25","2025-01-01"]

// DAYS OFF [Sun: 0, Sat: 6] <- JavaScript Day of Week Standard.

const weekends = [0, 6]

const testRanges = [

{

startDate: '2024-09-10',

endDate: '2024-09-23'

{

startDate: '2024-10-26',

endDate: '2024-11-04'

{

startDate: '2024-12-22',

endDate: '2025-01-16'

]

const respArray = getWorkdays(testRanges, weekends, holidays)

testRanges.map((testRange, idx) => {

testRange.validDays = respArray[idx]

testRange.count = respArray[idx].length

return testRange

})

console.log(JSON.stringify(testRanges,null, " "))

}

runsies()

The runsies() function

The runsies() function is the main test function. It contains the 3 different variables that we will send to the getWorkdays() function to generate our list of days.

We’re using the year-month-date (YYYY-MM-DD) format favoured by computer nerds like me.

Once we get the list of days back from the getWordays() function we will then map our existing testRanges array of objects and add the valid days as a property and the total count of valid days.

Finally, we will stringify the array object to make it pretty for logging.

You Are Looking So Fine Loki GIFfrom You Are Looking So Fine GIFs

Running the script will display these results:

[
 {
  "startDate": "2024-09-10",
  "endDate": "2024-09-23",
  "validDays": [
   "2024-09-10",
   "2024-09-11",
   "2024-09-12",
   "2024-09-13",
   "2024-09-16",
   "2024-09-17",
   "2024-09-18",
   "2024-09-19",
   "2024-09-20",
   "2024-09-23"
  ],
  "count": 10
 },
 {
  "startDate": "2024-10-26",
  "endDate": "2024-11-04",
  "validDays": [
   "2024-10-28",
   "2024-10-29",
   "2024-10-30",
   "2024-11-01",
   "2024-11-04"
  ],
  "count": 5
 },
 {
  "startDate": "2024-12-22",
  "endDate": "2025-01-16",
  "validDays": [
   "2024-12-23",
   "2024-12-26",
   "2024-12-27",
   "2024-12-30",
   "2024-12-31",
   "2025-01-02",
   "2025-01-03",
   "2025-01-06",
   "2025-01-07",
   "2025-01-08",
   "2025-01-09",
   "2025-01-10",
   "2025-01-13",
   "2025-01-14",
   "2025-01-15",
   "2025-01-16"
  ],
  "count": 16
 }
]

[

{

"startDate": "2024-09-10",

"endDate": "2024-09-23",

"validDays": [

"2024-09-10",

"2024-09-11",

"2024-09-12",

"2024-09-13",

"2024-09-16",

"2024-09-17",

"2024-09-18",

"2024-09-19",

"2024-09-20",

"2024-09-23"

"count": 10

{

"startDate": "2024-10-26",

"endDate": "2024-11-04",

"validDays": [

"2024-10-28",

"2024-10-29",

"2024-10-30",

"2024-11-01",

"2024-11-04"

"count": 5

{

"startDate": "2024-12-22",

"endDate": "2025-01-16",

"validDays": [

"2024-12-23",

"2024-12-26",

"2024-12-27",

"2024-12-30",

"2024-12-31",

"2025-01-02",

"2025-01-03",

"2025-01-06",

"2025-01-07",

"2025-01-08",

"2025-01-09",

"2025-01-10",

"2025-01-13",

"2025-01-14",

"2025-01-15",

"2025-01-16"

"count": 16

}

]

The getWorkdays() function

Parameters

This function takes three arguments:

workperiod: This is the array object containing the start date and end date for each of the sample periods.
weekends: The array of designated weekends as a number. For example, Saturday and Sunday would look like this: [0,6]
holidays: An array of holidays as date strings.

Function Variables and UTC dates

In this section, we’ll prepare our dates for efficient comparison by converting them into milliseconds so that we can extract our valid dates.

Calculating a Whole Day in Milliseconds (Line 16):

- - We start by calculating the duration of a whole day in milliseconds. This will allow us to iterate over each day and check if it is a valid date.

Handling Timezone and Daylight Saving (Lines 22-29):

- To avoid any timezone-related quirks or issues with daylight-saving events, we’ll convert our date periods to Coordinated Universal Time (UTC). We’ll create a small private method at the top of our function to handle this conversion.
- Note: We’ll encounter UTC conversions multiple times in our code, so having a dedicated method simplifies things.

Converting the Array of Holiday Dates to UTC Time (Line 32):

- Finally, we’ll convert our holiday array of dates to UTC time in milliseconds so that we can directly reference them against the currently iterated day.

Map an array of workdays

Next, we need to map our array of found workdays for each sample date range (Line 35). To do this we will use the JavaScirpt map method that takes a function as an argument.

Map Variables

We will need to iterate through each day within our date range checking if the date is not a weekend or a holiday and then record that date. To do this, we will need to set a few variables.

Get start and end days as UTC time in milliseconds (Lines 37-38)

Both the start date and end date will need to be converted to UTC dates using our private getUTC() method.

Set Mutable Variables ( Lines 41-42)

When we look at each date we need to check that day’s day of the week. To determine the starting day of the week of our range of dates we use the JavaScirpt getDay() method. This will update for each new day we check.
Next, we need to set our first day to check as a day.

Store Valid Wordays (Line 44)

Here we store our valid workdays in the validWorkday array.

Iterating over the days in the range

Our main task now is to iterate over each day in the range.

Not a Weekend or a Holiday (Line 49-52)

First, we check if the current day of the week is not included in the weekends array and the current day in UTC format does not exist in the holidayUTC array.
If both of these conditions are met, then the day is a valid workday and we add it to our validWorkay array.

Preparing for the Next Day (Lines 54-55)

Now we need to prepare for the next day check by:
- Updating the day by another day using the dayMilliseconds variable.
- Getting the next day of the week. Here, we need to keep in mind that if the next day of the week is equal to seven then it will go back to the start of the week which will be zero.

Returning it all back

Once we have our valid workday for the selected range, we return that array to generate our mapped array of workdays.

Finally, we return the workdays array back to the calling function.

If you have found the tutorial helpful, why not shout me a coffee ☕? I'd really appreciate it.

That’s all there is to get a list of valid workdays in a range in JavaScript. I use this function often when providing analysis tools for clients who want to see aggregate workdays over a period of days.

I’d love to hear what you would use this function for.

~Yagi

Calculate the Workday End Date in JavaScript

Given a start date, number of days, and holidays, this script calculates the end date of a workday period using JavaScript.

If you are looking to get a list of workdays in a range, then check out this tutorial:

Extract Workdays From a Date Range in JavaScript

Continue reading “Calculate the Workday End Date in JavaScript”

Extracting Overlapping date ranges between 2 Date Ranges with JavaScript

I recently had a project where I had to extract the date range between two sets of overlapping date ranges in JavaScript*.

Let’s say our user wanted to see any overlapping date ranges between "2024-09-01" and "2024-09-16". For the following set of date ranges:

"29 August 2024" – "18 September 2024"
"3 September 2024" – " 10 September 2024"
"3 September 2024" – "18 September 2024"
"29 August 2024" – "10 September 2024"
"20 August 2024" – "29 August 2024"
"18 September 2024" – "25 September 2024"

Here’s a more visual example:

Extracting overlapping date ranges between a target range of dates and a series of date ranges JavaScript

In my project, this represented many thousands of ranges to search, but we have a good sample here for testing.

Our expected returned results should only provide overlapping ranges that fit inside the target range, chopping off any excess dates. So the results would look a little like this:

1 Sep 2024 – 16 Sep 2024
3 Sep 2024 – 10 Sep 2024
3 Sep 2024 – 16 Sep 2024
1 Sep 2024 – 10 Sep 2024
null
null

*Well… It was actually a Google Apps Script project, but same-same 😉.

Table of Contents

The Video

https://youtu.be/GSPiRheS1CE

Extracting Overlapping Date Ranges in JavaScript (https://youtu.be/GSPiRheS1CE)

To the video tutorial.

Releases 24 Sep 2024

The Code

The following code provides a sample set of date ranges called dates that are compared against a target start (tgtStart) and end (tgtEnd) date range.

The script then iterates over the dates running the getDateRangeOverLap() function to compare the currently iterated date ranges against the target ranges.

If there is an overlap, then the overlapping date range is returned. If there is no overlap, then null is returned.

Finally, the script logs the response from the function displaying the current range and the newly updated overlap range, or null.

The different date formats are just to illustrate that any JavaScript date format can be used here.

Go ahead and make a copy of the script and give it a run in your favourite IDE.

// EXTRACTING OVERLAPPING DATE RANGES BETWEEN TWO RANGES OF DATES IN JAVASCRIPT



const dates = [[
    "29 August 2024", "18 September 2024"
  ],[
    "3 September 2024", " 10 September 2024"
  ],[
    "3 September 2024", "18 September 2024"
  ],[
    "29 August 2024", "10 September 2024"
  ],[
    "20 August 2024", "29 August 2024"
  ],[
    "18 September 2024", "25 September 2024"
  ]
  ]
  
  let tgtStart = "2024-09-01"
  let tgtEnd = "2024-09-16"
  
  dates.forEach(dt => {
    const resp = getDateRangeOverLaps(dt[0], dt[1], tgtStart, tgtEnd)

    datesResponse = resp? resp.map((date) => date.toDateString()) : "No Matches"
    
    console.log("Sample Range:", dt, "\nOverlap Range:", datesResponse)
  })
  
  /**
   * Returns the date range overlaps between two sets of text-based date ranges. 
   * @param {String} curStart - Start Date of sample
   * @param {String} curEnd - End Date of sample
   * @param {String} tgtStart - Start Date of target 
   * @param {String} tgtEnd - End Date of target 
   * @returns {Date[] | null} 
   */
  function getDateRangeOverLaps(curStart, curEnd, tgtStart, tgtEnd){
    curStart = new Date(curStart)
    curEnd = new Date(curEnd)
    tgtStart = new Date(tgtStart)
    tgtEnd = new Date(tgtEnd)


    const curStart_epoch = curStart.getTime()
    const curEnd_epoch = curEnd.getTime()
    const tgtStart_epoch = tgtStart.getTime()
    const tgtEnd_epoch = tgtEnd.getTime()

    if(curStart_epoch >= tgtEnd_epoch || curEnd_epoch <= tgtStart_epoch){
        return null
    }
  
    if(curStart_epoch <= tgtStart_epoch && curEnd_epoch >= tgtEnd_epoch){
      return [tgtStart, tgtEnd]
    }

    if(curStart_epoch >= tgtStart_epoch && curEnd_epoch <= tgtEnd_epoch){
      return [curStart, curEnd]
    }
    
    if(curStart_epoch <= tgtStart_epoch && curEnd_epoch <= tgtEnd_epoch){
      return [tgtStart, curEnd]
    }

    if(curStart_epoch >= tgtStart_epoch && curEnd_epoch >= tgtEnd_epoch){
      return [curStart, tgtEnd]
    }
  }

// EXTRACTING OVERLAPPING DATE RANGES BETWEEN TWO RANGES OF DATES IN JAVASCRIPT

const dates = [[

"29 August 2024", "18 September 2024"

],[

"3 September 2024", " 10 September 2024"

],[

"3 September 2024", "18 September 2024"

],[

"29 August 2024", "10 September 2024"

],[

"20 August 2024", "29 August 2024"

],[

"18 September 2024", "25 September 2024"

]

let tgtStart = "2024-09-01"

let tgtEnd = "2024-09-16"

dates.forEach(dt => {

const resp = getDateRangeOverLaps(dt[0], dt[1], tgtStart, tgtEnd)

datesResponse = resp? resp.map((date) => date.toDateString()) : "No Matches"

console.log("Sample Range:", dt, "\nOverlap Range:", datesResponse)

})

/**

* Returns the date range overlaps between two sets of text-based date ranges.

* @param {String} curStart - Start Date of sample

* @param {String} curEnd - End Date of sample

* @param {String} tgtStart - Start Date of target

* @param {String} tgtEnd - End Date of target

* @returns {Date[] | null}

function getDateRangeOverLaps(curStart, curEnd, tgtStart, tgtEnd){

curStart = new Date(curStart)

curEnd = new Date(curEnd)

tgtStart = new Date(tgtStart)

tgtEnd = new Date(tgtEnd)

const curStart_epoch = curStart.getTime()

const curEnd_epoch = curEnd.getTime()

const tgtStart_epoch = tgtStart.getTime()

const tgtEnd_epoch = tgtEnd.getTime()

if(curStart_epoch >= tgtEnd_epoch || curEnd_epoch <= tgtStart_epoch){

return null

}

if(curStart_epoch <= tgtStart_epoch && curEnd_epoch >= tgtEnd_epoch){

return [tgtStart, tgtEnd]

}

if(curStart_epoch >= tgtStart_epoch && curEnd_epoch <= tgtEnd_epoch){

return [curStart, curEnd]

}

if(curStart_epoch <= tgtStart_epoch && curEnd_epoch <= tgtEnd_epoch){

return [tgtStart, curEnd]

}

if(curStart_epoch >= tgtStart_epoch && curEnd_epoch >= tgtEnd_epoch){

return [curStart, tgtEnd]

}

getDateRangeOverLaps()

Get dates and Dates in milliseconds

Lines 40-49

Our first task is to convert the strings of dates into a proper JavaScirpt Date object format.

We also need to convert this date to a time in milliseconds since the epoch (1970-01-01) with the getTime() method.

Next, we need to check any possible overlap conditions.

Check for no Date Range Overlaps

    if(curStart_epoch > tgtEnd_epoch || curEnd_epoch < tgtStart_epoch){
        return null
    }

if(curStart_epoch > tgtEnd_epoch || curEnd_epoch < tgtStart_epoch){

return null

}

It is faster for the function to check if there are no overlapping dates between our current date range and our target range rather than to work through the nuances of the different overlap updates we need to do.

Here we check if our current range start epoch is greater than the target end epoch or if the current end epoch is less than the target start epoch. If either of these conditions are met, we return null.

Otherwise, we can run through the other conditions below.

Check if the Current date range encompasses the entire target date range

    if(curStart_epoch <= tgtStart_epoch && curEnd_epoch >= tgtEnd_epoch){
      return [tgtStart, tgtEnd]
    }

if(curStart_epoch <= tgtStart_epoch && curEnd_epoch >= tgtEnd_epoch){

return [tgtStart, tgtEnd]

}

In this situation, the current date range starts before the target date and ends after the target date. In this case, the overlapping range will be the same as the target date.

Check if the current start and end range fit inside the target range.

    if(curStart_epoch > tgtStart_epoch && curEnd_epoch < tgtEnd_epoch){
      return [curStart, curEnd]
    }

if(curStart_epoch > tgtStart_epoch && curEnd_epoch < tgtEnd_epoch){

return [curStart, curEnd]

}

Here, we have a current date range that starts after the target date range and ends before the target date range.

We have a match and that matching date will be the range of the current date so that is what we will return.

Check if the Current date ranges End within the target date

    if(curStart_epoch <= tgtStart_epoch && curEnd_epoch < tgtEnd_epoch){
      return [tgtStart, curEnd]
    }

if(curStart_epoch <= tgtStart_epoch && curEnd_epoch < tgtEnd_epoch){

return [tgtStart, curEnd]

}

In this condition, we check if the current date range starts before the target range but also ends before the target range. In this case, we return the target start date and the current end date.

Check if the current date range starts within the target date

    if(curStart_epoch > tgtStart_epoch && curEnd_epoch >= tgtEnd_epoch){
      return [curStart, tgtEnd]
    }
  }

if(curStart_epoch > tgtStart_epoch && curEnd_epoch >= tgtEnd_epoch){

return [curStart, tgtEnd]

}

For the final condition check we determine if the current range starts within the target range but ends after the target range. If this condition is met, then we return the current start range and the target end range.

That’s all there is to it.

I’d love to hear how you applied this or tweaked it for your own projects.

~Yagi.

Methods

The Code – Colory Class in JavaScript

Detailed Documentation

rgbToHex(r, g, b)

Parameters

Returns

hexToRgb(hex)

Parameters

Returns

generateColorGradient(colorStart, colorEnd, steps)

Parameters

Returns

Conclusion

Share this:

Like this:

Features

Mobile Input will display the number pad

Value retrieval

Automatically moves to the next input

Client-Side Validation

Removing ‘Accepted’ number input characters that are not numbers

Cannot exceed the number range

Returning back a tab will clear the field

Prepends Zeros (0) to Any Number Not At Max Character Length

Quickly add or remove a time input

The Code for the Custom Time Input field

Example 1: Single time field

Example 2: Multiple time fields

Example 3: Build Multiple HTML Custom Time Input fields dynamically with JavaScript

Conclusion

Share this:

Like this:

The Example

The Video Tutorial

The Code

The runsies() function

The getWorkdays() function

Parameters

Function Variables and UTC dates

Map an array of workdays

Map Variables

Iterating over the days in the range

Returning it all back

Share this:

Like this:

Share this:

Like this:

The Video

The Code

getDateRangeOverLaps()

Get dates and Dates in milliseconds

Check for no Date Range Overlaps

Check if the Current date range encompasses the entire target date range

Check if the current start and end range fit inside the target range.

Check if the Current date ranges End within the target date

Check if the current date range starts within the target date

Share this:

Like this: