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.
Related
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 use angularjs and xeditable in my application. I would like to change the behaviour of editable textarea and editable text to allow the validation when the user click outside.
It will be better with an example :
<span editable-textarea="item.label.text" e-rows="2" e-cols="80" buttons="no" onshow="onShow()" onhide="onClose()">{{item.label.text}}</span>
With this code, we can't see the buttons to validate and to cancel our choice. Moroever the enter key doesn't validate, so it's impossible for the user to validate his choice.
What I want to do is changing the behaviour of the enter key to validate the new text. And I want to add the possibility for the user to change text and when he click outsite the textarea, the new text will be save.
The problem is I have no idea of how to do that even after reading all the documentation of xeditable and I didn't find the solution on any forum.
Do you have an idea of how can I do that ?
Thank you in advance
You can add the blur attribute with submit value and couple it with onbeforesave attribute:
<span editable-textarea="item.label.text" e-rows="2" e-cols="80" buttons="no" onshow="onShow()" onhide="onClose()" blur="submit" onbeforesave="validate($data)">{{item.label.text}}</span>
Example Fiddle: http://jsfiddle.net/NfPcH/8269/
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/
I have a HTML5 <input type="date" /> field, and I want to instantly respond to changed dates.
Currently, the input field partially obscures the data that changes when the date is changed, so I'd prefer to auto-close the calendar picker after a date is changed.
I've tried to .blur() on change, but this doesn't have any effect. The event fires, and I can get the new date value, but the date picker is not hidden. Any suggestions are welcome.
.bind('change', function(){
var input = $(this);
if(input.is(':valid'))
{
input.blur();
}
});
[UPDATE]
By now, I have also resorted to adding an additional input element on the page (<input type="text" id="hideMyCalendar" />) and instead of input.blur(); to do a $('#hideMyCalendar').focus(); but this also doesn't hide the picker, even though the focus is visually brought to a different control. By now, I assume, the only possible way would be to call a chrome (webkit) specific method, but I haven't fount such a method to exist (yet).
01/30/14 This no longer works
This is ugly, but it works for Chrome.
function closeDate() {
$('#txtDate').attr('type', 'text');
$('#txtDate').attr('type', 'date');
}
This is the only way I was able to close the html5 date after selecting a date.
Just remove the date attribute, then apply it again.
The value is retained, and it just looks as if it was closed manually.
UPDATE:
This is the method I use to make all date types close like this:
$(document).ready(function () {
//make all date html5 close on change in chrome
$('input[type="date"]').change(function () {
closeDate(this);
});
});
function closeDate(dateInput) {
$(dateInput).attr('type', 'text');
$(dateInput).attr('type', 'date');
}
so I'd prefer to auto-close the calendar picker after a date is changed
HTML 5 input type="date" does not specify how this input should be realized by browsers. It can be a graphical datepicker, it can be a simple validation on a user input - whatever the browser vendor wants to implements.
So, hiding the "datepicker", which is in fact browser dependend, is not possible in a cross-browser way.
However, you can use the jQuery UI datepicker, where you have full control how it is shown and hidden.
You said (in your comment):
I prefer the HTML5 input element because I hope this brings unity to the web.
And yet you are willing to call a webkit specific method? (in the update to the question):
By now, I assume, the only possible way would be to call a chrome (webkit) specific method, but I haven't fount such a method to exist (yet).
I think that defies the purpose. Then you will need an Opera specific method, an IE specific method, a Firefox specific method and so on... no more unity to the web.
If you really want a single user experience across browsers, then go for jQuery UI. It doesn't only give you the versatility to do what you want (as Nil'z points out), it also give you the same behaviour across heterogeneous browsers.
Instead of using HTML5 where available. What you should want to do is to fall back to HTML5 when JavaScript is not available. That is using unobstructive JavaScript principles. In fact jQuery is designed to do that by default...
Just create your HTML5 (and HTML4 compatible) field:
<input type="date" name="date" id="date" value="" />
Your jQuery:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
And your script:
<script type="text/javascript">
$('#date').datepicker();
</script>
The end result will be that all browsers where jQuery can run will use the jQuery based datepicker, if JavaScript is not available then it will use HTML5 datepicker, and finally if the browser doesn't support HTML5 then it will be just a text field. That's graceful degradation.
And of course you will use the hide method from jQuery datepicker:
$( ".selector" ).datepicker( "hide" );
Note: +1 to Nil'z
I know I didn't answer the question, but this solves the problem.
Try this:
$( ".selector" ).datepicker( "hide" );
Reference: http://api.jqueryui.com/datepicker/#method-hide
I use the jQuery UI datepicker to let the user select a date. It has some shortcuts so that it can be controlled using the keyboard:
page up/down - previous/next month
ctrl+page up/down - previous/next year
ctrl+home - current month or open when closed
ctrl+left/right - previous/next day
ctrl+up/down - previous/next week
enter - accept the selected date
ctrl+end - close and erase the date
escape - close the datepicker without selection
But it seems not user friendly for me. I did not find out myself how to select a date with the keyboard until I read it in the documentation. I guess only few users will find out that they have to press "CTRL + arrow keys" to select a date.
Therefore, I would like to replace the keyboard shortcuts with some other ones. Especially I would like that the user does not have to press the "Control" key when navigating with the arrow keys between days and weeks.
Because I did not find any configuration about this in the documentation, I tried to achieve this aim using some custom javascript, where I listen for keyboard events and set the date manually. But it leads from one problem to another:
It does only work fine after the first date was selected
It interferes when the user uses "CTRL + arrow keys" after navigating with arrow keys only
The date in the input field is immediately updated, unlike when navigating with "CTRL + arrow keys" of the datepicker's original keyboard control
Other shortcuts of the browser do not work because of event.preventDefault()
I know that all of this problems can be solved by additional Javascript again, but I would prefer it if I could just configure this somehow.
Is it possible to configure the shortcuts of the jQuery UI datepicker?
This is not configurable through datepicker. You would have to change the _doKeyDown method source here.
The easiest way to do this would be to extend the widget. It would look something like this:
$.extend($.datepicker, {
_doKeyDown: function(event){
//copy original source here with different
//values and conditions in the switch statement
}
});
you can check this add-on:
http://hanshillen.github.io/jqtest/#goto_datepicker
for more accessibility options.
If its a Jquery date picker then by default it will support all of these shortcut. One issue might be there, i.e. Theme. You can use the CSS CDN given in Jquery Site itself. Then, focus will be visible even. Which is a great click for Accessibility.
If you want to replace one of the shortcuts and do not like coping the code from the repository in case of updating the jquery ui library, use:
// original key down callback
var doKeyDown = $.datepicker._doKeyDown;
$.extend($.datepicker, {
_doKeyDown: function(event){
if(event.which !== $.ui.keyCode.ENTER) {
doKeyDown(event);
}
else {
//do something else
}
}
});
Keep a reference of _doKeyDown before you overwrite it and call it for all other shortcuts.