When I make my datepicker readonly I see that the user cannot type anything into the text box. However, they can still change the value using the calendar Icon. How can I hide the calendar icon so that users cannot change the date value?
I do not want to disable the datepicker since I need the value posted to the server upon form submit.
$(function () {
$(".datepicker").datepicker({
showOn: "button",
buttonImage: "../calendar/images/calendar.gif",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
onClose: function () {
$(this).focus();
}
});
});
There is no such a way to do the stuff but you can go through the following aspects:
You can set the range allowed to some invalid range so the user can't select any date:
$(".datepicker").datepicker({
minDate: -1, // Add this one further
maxDate: -2, // Add this one further
showOn: "button",
buttonImage: "../calendar/images/calendar.gif",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
onClose: function () {
$(this).focus();
}
}).attr('readonly', 'readonly');
JS Fiddle
Just destroy the datepicker when you change the input to readonly:
$(".datepicker").datepicker("destroy").prop("readonly", true);
Demo #1
Alternately, you can hide the image trigger:
$(".datepicker").prop("readonly", true).next("img").hide();
Demo #2
For button trigger you can simply disable it:
$(".datepicker").prop("readonly", true).next("button").prop("disabled", true);
Demo #3
Related
I'm trying to make a jQuery datepicker set minDate depending on the value of a radio button.
When I try to write a function returning a string, my JavaScript keeps crashing. Any ideas on why this is not working?
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-35:+0",
dateFormat: "yy-mm-dd",
minDate: function() {
var str = "-35Y";
if($("#inputfield").val() == "value") {
str = "-33Y";
}
return str;
}
});
jsFiddle
This works fine.... you need to make sure that you have inputfield with a value
<input type='text' id='datepicker'></div>
<input type='text' value='value' id='inputfield'>
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-35:+0",
dateFormat: "yy-mm-dd",
minDate:mdate()
});
function mdate(){
var str = "-35Y";
if($("#inputfield").val() == "value"){
str = "-33Y";
}
return str;
}
Edit:*
$('#inputfield').on('change',function(){
$('#datepicker').datepicker('option', 'minDate', mdate());
});
The option minDate expects a value, not a function. A datepicker will not automagically update the value of minDate whenever the selection of your radio button changes.
If you want the datepicker's minimum date to change whenever the radio button selection changes, then you must explicitly program this. Something along the following lines:
$('[name=myradiogroup]').change(function () {
var newMininumDate = /*insert logic here*/;
$('#datepicker').datepicker('option', 'minDate', newMininumDate);
});
See http://api.jqueryui.com/datepicker/#method-option
This works for me:
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-35:+0",
dateFormat: "yy-mm-dd",
minDate: $("#inputfield").val()
});
I have two datepickers: arrival and departure. Now if one selects the 26th April in arrival, the departure datepicker should be preselected to the April (currently it would be March). So how could I implement this?
I tried the following:
$( "#arrival" ).datepicker({
buttonImage: 'fileadmin/templates/images/calendar.png',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
showOn: 'both',
buttonText: 'arrival',
onSelect: function(){
var arrivalDate = $(this).datepicker('getDate').getDate();
var arrivalMonth = $(this).datepicker('getDate').getMonth();
var arrivalYear = $(this).datepicker('getDate').getFullYear();
$('#departure').datepicker({ defaultDate: new Date(arrivalYear,arrivalMonth,01) });
}
});
$( "#departure" ).datepicker({
buttonImage: 'fileadmin/templates/images/calendar.png',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
showOn: 'both',
buttonText: 'departure'
});
setDate would fill out the text input field which is not desired. Is this possible?
Problem
Currently in your onSelect callback you're attempting to reinitialize the departure element in order to change its defaultDate option:
$('#departure').datepicker({ defaultDate: new Date(arrivalYear,arrivalMonth,01) });
However, after initialization, the datePicker options should be set in this form, without re-initializing the element:
datePicker('option','some-option','some-option-value').
Solution
Use the correct form to set the defaultDate option of the depature element.
For example:
...
var departure_date = new Date(arrivalYear,arrivalMonth,01);
$('#departure').datepicker('option','defaultDate', departure_date);
...
See jsFiddle demo
first caluculate the value then set like this
$( "#departure" ).val($("#arrival").val())datepicker(
......
);
I want to force the user to only use the drop down and calendar to
select a date in the DatetimePicker control.
I do NOT want them to select the control, then use the up and down
arrow keys to change the date.
How can I prevent them using the arrow keys?
Any help much appreciated.
<script type="text/javascript">
$(function () {
$(".datepicker").datepicker({
changeMonth: true,
changeYear: true
});
});
$(function () {
$(".datepickerApplyyear").datepicker({
changeMonth: true,
changeYear: true,
yearRange: '0+100'
});
});
</script>
FYR:
I think there is a config called hideIfNoPrevNext, but this seems not to work.
I would use the following CSS:
.ui-datepicker-prev {
display:none;
}
.ui-datepicker-next {
display:none;
}
See also following: http://jsfiddle.net/neysor/5tX8q/3/
Try this:
$("#datepic").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
duration: 'fast',
stepMonths: 0
});
This will disable the user to select using next and previous buttons.
I have these following lines of code:
jQuery
$(".datepicker").datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
dateFormat: "MM d, yy",
changeMonth: true,
changeYear: true
});
Javascript
var element1 = document.createElement("input");
element1.type = "text";
element1.setAttribute("class", "datepicker");
Suppose to be the element I created in javascript must be a datepicker, so I set its class to "datepicker" which was defined in the jQuery code. But this thing doesn't work.
Any possible solutions? Setting classes which are defined in css works for me, but this.
What you're doing should work perfectly fine as long as the jQuery code runs after your element has been created and appended to the DOM.
$(document).append($('<input/>', {
'class': 'datepicker',
type: 'text'
})).on('click', function() {
$(this).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
dateFormat: "MM d, yy",
changeMonth: true,
changeYear: true
});
})
Why not use jQuery for this?
$('input').addClass('datepicker');
This code still sets the field to today's date
<script type="text/javascript">
$(document).ready(function () {
$('.date').datepicker({ dateFormat: "mm/dd/yy", changeMonth: true,
changeYear: true, yearRange: '1900:2020', defaultDate: ''
});
});
</script>
How do I universally configure the field to start as blank?
If the field is showing today's date it's because of how the input field is populated. The datepicker will start with whatever value the html element has, regardless of what that is:
Demo
If you cannot control the value of the input field through changing markup, but still needs the input field to be reset, you'll have to do this manually:
$(document).ready(function () {
$('.date').datepicker({ dateFormat: "mm/dd/yy", changeMonth: true,
changeYear: true, yearRange: '1900:2020'
}).val('');
});
$("#start-date-filter").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yyyy-mm-dd',
yearRange: '-2:+4'
}).val('');