I am looking for a numeric spinner that has a property for incremental value (.25, .5, .75), supports auto-rounding in case someone types in a value (or an change event), max and min ranges, and support for custom images would be great.
This is a sample/demo of the page with the controls I plan on using http://jsfiddle.net/NwHGw/. I plan on adding a spinner to the lunch input box. I'm fairly new to JQuery so if this is a matter of just tying together a few different techniques please let me know. The plugin that is being used in this sample is jQuery Time Entry by Keith Wood.
Thanks for your help
Update (12/6 9:22 PM EST):
I have made an update to the code http://jsfiddle.net/NwHGw/1/. I was wondering what everyone thought of this implentation. The box I'm having issues with is the 'Lunch' box. It was originally going to be an decimal (1, 1.5, 2.25, ect), but if I use the same plugin as the time controls then I can specify the input as HH:MM, set the type to 24H and limit the input to say 00:00 to 03:00 and keep the rest of the logic the same. I can then do the decimal conversion on the backend.
Related
I'm working on a work schedule of sorts, a feature that I'm trying to create would be one that can be setup initial and would not need to be touched ever again. However I'm not sure where to even start; I have a weekly schedule with three different fields, a middle field that is unique and requires no attention and a day/night field. My user is able to drag users into these fields and set that they are expected to working during that period. However as my user has different shifts that sometimes overlap I'm looking to color code each of the shifts of which there is a total of five, the shifts go on a pattern of working: 2 nights, than 2 days off, than 3 days working and lastly than 2 days off. What would be the best approach of mapping this as I cannot simply put that Monday nights are color X as the by the time next weeks comes around the shift would be starting on Wednesday, along side this some shifts will be working at the same time so the color coding should not cover the entire day but only a limited number of entries (2). My initial idea was to try using Hashmap or something of the sort but I'm uncertain how I would structure it to achieve what I'm looking for..
Drag and drop experience would be nice but I assume not mandatory, so can try to use standard features. Im not sure which user is using this - the worker doing the shift, or a manager allocating workers to the shifts? If is for a manager - If you created a 'shift' object and had shifts represented as records you'd be able to create list views of those shifts ie. 'next n days','this month' etc. Then you could use bulk action within the list view to assign a user to multiple shift records at a time. Would be reasonably efficient and quick to build. Just a thought... (and I couldnt follow what you meant about color coding sorry.)
I’m new to react and I’m connecting a react front end to a flask backend. I’m in a group project but I’ve been somehow responsible for 90% of the work. I’ve implemented the fields with MUI but I’m flexible and prefer working over appearance.
I made a form with react-form-hooks and tried to implement a custom range slider (I’m sorry that it’s not all broken out to components and is mainly single file). I’m new to React, JS and TSX (there’s a sandbox at the bottom of the post).
*Side-note: the form is loading pretty slow right now, any tips on improving performance would be greatly appreciated. (:
(Actually at this point appreciative for any ideas and open to feedback).
Advanced Search Form
What I am trying to achieve:
I am trying to take input as a range of values from 0 to 100 in a form. The values can be passed as [0,100] on default or if they are updated, on pressing submit the current values ([min, max]) of their state would be submitted. The information would be passed as a json response to an api backend through a post request.
I found some options online on implementing a range slider with react-hooks-form but could not get any of them to work unfortunately. Could someone please help me implement the range slider (I will need to use 3 of them in my form)?
If this is not possible, could you please assist with one of the following alternatives:
Option 1: Setting up a select box/combo-box that does the following:
Provides the user a max or min option based off the corresponding max/min option. I.e. if there is no input in either the Max or Min select/combo-box: Then both boxes would have 0-100 as the possible range of values. If the value of one box was touched: then the second select/combo fields values would be of the corresponding remainder of the range.
E.g. If I selected 70 for my minimum value my other select/combo would provide for me to either leave it blank, or give me the options 70 to 100. Or if I selected 82 for the max input field- the select for min would only allow me to use 0 to 82 for my min or leave it blank.
Option 2:
Text input fields with the same validation schema as above that would become an error state if the user entered something like:
artist-rating min: 40
artist-rating max: 20
Here is the sandbox:
https://codesandbox.io/s/advanced-search-form-forked-0lhgrv
Thanks for updating the post.
You problem is that Mui Slider Component, doesn't take the default input props, so you can't spread the register method returned by react-hook-form since it returns the default value and onChange props.
But react-hook-form is a great library and it already addressed the integration with the main react UI libs: https://react-hook-form.com/get-started#IntegratingwithUIlibraries
I implemented a basic example here:
https://codesandbox.io/s/wonderful-silence-9qlfbj?file=/src/App.js
They expose quite extensive and clear APIs, take your time to study them if you plan to use it as your form management library.
Up to now, in our application, we are dealing with formatting numbers in forms in a quite classical way.
We are using jquery and its plugin globalization.
If the user select an input element with a specific class (that represents the format type) then we unformat the value and when the user releases the focus, we format it again.
Is there a efficient way to never unformat numbers : if the user select the input field, then being able modify the value and keep the visible format.
EDIT
After having take a look to mplungjan comment, I would to know if it is possible to use the I18N format dictionary coming from the globalization plugin into the jquery masked input plugin.
EDIT 2
I would like to have the format of the mask adapted to the language of the user. And to I18N the client, we are using this plugin. This plugin possess a dictionary of format by culture.
In our application, the mayority of number fields have 2 decimals. Such as 1 000,00 in french, 1.000,00 in italian or 1,000.00 in english. If a field already has a value (1.000,00 in italian for the example), currently if the user select the field, on the focus, we will deformat the field and show it like this : 1000 (the decimal separator will be the . if there is non-zero decimal). And when the user will release the field.
I would like to improve this by keeping the formatted value while the field is focused. Except for the 2 decimals, there is no more constraints on numbers.
EDIT 3
I tried this mask plugin but I am not able to do exactly what I need. I would like to create a dynamic mask for any numbers with 2 decimals. But it would also be great that if the user does not write decimals numbers then it will autocomplete on blur event with .00 in english (and respectively ,00 in french and italian).
This mask is almost what I need (except for the autocompletion) : 9{1,3}( 999){0,3}[,99]. But its behaviour is still quite tricky for the user. The first block ("9{1,3}") has exactly the behaviour I am looking for. Then if the user just continues writing digits he will directly jump to the last block ("[,99]"). For writing large numbers the user has to write explicitly a space.
Latter i will be able to replace the space by the thousand separator and the "," by the decimal separator.
If anyone has an idea of how improve my mask or about a different plugin, I will be happy to read your comments.
I have a simple javascript which displays data on a canvas between two timestamps.
Most of the time, my users are likely to want to quickly navigate to a specific range of dates / times but sometimes thwy will also want to explicitly state a range.
Is there libraries etc. which could be used for this or should I just roll my own?
I've found the solution with timepicker.
I have this Excel file with over 30 calculation, but i am having doubts about how to create that on the web.
In excel it is very easy, but on the web it must all be made in javascript, and it is not as easy as reference inputs as in excel where you can just say (C4 + C5 / E9 * 1000).
All the calculations has to be calculated in realtime, so that they can se the final price at the end, without submitting it first.
Since some of the inputs depend on others values, how I see it, the formular must be recalculated a lot of times.
Has anybody done something like this before, and did they do it? Right now I can not seem to find any good javascript libraries which can ease the process.
This is a neat grid plugin for jQuery which supports creating "Excel like" Grids on Webpages.
http://www.trirand.com/blog/
https://github.com/tonytomov/jqGrid
http://trirand.com/blog/jqgrid/jqgrid.html
Give each input an "id" attribute (will make the use of getElemetntById possible). Google for "javascript oninput event".
You want to take an Excel spreadsheet and translate that into javascript code that receives the input variables (the ones you have to fill in Excel) and outputs all of them?
The way to do this is describe each Excel cell as a node in a graph. If cell Y needs cell X to perform a computation, then you must have an edge from node X to node Y.
You must then find a topological ordering for the graph (that is, an order of the cells/nodes such that when you try to compute any cell D you have already computed all the cells it depends on). The algorithm to do this is simple and linear in the size of the graph: http://en.wikipedia.org/wiki/Topological_sorting
You can just write javascript code in sequence according to the topological order, and you'll be able to find all the results with having to visit any operation more than once.
There are several js libraries (AngularJS is one I enjoy) which offer real-time databinding. If you set up a few input text boxes (NumberA, NumberB), and have some read-only text areas databound to the formulas you need (NumberA + NumberB/10), you might be able to accomplish this without too much stress.
Of course, this assumes you need only one "row" of information- a recreation of Excel is going to be a mite trickier.