I've decided to use a textbox for getting the users date of birth, I'm trying to make this textbox so it restricts the users input into DD/MM/YYYY, What i'm trying to get is to that the slash(/) is fixed within the textbox. The user won't want to have the type the "/" so I'm trying to get it fixed in the textbox
This is what I'm trying to achieve
|____/____/___|
my code so far is just a basic textbox but here it is anyway
<label for="title">Date of Birth</label>
<input type="text" name="dateofbirth" id="dateofbirth">
</div>
With HTML5 you could simply use the date input type:
<input type="date" name="dateofbirth" id="dateofbirth">
Here's the MDN reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
I think this is what you're looking for:
How to do date masking using javascript (without JQuery)?
If you check the Pratik Shah answer there's the format you were looking for and it seems to work.
Code:
<input
type="text"
name="date"
placeholder="dd/mm/yyyy"
onkeyup="
var v = this.value;
if (v.match(/^\d{2}$/) !== null) {
this.value = v + '/';
} else if (v.match(/^\d{2}\/\d{2}$/) !== null) {
this.value = v + '/';
}"
maxlength="10"
>
It works on my Firefox 52.0.2
Hope it helps.
This may be what you're looking for.
<input type="date" name="dateofbirth" id="dateofbirth">
Bear in mind that this won't work in certain browsers -- Firefox and older IE versions.
You can try maskedInput plugin for jQuery. It is basically what you are looking for. https://github.com/digitalBush/jquery.maskedinput
Related
I am finding it difficult to enter date into a date field box. I am using selenium with PhantomJS.
This is what I've tried so far:
def dobInfo(driver,dob):
dobentry = driver.find_element_by_xpath("/html[1]/body[1]/div[3]/div[1]/div[3]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/div[1]/div[3]/div[1]/div[1]/div[1]/form[1]/div[5]/label[1]")
Actions(driver).move_to_element(dobentry).wait(0.3).click().perform()
driver.save_screenshot("clickedonDOB.png")
elem = driver.find_element_by_xpath("/html[1]/body[1]/div[3]/div[1]/div[3]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/div[1]/div[3]/div[1]/div[1]/div[1]/form[1]/div[5]/input[1]")
driver.save_screenshot("clickedonDOB2.png")
elem.send_keys(dob)
I have been saving screenshots, and what I can see is that the field is not being selected to show DD/MM/YYYY replacing the Date of Birth Label, when trying to click on element dobentry to then enter dob in 'dd/mm/yyyy' format. I've tried clicking on input and on label, and both do not seem to click but return no error.
xPath
/html[1]/body[1]/div[3]/div[1]/div[3]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/div[1]/div[3]/div[1]/div[1]/div[1]/form[1]/div[5]/input[1]"
returns:
< input id="b11eba51-2d36-4fd4-8f73-0bf2bbca3b12" type="date" placeholder="Date of Birth" value="" name="dateOfBirth" data-componentname="dateOfBirth" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-ddlabel="dd" data-mmlabel="mm" data-yyyylabel="yyyy" xpath="1">
The url is https://www.nike.com/gb/launch/ (Have to click on 'join/log' in then 'join now' to get form)
Thanks :)
Can you try using this as a selector input[id="fe49fe96-c81e-452e-b7ae-9a32ab4e5702"] ?
I was able to access the element via jQuery
This is my fiddle http://jsfiddle.net/foucpgkL/
<input type="text" value=""/>
I need to have my textbox containing same value as given i.e 000 not 0
Also I have requirement to allow user to edit only first digit.i.e user should only input like 100,200,500 and not like 123,110 etc.
How can I achieve this using jquery.
I am using Angular Js so angular directive could be best option.
var elem="000";
$('input').val(elem);
$(".text").keyup(function(){
console.log($(this).val());
$(this).val($(this).val().substring(0,1)+"00");
});
Demo
jsfiddle
var elem='000';
$('input').val(elem);
$("input").on('change',function(){
$(this).val($(this).val().substring(0,1)+'00');
});
Try this:
<input type="text" value="" step="100" />
EDIT:
FIDDLE
My answer was not sufficent so I made a short fiddle.
HTML:
<input type="number" step="100" value="000" min="0" max="900" onchange="checkZero(this)">
JS:
function checkZero(input) {
if (!parseInt(input.value)){ // if value is not in format "000", is "0" or 0
input.value = "000";
}
}
Use ng-model and ng-change. I suggest wrapping it in a directive. Feel free to ask for a snippet if you need.
I would suggest Jquery Mask for this
<input type="text" id="myInput" />
jQuery(function($){
$("#myInput").mask("900",{placeholder:"000"});
}
I currently have the jQuery datepicker implemented which is working great on all browsers but when I view in mobile (iPad) the IOS default date picker comes up too. What is the best way to remove it? CSS? change input type?
This is what my input element looks like:
<input type="date" name="payment_Received" class="form-control datepicker" />
<script>
j$(document).ready(function(e) {
j$('.datepicker').datepicker({
dateFormat:'yy-mm-dd'
});
});
</script>
Just use type="text" instead of type="date"
You could also add readonly="readonly" to prevent the keyboard from appearing.
In my form I have a text field in which user type date. Good habit tells me to not let user to put anything other then dgit and '-' symbol in the field. However i have a bit problem with implementing such feature. So far I Have a field which accept only digits. If user try to put in field letter, this letter is being removed. But the point is to create (DD-MM-YYYY)format so field have to accept '-' symbol. Here is my code:
<input type="text" name="test3" placeholder='DD-MM-YYYY' onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')"/>
i tried put |\- into regex but with no success. Can anyone point me where I am doing mistake?
use thie regex
/^\d{4}-\d{2}-\d{2}$|[^\d-]|-\d{2}-\d*-/
you can also
**/^\d{4}-\d{2}-\d{2}$|[^\d-]|-\d{2}-\d*-/.test(input.value)**
HTML5 has another approach for you:
<input type="date" name="test3">
The browser is responsible for the formatting of the date presentation, though.
You can try something like
<input type="text" name="test3" placeholder='DD-MM-YYYY' onkeyup="if (/[^\d-]/g.test(this.value)) this.value = this.value.replace(/[^\d-]/g,'')" onchange="validate(this)"/>
function validate(el){
var regex = /^(0?[1-9]|[12][0-9]|3[01])-(0?[1-9]|1[012])-\d{4}$/;
if(!regex.test(el.value)){
alert('invalid date');
el.value = '';
}
}
Demo: Fiddle
You can do this with HTML5
see my jsfidle: http://jsfiddle.net/H7tMZ/2/
<form>
<input type="text" name="date" pattern="\d{1,2}-\d{1,2}-\d{4}" placeholder="dd-mm-jjjj"/>
<button type="submit"/>
</form>
<label for="date1">Drop down Date box:</label>
<input type="text" name="date1" id="date1" value="2005-12-30"
data-dojo-type="dijit/form/DateTextBox"
required="true" />
What happens: The third statement doesnt work for me and what I get in result is a simple text box.
Whats required: I want to get a x number of date text boxes. Where x is retrieved from database.
You have a mix of the old dojo declarative syntax and the newer html5 compatible syntax. The "data-" piece is used for the newer html5 syntax.
As pointed out by OammieR, you also don't use the "/" in the declaration and it should be a ".". See below for example.
<input id="date1" data-dojo-type="dijit.form.DateTextBox"
data-dojo-props="required:true,name:'date1',value:'2005-12-30'" />
Try the below one
<input type="text"
placeholder="Date of Birth"
name="date"
dojoType="dijit.form.DateTextBox"
required="true"
>
If you use the new version(AMD). When require you have to use xxx/xxx/xxxx
but in data-dojo-type you have to use xxx.xxx.xxx instead.
Here is an example.
I am facing same problem and get this solution. Before using AMD syntax in declarative you have to require module which is used to create widgets like:-
In your case first you have to require widget
require(["dojo/parser","dijit/form/DateTextBox"],function(parser,DateTextBox)
{
parser.parse();
});
as your creating widget declarative your have to parse your code also.
In HTML:-
<label for="date1">Drop down Date box:</label>
<input type="text" name="date1" id="date1" value="2005-12-30"
data-dojo-type="dijit/form/DateTextBox"
required="true" />
Now your free to use either xxx/xxx/xxxx or xxx.xxx.xxxx.
I hope this will help you...
Well, If you are using dojo AMD then below is the code to add a dijit DateTextBox dynamically.
require(["dijit/form/DateTextBox", "dojo/dom-construct", "dojo/domReady!"],function(DateTextBox, domConstruct)
{
var parentNode = domConstruct.create("div", { "class": "container" }, mainContainer); // place this container in your main conatainer.
var Date = new DateTextBox({
name="date1",
id="date1",
value="2005-12-30"
}, parentNode);
});
Note: if you are creating this in loop or multiple date picket at a time take care of id because id should be unique and should not be repeated.
Hope this will help you :)