How do I use the jQuery Datepicker with a textbox input:
$("#my_txtbox").datepicker({
// options
});
that doesn't allow the user to input random text in the textbox.
I want the Datepicker to pop up when the textbox gains focus or the user clicks on it, but I want the textbox to ignore any user input using the keyboard (copy & paste, or any other). I want to fill the textbox exclusively from the Datepicker calendar.
Is this possible?
jQuery 1.2.6
Datepicker 1.5.2
You should be able to use the readonly attribute on the text input, and jQuery will still be able to edit its contents.
<input type='text' id='foo' readonly='true'>
Based on my experience I would recommend the solution suggested by Adhip Gupta:
$("#my_txtbox").attr( 'readOnly' , 'true' );
The following code won't let the user type new characters, but will allow them to delete characters:
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
Additionally, this will render the form useless to those who have JavaScript disabled:
<input type="text" readonly="true" />
try
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
If you are reusing the date-picker at multiple places then it would be apt to modify the textbox also via JavaScript by using something like:
$("#my_txtbox").attr( 'readOnly' , 'true' );
right after/before the place where you initialize your datepicker.
<input type="text" readonly="true" />
causes the textbox to lose its value after postback.
You rather should use Brad8118's suggestion which is working perfectly.
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
EDIT:
to get it working for IE use 'keydown' instead of 'keypress'
After initialising the date picker:
$(".project-date").datepicker({
dateFormat: 'd M yy'
});
$(".project-date").keydown(false);
$("#txtfromdate").datepicker({
numberOfMonths: 2,
maxDate: 0,
dateFormat: 'dd-M-yy'
}).attr('readonly', 'readonly');
add the readonly attribute in the jquery.
You have two options to get this done. (As far as i know)
Option A: Make your text field read only. It can be done as follows.
Option B: Change the curser onfocus. Set ti to blur. it can be done by setting up the attribute onfocus="this.blur()" to your date picker text field.
Ex: <input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>
To datepicker to popup on gain focus:
$(".selector").datepicker({ showOn: 'both' })
If you don't want user input, add this to the input field
<input type="text" name="date" readonly="readonly" />
I just came across this so I am sharing here. Here is the option
https://eonasdan.github.io/bootstrap-datetimepicker/Options/#ignorereadonly
Here is the code.
HTML
<br/>
<!-- padding for jsfiddle -->
<div class="input-group date" id="arrival_date_div">
<input type="text" class="form-control" id="arrival_date" name="arrival_date" required readonly="readonly" />
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
JS
$('#arrival_date_div').datetimepicker({
format: "YYYY-MM-DD",
ignoreReadonly: true
});
Here is the fiddle:
http://jsfiddle.net/matbaric/wh1cb6cy/
My version of bootstrap-datetimepicker.js is 4.17.45
I know this thread is old, but for others who encounter the same problem, that implement #Brad8118 solution (which i prefer, because if you choose to make the input readonly then the user will not be able to delete the date value inserted from datepicker if he chooses) and also need to prevent the user from pasting a value (as #ErikPhilips suggested to be needed), I let this addition here, which worked for me:
$("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste }); from here https://www.dotnettricks.com/learn/jquery/disable-cut-copy-and-paste-in-textbox-using-jquery-javascript
and the whole specific script used by me (using fengyuanchen/datepicker plugin instead):
$('[data-toggle="datepicker"]').datepicker({
autoHide: true,
pick: function (e) {
e.preventDefault();
$(this).val($(this).datepicker('getDate', true));
}
}).keypress(function(event) {
event.preventDefault(); // prevent keyboard writing but allowing value deletion
}).bind('paste',function(e) {
e.preventDefault()
}); //disable paste;
Instead of adding readonly you can also use onkeypress="return false;"
This demo sort of does that by putting the calendar over the text field so you can't type in it. You can also set the input field to read only in the HTML to be sure.
<input type="text" readonly="true" />
HTML
<input class="date-input" type="text" readonly="readonly" />
CSS
.date-input {
background-color: white;
cursor: pointer;
}
I've found that the jQuery Calendar plugin, for me at least, in general just works better for selecting dates.
$('.date').each(function (e) {
if ($(this).attr('disabled') != 'disabled') {
$(this).attr('readOnly', 'true');
$(this).css('cursor', 'pointer');
$(this).css('color', '#5f5f5f');
}
});
Here is your answer which is way to solve.You do not want to use jquery when you restricted the user input in textbox control.
<input type="text" id="my_txtbox" readonly /> <!--HTML5-->
<input type="text" id="my_txtbox" readonly="true"/>
$("#my_txtbox").prop('readonly', true)
worked like a charm..
Instead of using textbox you can use button also. Works best for me, where I don't want users to write date manually.
I know this question is already answered, and most suggested to use readonly attribure.
I just want to share my scenario and answer.
After adding readonly attribute to my HTML Element, I faced issue that I am not able to make this attribute as required dynamically.
Even tried setting as both readonly and required at HTML creation time.
So I will suggest do not use readonly if you want to set it as required also.
Instead use
$("#my_txtbox").datepicker({
// options
});
$("#my_txtbox").keypress(function(event) {
return ( ( event.keyCode || event.which ) === 9 ? true : false );
});
This allow to press tab key only.
You can add more keycodes which you want to bypass.
I below code since I have added both readonly and required it still submits the form.
After removing readonly it works properly.
https://jsfiddle.net/shantaram/hd9o7eor/
$(function() {
$('#id-checkbox').change( function(){
$('#id-input3').prop('required', $(this).is(':checked'));
});
$('#id-input3').datepicker();
$("#id-input3").keypress(function(event) {
return ( ( event.keyCode || event.which ) === 9 ? true : false );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet"/>
<form action='https://jsfiddle.net/'>
Name: <input type="text" name='xyz' id='id-input3' readonly='true' required='true'>
<input type='checkbox' id='id-checkbox'> Required <br>
<br>
<input type='submit' value='Submit'>
</form>
replace the ID of time picker:
IDofDatetimePicker to your id.
This will prevent the user from entering any further keyboard inputs but still, the user will be able to access the time popup.
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
Try this
source:
https://github.com/jonthornton/jquery-timepicker/issues/109
This question has a lot of older answers and readonly seems to be the generally accepted solution. I believe the better approach in modern browsers is to use the inputmode="none" in the HTML input tag:
<input type="text" ... inputmode="none" />
or, if you prefer to do it in script:
$(selector).attr('inputmode', 'none');
I haven't tested it extensively, but it is working well on the Android setups I have used it with.
In my case i have use disableTextInput property
$( ".datepicker" ).datepicker({'dateFormat' : 'd-m-y', 'disableTextInput':true });
Or you could, for example, use a hidden field to store the value...
<asp:HiddenField ID="hfDay" runat="server" />
and in the $("#my_txtbox").datepicker({ options:
onSelect: function (dateText, inst) {
$("#<% =hfDay.ClientID %>").val(dateText);
}
If you want the user to select a date from the datepicker but you dont want the user to type inside the textbox then use the following code :
<script type="text/javascript">
$(function () {
$("#datepicker").datepicker({ maxDate: "-1D" }).attr('readonly', 'readonly');
$("#datepicker").readonlyDatepicker(true);
});
jQuery datepicker works fine on a static page, but I can't get it to work on a jQuery Dialog page. This is a wordpress site.
I know everything necessary is included because it works on a static page. The dialog page is triggered with a button click.
This is the code on the static page (working):
<input type="text" class="datepicker" name="datepicker" value="" />
Here is the input box on the dialog page, which is created dynamically (nothing happens when clicking in the input box):
<input type="text" value="" data_original_for_sale_date="" id="for_sale_date" class="datepicker">
Here is the jQuery code:
jQuery(document).ready(function($) {
$('.datepicker').datepicker({
dateFormat : 'mm/dd/yy'
});
});
Any help would be appreciated. (I'm a newbie...)
Update your jquery code by this
$(document).ready(function($) {
$('body').on('focus',".datepicker", function(){
$(this).datepicker({
dateFormat : 'mm/dd/yy'
});
});
});
I have been able to successfully attach a datepicker to an input field. However, is it possible to also display the datepicker that is attached to the input after clicking the span field?
<div class="date_month">
<input class="date" id = "set_date_01" type="text" readonly>
<span class="date_icon"> </span></div>
I have looked around and could not find a good solution. Any help is appreciated!
I would try this:
$('.date_icon').on('click', function() {
$('#set_date_01').focus();
});
But you really should use a label with a for attribute instead of your span. You wouldn't need js then to achieve this effect and it would be great for accessibility.
For instance:
<div class="date_month">
<label for="set_date_01">
Pick a date
<input class="date" id="set_date_01" type="text" readonly>
</label>
</div>
It's hard to say for sure without knowing which datepicker you're using, but most jQuery date pickers will have events that you can trigger manually. So you would need to capture the click event for that span tag, and fire the datepicker's 'show the datepicker' event.
Here's some documentation describing what I mean when using the jQuery UI built-in datepicker:
http://api.jqueryui.com/datepicker/#method-show
DatePicker has an attribute named buttonImage:
$(".date").datepicker({
buttonImage: "/images/datepicker.gif",
showOn: "both"
});
showOn must be set to button or both in order for this to work.
I am trying to create two date input fields by using jquery-ui's datepicker() function, bot fields have the id of "datepicker": <input type="text id="datepicker" name="publishUp"> and <input type="text id="datepicker" name="publishDown">
I tried to attach a function to the event focus as following, hoping to show the calendar only on the "activated" field, but it doesn't work. I am wondering where might be wrong?
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
$("#datepicker").focus(function() {
$(this).datepicker();
});
</script>
Only showing when the input field is activated is the default behavior of the datepicker. Take the datepicker out of the event handler.
You shouldn't have multiple inputs with the same ID; the $("#datepicker") selector will only find the first one. If you want multiple datepicker inputs, use a class instead. So the HTML should be:
<input type="text" class="datepicker" name="publishUp">
<input type="text" class="datepicker" name="publishDown">
and the jQuery should then be:
$(function() {
$(".datepicker").datepicker({
// options
});
});
I have been using a datepicker js class known as tcal. After you link to the class on your server, you can call it with one line of code.
in header
<link rel="stylesheet" type="text/css" href="tcal.css" />
<script type="text/javascript" src="tcal.js"></script>
html
Pick date: <input type="text" size=8 name="eventdate" class="tcal" value=>
It has been working fine.
However, to streamline a page, I am now trying to take it out of the html and display it in a div only when a user clicks on it using getElementById. while I can display the input box ok, when written to the browser this way, the class no longer seems to work.
js
function pickDate() {
document.getElementById('show').innerHTML = 'Pick date: <input type="text" size=8 name="eventdate" class="tcal" value=>';
}
html
Pick Date<div id="show"></div>
When user clicks, input box appears. However, datepicker calendar does not pop up when you click in tox. Does anyone know why tcal is not working when written to browser this way?
Thanks for any suggestions.
the reason for this happening is that you are adding input box in the dom later your datepicker code is initialized just reinitialize datepicker code
as i see your library may don't have a code to initialize is seperately you can do hide and show instead of adding into the dom later, if the text box will be available in the starting of page ready it will be initialized so use the following code
html -
<div id="something" style="display:none;">Pick date: <input type="text" size=8 name="eventdate" class="tcal" value=></div>
js -
document.getElementById('something').style.display="block";