I have two fields in my form : one is the limit and other is value. So if I enter 30 in the limit field, then in my value field I need to open up something similar to a date picker, which shows all numbers from 1-30 and user should be allowed to pick one or multiple values.
Is there a js library that I can use to achieve this?
Ive built it for you
http://jsbin.com/ehuke4/37/edit
How about using a slider? In HTML 5 you can use the below code. For browsers that do not support it you'll want to use some sort of alternative.
<input type="range" min="1" max="30">
jQuery UI has a nice slider too.
Related
I notice that the date input works differently from the other inputs.
I would like to know if it is possible to have different colors inside the date input.
To illustrate, I would like that when nothing is written inside:
And have this when we are typing the date:
I'm developing with Angular, I have not done HTMLElement, but I can in need.
Here is my code:
https://stackblitz.com/edit/angular-scss-demo-pusdk7
Is it possible to get something like that?
Can you please try this:
<input type="date"
name="Birth date"
[formControlName]="BIRTH_DATE"
/>
I have that code:
(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))
Checks that
1) the year is numeric and starts with 19 or 20,
2) the month is numeric and between 01-12, and
3) the day is numeric between 01-29, or
b) 30 if the month value is anything other than 02, or
c) 31 if the month value is one of 01,03,05,07,08,10, or 12
It's from page http://html5pattern.com/Dates
I tried to move some part of code, but then this code doesnt work... Even I tried to find some instructions how can I do it. But I can't handle with it...
How can I get a result like with above code but in format:
DD.MM.YYYY
Also is there any possibility to add the dots in field that user can only input the numbers without dots?
(I mean that the dots will be there every time)
Thank you for help.
Sorry for my English.
I think this is something that you are looking for:
(?:(?:0[1-9]|1[0-9]|2[0-9])\.(?:0[1-9]|1[0-2])|(?:30)\.(?:(?!02)(?:0[1-9]|1[0-2]))|(?:31)\.(?:0[13578]|1[02]))\.(?:19|20)[0-9]{2}
Also tried some possible test cases and worked fine:
You can use an input mask plugin for some of what you are asking for instead I suppose.
One popular one that comes to my mind is Robin Herbots: https://github.com/RobinHerbots/Inputmask
You can find demos off his page here: https://robinherbots.github.io/Inputmask/index.html
Once you implement the plugin into your page, then it's just a matter of establishing the right input tags and jquery for them. For example:
Your phone number script would then be something along the lines of:
<script type="text/javascript">
$("#Phone").inputmask({mask: "999.999.9999"});
</script>
You should look up the documentation for it.
I'm searching something similar to the input tag with type="time", but i want to put in this field ilimited value.
For example: 48:45.
Can someone help me please?
The best solution for my situation is :jquery time and duration picker
A client has asked to use the type="number" attribute for a credit card field in order to get the right keyboard on mobile devices, but would like some padding after every 4th character to make it look more like a credit card number. Is such a thing even possible?
mask input plugin is the best option for that.
$('#creditcard').mask('0000 0000 0000 0000');
You can use different separate inputs, all of type 'number', and move focus between them using javascript every time the input meets your criteria (let's say: 4 characters...)
I have a standard <input /> control on my form, decorated with type="date"
When rendered, it displays the correct watermark of yyyy-mm-dd, and you can select a date correctly.
However, when you try type in a value, the year extends to 6 digits, instead of four. I have added screenshots to help demonstrate the issue I'm having.
Is anyone else getting this? I'm using Chrome ( Version 35.0.1916.153 m ) as my default browser.
I'd like a way to force a 4year input that doesn't involve extra JS.
the max attribute is working, as far as i know...
the format of max is trickey, if you put the correct format everything will work fine....
see here for example:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_max_min_date
Use max attribute to fix this problem like:-
<input type="date" max="1979-12-31">
A bit old, but for posterity...
Using the max attribute eliminates this problem.
<input type="date" max="2999-12-31">
Pen: https://codepen.io/iHearRobots/pen/OQVzLZ
It will let you type a larger year. It wasn't designed with a cap, so to allow years beyond 9999. Not sure why. (note, even with the max attribute, it doesn't appear to restrict it. [edit] .. it may not allow the user to actually submit after entering that larger number.)
You will need to use a JavaScript solution if you want to fully restrict it.
See this previous thread
const maxLengthCheck (event) ->{
let date = event.target.value
if(date){
let dateArr date.split('-')
if(dateArr[0] && dateArr[0].length>4){
dateArrl[0]=dateArr[0].substr(e, dateArr[0].length-1)
date = dateArr.join('-')
console.log("updated date : ", date)
document.getElementById('date-input').value = date
}
}
}
//HTML changes
<input id="date-input" type="date" onInput={maxLengthCheck}/>