This is a migrated thread and some comments may be shown as answers.

numeric only date picker

7 Answers 64 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Nebras
Top achievements
Rank 1
Nebras asked on 07 Mar 2011, 08:53 AM
How to prevent user from writing a text in the date picker textbox

7 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 07 Mar 2011, 06:30 PM
Hello Nebras ,

 
You will need to wire keypress event of the input element of the DatePicker and call e.preventDefault() if the e.keyCode is different then a number.

Kind regards,
Georgi Krustev
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Nebras
Top achievements
Rank 1
answered on 08 Mar 2011, 09:43 AM
ok but no keypress event is supported on datepicker ..
see this
.Name("DatePicker")
.ClientEvents(c=>c.OnKeyPress("FF"))
0
Georgi Krustev
Telerik team
answered on 08 Mar 2011, 10:36 AM
Hello Nebras ,

 
DatePicker UI component does not support OnKeyPress event. Check this help topic for more information.
This functionality is not supported and you will need to add some custom code in order to achieve your goal.
First you will need to wire HTML input element. Then call preventDefault if pressed key is not a number. You can use jQuery for this:

<% Html.Telerik().ScriptRegistrar()
                 .OnDocumentReady(() => {
                 %>
                                                                $("#DatePicker").find(".t-input")
                                                                                                 .bind("keypress", function(e){
                                                                                                    if(e.keyCode < 48 && e.keyCode > 57){
                                                                                                           e.preventDefault();
                                                                                                     }
                                                                                                  });
                  <% })
                 .Render(); %>
You can try with the provided code snippet and modify it in order to accomplish your goal. The code snippet is not tested.

Regards,
Georgi Krustev
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Nebras
Top achievements
Rank 1
answered on 08 Mar 2011, 11:37 AM
ok , but e.keyCode is always UNDEFINED , any help?
0
Nebras
Top achievements
Rank 1
answered on 09 Mar 2011, 09:03 AM
any solution???????
0
Nebras
Top achievements
Rank 1
answered on 09 Mar 2011, 09:30 AM
finally i found a solution :
function validateDatePicker(evt) {
           var theEvent = evt || window.event;
           var key = theEvent.keyCode || theEvent.which;
           key = String.fromCharCode(key);
           var regex = /[0-9]|\./;
        if (!regex.test(key) && theEvent.which != 47 /* forward slash*/ && theEvent.keyCode != 8/*delete*/ && theEvent.keyCode != 37 /*left*/ && theEvent.keyCode!=39 /*right*/) {
               theEvent.returnValue = false;
               theEvent.preventDefault();
           }
 
$(document).ready(function () {
 
        $("#DatePicker").find(".t-input")
           .bind("keypress", function (e) {
               validateDatePicker(e);
           });
   
 
    });
0
Gary
Top achievements
Rank 1
answered on 08 May 2013, 02:32 PM
It's a shame because I really love the rad controls, but they are always missing something.
I wish I could add in the functionality I need on some of them.

Nebras, you can force the onkeypress event into the control like this, and it will take it fine.
<telerik:RadTimePicker ID="RadTimePicker1" runat="server" onkeypress="return isNumberKey(event)" />
Then in your script you can use jquery to really help this.
<script type="text/javascript">
 
    // Only Numeric keys and "."-(46) are allowed
    function isNumberKey(e, allowDecimalPoint) {
        var key = e.charCode || e.keyCode || 0;
        var keychar = String.fromCharCode(key);
        if (!allowDecimalPoint && key == 46) e.preventDefault();
        //alert("keychar:"+keychar + " \n charCode:" + e.charCode + " \n key:" +key);
        if (((key == 8 || key == 9 || key == 46 || key == 35 || key == 36 || (key >= 37 && key <= 40)) && e.charCode == 0) /* backspace, end, begin, top, bottom, right, left, del, tab */
                || (key >= 46 && key <= 57)) { /* 0-9 */
            return;
        } else {
            e.preventDefault();
        }
    }
 
</script>
Hope this helps others :-)

Tags
Date/Time Pickers
Asked by
Nebras
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Nebras
Top achievements
Rank 1
Gary
Top achievements
Rank 1
Share this question
or