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.
Related
Working on clone using datepicker. I have searched in stackoverflow for my issue i am not getting the correct stuff. When the user clicks the date from the original date it was working as expected But once the user click the addmore button in the cloned div the datepicker was not working. I tried giving .destroy the result was not coming as expected.It might be the duplicate question but as I said the solution not working in my case.
Here is the jquery code.
var currentDate = new Date();
$(".cloned-row1").find(".deg_date").removeClass('hasDatepicker').datepicker({
dateFormat: "mm-dd-yy",
changeMonth: true,
yearRange: "-100:+0",
changeYear: true,
maxDate: new Date(),
showButtonPanel: false,
beforeShow: function () {
setTimeout(function (){
$('.ui-datepicker').css('z-index', 99999999999999);
}, 0);
}
});
$(".deg_date").datepicker("setDate", currentDate);
var count=0;
$(document).on("click", ".edu_add_button", function () {
alert("checj");
var $clone = $('.cloned-row1:eq(0)').clone(true,true);
//alert("Clone number" + clone);
$clone.find('[id]').each(function(){this.id+='someotherpart'});
$clone.find('.btn_more').after("<input type='button' class='btn_less1' id='buttonless'/>")
$clone.attr('id', "added"+(++count));
$clone.find(".school_Name").attr('disabled', true).val('');
$clone.find(".degree_Description").attr('disabled', true).val('');
$clone.find("input.deg_date").datepicker();
$(this).parents('.educat_info').after($clone);
});
$(document).on('click', ".btn_less1", function (){
var len = $('.cloned-row1').length;
if(len>1){
$(this).closest(".btn_less1").parent().parent().parent().remove();
}
});
Here is the fiddlelink
Thanks in advance
Jquery datepicker creates UUID-based ID attributes for the input fields it binds when you initialize it. You cloning those elements results in more elements with either the same ID (which jQuery does not like) or a different ID if your clone routine manages that (which means datepicker does not know about the clones).
try updating your js code like this
$clone.find("input.deg_date")
.removeClass('hasDatepicker')
.removeData('datepicker')
.unbind()
.datepicker({
dateFormat: "mm-dd-yy",
changeMonth: true,
yearRange: "-100:+0",
changeYear: true,
maxDate: new Date(),
showButtonPanel: false,
beforeShow: function() {
setTimeout(function() {
$('.ui-datepicker').css('z-index', 99999999999999);
}, 0);
}
});
here's the updated JSFIDDLE. hope this helps.
You can re-initiate datepicker,
Put datepicker line at last on click event
$(document).on("click", ".edu_add_button", function () {
...
...
...
...
$(".deg_date").datepicker("setDate", currentDate);
});
It will work!!!
I am using 2 datepickers in which return should not be less than
departure.
On selecting of the datepicker, it is executing onSelect
event functionality(pls check the datepicker script). But i want to make this while initial load
without on select. Because issue is return datepicker is showing
before date since i not select departure datepicker.This issue will happening when it is posted to another page, with same datepickers.
eg: In first page i have selected 22-12-2014 and return 30-12-2014 ,
if i post these values to another page having same datepickers for
return i can able to select before 22-12-2014.
$("#departure").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
minDate: '+1d',
numberOfMonths: 2,
showButtonPanel: true,
onSelect: function (selectedDate) {
var minDate = $(this).datepicker('getDate');
if (minDate) {
minDate.setDate(minDate.getDate());
}
$("#return").datepicker("option", {minDate: minDate}, selectedDate);
}
});
$("#return").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
minDate: '+1d',
numberOfMonths: 2,
showButtonPanel: true,
onSelect: function (selectedDate) { //alert($('#startPicker').val());
var minDate = $(this).datepicker('getDate');
if (minDate) {
minDate.setDate(minDate.getDate());
}
$("#departure").datepicker("option", {maxDate: minDate}, selectedDate);
}
});
You will need to add the minDate again on the new page.
You could add something like:
<?php if ($_SERVER['REQUEST_METHOD'] == "POST") { ?>
$( document ).ready(function() {
$("#return").datepicker("option", {minDate: <?=$_POST['departureDate']; ?>}, selectedDate);
});
<?php } ?>
Not tested but you get the idea.
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
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()
});
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('');