I have an HTML5 'date' input field on a form. The dates it displayes are limited to a given range.
This works fine.
I need to prevent users from being able to key a date into this field using a keyboard, making them rely on the calendar dropdown provided by the field and using the mouse to click on a chosen date.
How can this be done? Does the 'date' input have any control like this?
Many thanks in advance. :)
Like this:
Javascript/Jquery:
$("input").keydown(false);
HTML:
<input type="Date" />
See the Demo.
Hope this helps.
You can do that by stopping the default work of keyup event.
//HTML
<input id="date" type=date>
//Javascript
document.getElementById("date").onkeyup=function(){
return false;
}
Working jsfiddle http://jsfiddle.net/y5Fpn/
Related
on the mobile version of my site I am using input type=date instead of a jquery datepicker to allow for use of the devices inbuilt datepicker as it's generally much quicker and easier to use.
I am trying to detect when 1 date field has a value inputted/changed, to then update the min date attribute of a second datefield, and , submit the form using ajax.
I cannot correctly detect the input or change.
$('#mob-gig-date-gteq').blur(function() {
var date = $("#mob-gig-date-gteq").val();
console.log(date)
$(this).closest("form").submit();
});
(Using .change yields the same results)
If I select a date here nothing happens. On the computer if I select a date, press enter on one of the inputs (day/month/year) and THEN change the date again, the code fires.
On mobile nothing happens at all.
How can I detect the input change on a date field?
Thanks.
Try the jquery .change method. Blur will only fire when the input loses focus.
$('#mob-gig-date-gteq').change(function() {
var date = $(this).val();
console.log(date, 'change')
});
Code pen tested in chrome
I want to use the HTML5 date input field
<input type='date' name='customDate'>
So that other users can make use of the build-in datepicker from their browser.
I would like to check if the input is actually in date format. As I found here: Is there any way to change input type="date" format? there is no unique presentation format. For example, in Chrome the input of the date field is given in the form of dd.mm.yyyy and in Firefox 24 or IE 9/10 the date in the input field is presented as YYYY-MM-DD.
My first problem is, how do you tell the user in which format you want him to type in the date? In Firefox I would need something like
<label>Enter Date(YYYY-MM-DD)</label><input type='date'
name='customDate' placeholder='YYYY-MM-DD'>
But this would be wrong for Chrome.
Secondly, how can I check before submission if the current input is in the valid date format (of the browser)?
I know that I could check with PHP after submit if the date format is given as YYYY-MM-DD, but how do you check it with JavaScript before submission?
Use it like this:
<label>Enter Date(YYYY-MM-DD)</label>
<input type='date' name='customDate' placeholder='YYYY-MM-DD' pattern="(?: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))" >
For all other HTML5 Dates Pattern Please visit this:
http://html5pattern.com/Dates
I think the best way to validate HTML5 date format is to leave the job to the datepicker if one is available.
For instance, the native datepicker of chrome or ios5 does not allow wrong user date input. In chrome it even checks if the date does exists in a human calendar.
If the browser does not have native datepicker (like firefox), then this should be detected with Modernizer and one should use the jQuery UI datepicker. Here is a nice article that explains how to do this.
Unfortunately, the jQuery datepicker does not check if the input is valid.
However, one can set the dateType and constrainInput, but they dont check if the date actually exists, just if the syntax is correct. Note that the jquery validation plugin has troubles with the date attribut.
just change the type of date dynamically with onfocus and onblur and validate like below.
<input type="text" id="startDate" onfocus="(this.type='date')" onblur="{this.type='text'}" name="startDate" placeholder="Start Date(yyyy-mm-dd)"/>
$("#startDate").val()=""
finally your date value will be yyyy-mm-dd
The best way is to use a calendar/datepicker (ie: jquery-ui).
You can specify the format you want and is also userfriendly.
jquery-ui details and examples for datepicker
I have a field that accepts the year, so I have created
input type="number"
and implemented keydown event to restrict user to enter more than 4 digits.
Now I'm facing an issue and need help in figuring out the logic. Following is the case:
Enter 4 digits in the textbox
Select entered text using SHIFT + Arrow Keys
Now if you type a number it should replace the data but since I have barred it, it will not. Need to cover this case.
Also find code in following JSFiddle.
I also have lot of css and validation on input[type=number], so cannot change to input[type=text].
Also same form is used on mobile devices, and when user selects textbox, numeric keyboard should appear.
Edit 1
while searching for option, I found a JSfiddle that could direct us to right direction.
Issue here also is input[type=number] does not support selection property. Reference
As an alternative, we have decided to move to input[type=tel]. This would work in similar fashion, but will allow us to use maxLength attribute. Still if anyone has a better way, please share.
HTML:
<input type="tel" class="year" maxlength="4" data-temp="">
jQuery:
$(document).on('input', '.year', function(){
var txt = $(this).val();
if(isNaN(txt) || txt > 9999){
$(this).val( $(this).data('temp') );
return;
}
$(this).data('temp', txt);
});
JSFiddle
May be this will work , you can use the Regular Express to validate only number and
^[0-9\.\-\/]+$
and also you can use the .length method to insure that you have specific length
You can't submit an invalid value in this case:
<form>
<input type=number min=0 max=9999 required />
<input type=submit value=Submit />
</form>
So I have moved my code to input[type=tel] and Updated JSFiddle
If you check, I have added 2 events
Keydown to restrict from entering any invalid key.
Blur event to check if entered value is number only or not.
Now you might be thinking, if I have already restricted user to enter only number, how can he enter incorrect value.
Explanation
In my implementation, I have used keydown and using keycode, I'm allowing/blocking. Interesting case is when user press and holds shift key. Now on keydown, I get same keycode but value is different(A special character). So checking the integrity on blur.
A better way would have been handling keypress and keydown together and I'll update fiddle and update my answer, but for now I guess this has solved my problem.
Thanks you all for all comments/answer. Also kindly let me know if there are any better ways to implement.
I want users to be able to change a Kendo UI Datepicker value only through its button and selecting the date from the pop-up. How can I prevent users from typing in the Datepicker textbox? Can I disable the textbox without disabling the whole control?
On your input element add this attribute and value...
onkeydown="return false;"
This will disable typed input and still allow using the calendar control input.
Use the control as below-
#(Html.Kendo().DatePicker()
.Name("FromDate")
.HtmlAttributes(onkeydown="javascript:return false;" })
)
It will disable keyboard typing. Same way other conditions also can be handled.
Find your input element, and disable it
$('#datepicker').attr('disabled','disabled');
( tried it on the kendo demo website http://demos.kendoui.com/web/datepicker/index.html )
you can do it by two ways
//disable kendo ui datapicker click event
$(".k-datepicker input").bind('click dblclick',function () {
return false;
});
//make it readonly
$(".k-datepicker input").prop("readonly", true);
If you want prevent user to typing date in date picker and only select date from pop-up try this code
$(".k-datepicker").find('span').find('input').attr("readonly", "readonly");
Of course, the date and time picker widget should have the option to force input only with UI and not by keyboard... Otherwise it's a recipe for a real DateTime "formating" nightmare !
I am quite surprised that the framework doesn't provide anything for this obvious use case.
I had the same need and got it to work using the following logic:
$("#date").kendoDatePicker({
format: "dd MMMM yyyy"
});
$("#date").attr("readonly","readonly");
That way the user cannot enter a value by keyboard and can only input a well formated date using the dropdown date selection window.
Indeed, the widget does not restrict user while typing in the input. The reason for this behavior is explained here:
Why widget does not restrict typing
Along with all other solutions shared in this thread, the one can create a custom Masked DatePicker, which will restrict the user to a specific date format. Check this how-to demo for more details:
Create Date Masking
**Note that this is not supported by Kendo UI as a built-in feature, hence you will need to use it on your own risk. The good news is that it works pretty good without known side effects.
.HtmlAttributes(new { onkeydown="return false" })
Justin's answer works, but it doesn't prevent a right mouse-click from pasting an incorrect value. You could use the oncontextmenu to prevent a right mouse-click
oncontextmenu="return false;"
This would also prevent the number in the calendar from being copied though.
for tagHelpers just use following
output.Attributes.Add("onkeydown", "javascript:return false;");
I have solved it on HTML level using onkeydown="return false;"
<input id="datePickerPastId" onkeydown="return false;" title="datepicker" style="width: 13%" class="mr-3" disabled />
The GlobalEventHandlers.onkeydown is supported by all browsers.
I'm wondering if there is a way to allow a form to be selected (clicked) but at the same time make the form unable to have text entered.
I've tried using readonly which gave me the functionality but the cursor it provides is the same as if I set disabled=true and it greys out the input field which is confusing for the user. Is there any alternatives?
<input class="notype" />
$('.notype').on('keydown', function(e){
e.preventDefault();
})
What you haven't told us is why. If it's because you want it to be copied to clipboard but not changed, the above won't let you do that, if so please elaborate.