Height Picker (to collect feet and inches)?

Select pickers & dropdowns
1

There’s mass, temp, speed etc, what about height? Or is there an open API to be able to define a new mode to get height in feet and inches?

2

Hi @Brook_Davies :wave:

Good question :wink:

Yes, it’s possible to create a height picker with our Measurement component.

Also, you are welcome to check out our documentation: Measurement documentation for various frameworks | Mobiscroll - this would be helpful in creating a height picker.

Let me know if this helps or if something is unclear.

3

I have read the docs and purchased a license. I did not see anything about customizing the components i the docs. Where do I look specifically for information on customizing the measurement component?

4

It should be pretty simple :grinning:

Basically, you just need to grab this code (mentioned in the docs) and personalize to your requirement:

$(function () {
    // create a measurement picker
    $("#measurement").mobiscroll().measurement({ 
        units: ['EUR', 'USD', 'GBP', 'CHF'], //change to cm, m, in, ft
        defaultUnit: 'EUR', //select the default unit
        min: 0,
        max: 150,
        step: 0.05,
        convert: function (val, unit1, unit2) { 
            var multipliers = {
                EUR: 1, 
                GBP: 0.772,
                CHF: 1.105,
                USD: 1.110
            }; // personalize the convert to height

            return val * multipliers[unit2] / multipliers[unit1];
        }
    });
});

Or just use the Distance demo and change the units with the presets: Measurement documentation for JQuery | Mobiscroll.

Let me know if this explains!

5

Thank you for your help!

I still can’t get this to work, I want it to look like this:

image

How do I set the “'” char after the first number?
How do I set the second spin will to be 1-12? Do the min/max apply to both numbers or just one? Are there more docs on customizing?

6

Thanks for sharing @Brook_Davies :wink:

If you would like to achieve something like you shared, a better solution would be to use our Scroller component. It’s a better solution because for the Scroller you can pass the values with custom characters like: ’ or ", but with Measurement you can’t.

Also, here you can find the documentation for the Scroller: Scroller documentation for JQuery | Mobiscroll - as you can see with the buttons option you can set the buttons which you want to show, and with the headerText option you can display the Height text as it’s on the screenshot.

Let me know if this helps :slight_smile:

7

Perfect thank you! That worked!