I'm trying to set up a calendar with a specific marked day (fix day). For example 30-04-2015 in the calendar where will not possible select another month or day, only show that specify day.
Similar to the image:
http://i.stack.imgur.com/ILFbJ.png
I'm using jQueryIU to do it but I can not get it.
Here it's my code:
http://jsfiddle.net/andresgl/mr7aokod/3/
HTML
jQuery
(function($) {
$(document).ready(function(){
$( "#datepicker" ).datepicker(
{
beforeShowDay: $.datepicker.noWeekends,
hideIfNoPrevNext: false,
maxDate: "+1m",
minDate: "+1m",
}
);
});
})(jQuery);
(function($) {
$(document).ready(function(){
$( "#datepicker" ).datepicker( "setDate", "04/30/2014" );
});
})(jQuery);
The problem is if I not declare this parameters:
{
beforeShowDay: $.datepicker.noWeekends,
hideIfNoPrevNext: false,
maxDate: "+1m",
minDate: "+1m",
}
The setDate works, but the parameters doesn't work and If I declare the parameters, the setDate doesn't work.
$( "#datepicker" ).datepicker( "setDate", "04/30/2014" );
Can someone tell me what i'm doing wrong or where is the mistake and how can I fix it, please?
BTW: I was following the datepicker documentation: api.jqueryui.com/datepicker/#method-setDate
Thank you!
Not sure if this will suit your needs but you and can set min and max as dates as well. Something like:
$(function() {
$(document).ready(function(){
$( "#datepicker" ).datepicker(
{
beforeShowDay: $.datepicker.noWeekends,
defaultDate: new Date(2015, 04, 04),
maxDate: new Date(2015, 04, 04),
minDate: new Date(2015, 04, 04),
hideIfNoPrevNext: false
}
);
});
});
UPDATED Fiddle
Alternatively, you need to set the date before you limit the range:
$( "#datepicker" ).datepicker( "setDate", "04/05/2015" ).datepicker(
{
beforeShowDay: $.datepicker.noWeekends,
/*defaultDate: new Date(2015, 04, 04),*/
maxDate: new Date(2015, 05, 04),
minDate: new Date(2015, 05, 04),
hideIfNoPrevNext: false
}
);
UPDATED Fiddle 2
Related
Using jQuery DatePicker, I'd like to ensure that the departure date is at least 1 day after the arrival date. The closest I've managed to get to this is to ensure that the departure date is on the same day as the arrival date (I just couldn't figure out how to add 'selectedDate + 1 day' in the JS). I'd appreciate any help with this, thanks.
Here's my JS:
$(".datepicker_arrival").datepicker({
dateFormat: 'dd/mm/yy',
minDate: new Date(),
onSelect: function(dateText, inst) {
if($('.datepicker_departure').val() == '') {
var current_date = $.datepicker.parseDate('dd/mm/yy', dateText);
current_date.setDate(current_date.getDate()+1);
$('.datepicker_departure').datepicker('setDate', current_date);
}
},
onClose: function( selectedDate ) {
$( ".datepicker_departure" ).datepicker( "option", "minDate", selectedDate );
}
});
$(".datepicker_departure").datepicker({
dateFormat: 'dd/mm/yy',
minDate: new Date(),
onClose: function( selectedDate ) {
$( ".datepicker_arrival" ).datepicker( "option", "maxDate", selectedDate );
}
});
Here's my HTML:
<input type="text" name="arrival" class="datepicker datepicker_arrival textfield" placeholder="Arrival Date" />
<input type="text" name="departure" class="datepicker datepicker_departure textfield" placeholder="Departure Date" />
You can pass the datepicker object in the onClose method:
http://api.jqueryui.com/datepicker/#option-onClose
Consequently, this should work fine:
$(".datepicker_arrival").datepicker({
dateFormat: 'dd/mm/yy',
minDate: new Date(),
onSelect: function(dateText, inst) {
if($('.datepicker_departure').val() == '') {
var current_date = $.datepicker.parseDate('dd/mm/yy', dateText);
current_date.setDate(current_date.getDate()+1);
$('.datepicker_departure').datepicker('setDate', current_date);
}
},
onClose: function( selectedDate, test) {
var MyDateString = ('0' + (parseInt(test.selectedDay)+1)).slice(-2) + '/'
+ ('0' + (test.selectedMonth+1)).slice(-2) + '/'
+ test.selectedYear;
$( ".datepicker_departure" ).datepicker( "option", "minDate", MyDateString);
}
});
Fiddle:
http://jsfiddle.net/SpAm/9mSxk/1/
Credit for the padding idea comes from the accepted answer by user113716 in this thread:
Javascript add leading zeroes to date
I want to set the maxDate of jQuery UI to 18/02/2013 but upon trying, it only lets me update it to today's date.
How can I go about doing this?
$("#datepicker'.$row['id'].'").datepicker({
minDate: -0,
dateFormat: \'dd/mm/yy\',
maxDate: 18/02/2013
});
Try this:
$("#datepicker").datepicker({ minDate: -0, maxDate: new Date(2013, 1, 18) });
If you want use hard coded date, use the new Date(2013, 1, 18) pattern.
If you want to use generic pattern, use "+1D +1M +1Y".
Reference link: http://jsfiddle.net/pradkumar_n/wQe8c/
$( "#datepicker" ).datepicker( { minDate: 0, maxDate: 365 });
//365 Days
You can use number of days also.
this worked for me by setting the end date picker range from today to 7 more days.
$endDateCtrl.datepicker("option", "minDate", -0);
$endDateCtrl.datepicker("option", "maxDate", '+7D');
$endDateCtrl.datepicker();
I am setting max date using event functions:
$('#datepicker').datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-9:+1",// you can define range of year here.
dateFormat: 'MM yy',
onClose: function () {
var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(iYear, iMonth, 1));
},
beforeShow: function () {
var selDate = $(this).val();
if ((selDate.length) > 0) {
iYear = selDate.substring(selDate.length - 4, selDate.length);
iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5),
$(this).datepicker('option', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(lastYear, iMonth, 1));
$(this).datepicker('option', 'maxDate', new Date(lastYear, 12, 1));
$(this).datepicker('setDate', new Date(lastYear, iMonth, 1));
}
}
});
$(document).ready(function() {
$( "#dob" ).datepicker({
maxDate: -0,
changeMonth:true,
changeYear:true,
yearRange:"-100:+100",
dateFormat: "yy-mm-dd",
});
});
$('#altdate').datetimepicker({
timeFormat: 'hh:mm:ss',
dateFormat: 'yy-mm-dd',
altField: "#Event_datetime",
altFormat: "yy-mm-dd",
altTimeFormat: 'hh:mm:ss',
altFieldTimeOnly: false,
onClose: function( selectedDate ) {
//alert(selectedDate);
$( "#altenddate" ).datetimepicker( "option", "minDate", selectedDate );
if (selectedDate < ($.datepicker.formatDate('yy-mm-dd', new Date())) ) {
start_in_past = true;
}
}
});
$('#altenddate').datetimepicker({
timeFormat: 'hh:mm:ss',
dateFormat: 'yy-mm-dd',
altField: "#Event_enddatetime",
altFormat: "yy-mm-dd",
altTimeFormat: 'hh:mm:ss',
altFieldTimeOnly: false,
onClose: function( selectedDate ) {
//alert(selectedDate);
$( "#altdate" ).datetimepicker( "option", "maxDate", selectedDate );
}
});
The #Event_datetime field correctly gets filled with the value "2012-12-23 13:00:00" when I leave the datetimepicker field; however, when I close the enddate one, the line
$( "#altdate" ).datetimepicker( "option", "maxDate", selectedDate );
only sets "2012-12-23" on the field! using "maxDateTime" as option also does not work, getting maxDateTime.getFullYear is not a function.
How to set the maxDate(Time) with the full string as requested by the client:
yy-mm-dd hh:mm:ss
So the problem really is that setting the "maxDate" option, the actual hidden field #Event_datetime gets reset to without time - no idea why.
So I solved it by saving temporarily the #Event_datetime variable before calling to set maxDate and resetting it again...
var current = $('#Event_datetime').val();
$( "#altdate" ).datetimepicker( "option", "maxDate", selectedDate );
$('#Event_datetime').val(current);
I had the same problem as you, only without using an alt field. Your solution worked for me as well, though I had to code it slightly differently.
var current = $("#startDate").datetimepicker("getDate");
$("#startDate").datetimepicker( "option", "maxDate", selectedDate );
$("#startDate").datetimepicker( "setDate", current);
(I realize I could have posted this as a comment, but I needed to format the code sample.)
I have two datePickers in the same page and I wanna change the second datepicker's minDate depending the first one. Here is my code:
$("#datepickerDepart" ).datepicker({
dateFormat: "mm-dd-yy",
minDate: 0,
onSelect: function(dateText, inst) {
var m = dateText.substring(0,2);
var d = dateText.substring(3,5);
var y = dateText.substring(6,10);
console.log(d);
console.log(m);
console.log(y);
var newDate = new Date(y,m-1,d);
console.log(newDate);
$('#datepickerReturn').val("");
$('#datepickerReturn').datepicker({
dateFormat: "mm-dd-yy",
minDate: newDate
})
}
});
But I have a question, the first time I select a date in the first datePicker, the minDate of second one will be set according to this, but when I reselect the first one, the second datePicker's minDate won't change anymore, it will remain. I don't know why. Please help!!
I just wanna the minDate of the second one will change as long as the selected date of the first one change.
You are updating the second datepicker incorrectly. I am assuming you have already initialized the second one previously, although your code posted doesn't appear to. You need to use the option syntax when updating it, instead of the constructor.
http://jqueryui.com/demos/datepicker/#option-minDate
$('#datepickerReturn').val("");
$('#datepickerReturn').datepicker({'option','minDate', newDate});
Full code:
$('#datepickerReturn').datepicker({
dateFormat: "mm-dd-yy",
minDate: 0
});
$("#datepickerDepart" ).datepicker({
dateFormat: "mm-dd-yy",
minDate: 0,
onSelect: function(dateText, inst) {
var m = dateText.substring(0,2);
var d = dateText.substring(3,5);
var y = dateText.substring(6,10);
console.log(d);
console.log(m);
console.log(y);
var newDate = new Date(y,m-1,d);
console.log(newDate);
$('#datepickerReturn').val("");
$('#datepickerReturn').datepicker({'option','minDate', newDate});
}
});
$("#strStartDate").datepicker({
dateFormat: 'dd/mm/yy',
constrainInput: true,
firstDay: 1,
hideIfNoPrevNext: true,
onSelect: function(){
if ($("#strStartDate").val() > $("#strEndDate").val()){
$("#strEndDate").val($("#strStartDate").val());
}
}
});
$("#strEndDate").datepicker({
dateFormat: 'dd/mm/yy',
constrainInput: true,
firstDay: 1,
hideIfNoPrevNext: true,
beforeShow: function (input, inst) {
inst.settings.minDate = $("#strStartDate").val();
}
});
You can update secodn datepicker's mindate with following code :
$( "#ddate" ).datepicker({
showOn: "button",
buttonImage: base_path+"img/date_picker.png",
buttonImageOnly: true,
onSelect: function (selectedDate) {
$("#rdate").datepicker("option", "minDate", selectedDate);
},
minDate: 'today'
});
$( "#rdate" ).datepicker({
showOn: "button",
buttonImage: base_path+"img/date_picker.png",
buttonImageOnly: true,
minDate: 'today'
});
I am using jQuery ui date picker (date range) I want to restrict it to 6 months
var dates = $("#availability_date_from, #availability_date_to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
minDate:'0',
yearRange:'c-18:c',
onSelect: function( selectedDate ) {
var option = this.id == "availability_date_from" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
if(this.id == "availability_date_to"){
commonJSComplete(this.value,'availability_date_to');
$('#responsecontainer').load('profilemeter.php');
}
else if(this.id == "availability_date_from"){
commonJSComplete(this.value,'availability_date_from');
}
}
});
Try:
var dates = $("#availability_date_from, #availability_date_to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
minDate:'0',
maxDate: '+6m', //add this
.....
You can get month/day/year from the selected date, then change the value accordingly. I need to a condition that the user only need to select maximum of 6 months from the date picker. So when to_date is selected then I will set minimun from date to a value that is 6 months below the selected to_date. Try this and let me know :)
$( "#txtFromDate" ).datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
onSelect: function( selectedDate ) {
$( "#txtToDate" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#txtToDate" ).datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
onSelect: function( selectedDate , instance) {
var minDate = $.datepicker.parseDate(instance.settings.dateFormat, selectedDate, instance.settings)
minDate.setMonth(minDate.getMonth() - 6);
$( "#txtFromDate" ).datepicker( "option", "minDate", minDate );
}
});