I have declared a date picker:
define(["ui/nal.ui.core"], function () {
$.widget("nal.datePi", {
options: {
numberOfMonths: 2
},
_create: function () {
var $el = this.element;
$el.datepicker(this.options);
}
});
});
Which has 2 sons:
define(["ui/nal.ui.datePi","ui/nal.ui.textFieldDateDeparture"], function() {
$.widget( "lan.datePiDeparture", $.lan.datePi, {
});
});
define(["ui/nal.ui.datePi","ui/nal.ui.textFieldDateArrival"], function() {
$.widget( "lan.datePiArrival", $.lan.datePI, {
});
});
How can I set maxDate on Arrival to 1 year depending on Departure.
Would something simpler like this work: (just pseudocode)
var depDate = $(".divToDate").datepicker('getDate');
depDate.setDate(depDate.getYear() + 1);
(".arrivalDiv").datepicker({
maxdate: depDate;
basically you grab the date that is associated with your arrival date datepicker and add a year and set maxDate to that new value. You might have to getDate and then use the .addYear()
Related
I dont understand how it will work so the below code is there please help me.
$(document).ready(function () {
var todayDate = new Date();
$('.datepicker').datepicker({
format: 'mm-dd-yyyy',
autoclose:true,
endDate: '-1d'
}).on('changeDate', function (ev) {
$(this).datepicker('hide');
});
$('.datepicker').keyup(function () {
if (this.value.match(/[^0-9]/g)) {
this.value = this.value.replace(/[^0-9^-]/g, '');
}
});
});
Try this - https://jsfiddle.net/ud98ho7q/
I tried by enabling all the dates and attached change event to identify if date selected is in future then reset it to today.
$(document).ready(function () {
var todayDate = new Date();
$('.datepicker').datepicker({
format: 'mm-dd-yyyy',
autoclose:true,
}).on('changeDate', function (ev) {
if(ev.date.getTime() > todayDate.getTime() ){
$('.datepicker').datepicker("setDate", todayDate );
}
});
});
I have this code, to highlight entire week if i click on dates
$(function () {
var $weekPicker = $("#calendar");
$weekPicker.datepicker({
calendarWeeks: true,
maxViewMode: 0,
weekStart: 1
}).on('changeDate', function (e) {
if ($weekPicker.data('updating') === true) {
return;
}
$weekPicker.data('updating', true);
var monday = moment(e.date).isoWeekday(1).startOf('week');
var weekDates = [
monday.clone().add().toDate(),
monday.clone().add(1, "days").toDate(),
monday.clone().add(2, "days").toDate(),
monday.clone().add(3, "days").toDate(),
monday.clone().add(4, "days").toDate(),
monday.clone().add(5, "days").toDate(),
monday.clone().add(6, "days").toDate()
];
$(this).datepicker('clearDate').datepicker('setDates', weekDates);
$weekPicker.data('updating', false);
});
});
however, i would like to make it instead of "change" to auto detect current date and highlight the whole week. This is my latest code and it doesnt work
$(function () {
//i need this for.. reasons
var selectedDate = calendar.datepicker('setDate', new Date());
//this is for calculation
var selectedDate2 = calendar.datepicker('getUTCDate');
if (selectedDate2&&selectedDate) {
var dateList = getDateList(selectedDate2);
getDatePeriodList(selectedDate2);
displayDates(dateList);
$("#addp").css("display", "block");
$("#info").css("display", "none");
//include code above so will highlight whole current week
}
});
Please guide me on this. Thanks :)
Add changeDate event listener with $('.day.active').closest('tr').find('.day').addClass('active');.
<div id="sandbox-container">
<div id="datepicker"></div>
<input type="hidden" id="my_hidden_input">
</div>
$(function() {
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$('#datepicker').datepicker({
todayHighlight: true
});
$('#datepicker').datepicker('setDate', today);
activeWeek();
$('#datepicker').on('changeDate', function() {
$('#my_hidden_input').val($('#datepicker').datepicker('getFormattedDate'));
activeWeek();
});
function activeWeek() {
$('.day.active').closest('tr').find('.day').addClass('active');
}
})
example here
I have a question, quite similar to the one at: year/month only datepicker inline
The difference is that I am using the input version, rather than the div.
In the div case, the ui-datepicker-calendar is inside the outer div, and so can be accessed uniquely.
But with the input, there is no relation between the input and the ui-datepicker-calendar (or, not that I've found...)
Just to be clear, I cannot use the "global" .ui-datepicker-calendar { display: none;}, as I have other datepicker that is a full one (i.e., uses the days as well).
My code looks as follows:
$("#monthsYearInput").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "mm/yy",
onClose: function(dateText) {
if (dateText != "") {
var selectedDate = $.datepicker.parseDate("dd/mm/yy", "01/" + dateText);
$(this).datepicker("setDate", selectedDate);
$(this).datepicker("refresh");
}
},
beforeShow: function() {
var dateText = $(this).val();
var isPopulated = dateText.length > 0;
if (isPopulated) {
var selectedDate = $.datepicker.parseDate("dd/mm/yy", "01/" + dateText);
$(this).datepicker("option", "defaultDate", selectedDate);
$(this).datepicker("setDate", selectedDate);
$(this).datepicker("refresh");
}
},
onChangeMonthYear: function(year, month) {
if (changingDate) {
return;
}
changingDate = true;
$(this).datepicker("setDate", new Date(year, month - 1, 1));
$(this).datepicker("refresh");
changingDate = false;
}
});
$("#monthsYearInput").focus(function () {
$(".ui-datepicker-calendar").hide();
};
$("#monthsYearInput").blur(function () {
$(".ui-datepicker-calendar").hide();
};
It all looks OK as start, but then when the year/month has changed, the new date is populated in the input (desired), but now the calendar displays (not desired).
Any ideas on how to solve this issue?...
Thanks in advance.
JSfiddle: http://jsfiddle.net/OhadRaz/8z9M2/
I think that you could still do it with a css like in the solution that you've linked but targeting only that one datepicker
#monthsYearInput .ui-datepicker-calendar { display: none;}
Can you put your code on JSFiddle so we can see what it is doing? I may have done something familiar at Jquery Datepicket Supress Year, but can't tell without a JSFiddle demo...
OK,
I came up with some sort of a solution:
var superUpdateDatepicker = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function(inst) {
var ret = superUpdateDatepicker.apply(this, arguments);
if (inst.id == "monthsYearInput") {
$(".ui-datepicker-calendar").hide();
}
return ret;
}
While working, I am not happy with it.
It is too hacky, it is not clean, and I just don't like it.
Any better ideas?...
I wrote a simple function to set min/max dates for datepicker and format selected date.
But when I set the range the format returns to default mm/dd/yy
Please note that the page in HTML5.
and here the code
$(function () {
var pickerFormat = {
dateFormat: "dd/mm/yy"
};
var range = {
minDate: "-2y",
maxDate: new Date()
};
$("#datepicker1").datepicker(range, pickerFormat);
});
Use the same object for both date format and picker range.
for example
$(function () {
var pickerFormatrange = {
dateFormat:"dd/mm/yy",
minDate: "-2y",
maxDate: new Date()
};
$("#datepicker1").datepicker(pickerFormatrange);
});
I want the datepicker to select the currentdate/today and display it instead of'dd----yyyy'and moreover i wanted the date before today to be disabled from selection, please help!
$(document).ready(function () {
$("#button_id").click(function () {
$('<div/>', {
id: "div_id"
}).append($('<input>', {
type: "date",
name: "someDate",
class: "date_id"
})).appendTo("#static_div");
$(".date_id").datepicker({
//i want the datepicker to select the currentdate/today and display it instead of'dd----yyyy'and moreover i wanted the date before today to be disabled from selection
});
});
});
Here's the link to my fiddle:
http://jsfiddle.net/L4reds/73pEN/1/
$(document).ready(function () {
$("#button_id").click(function () {
var div = $('<div/>', {id: "div_id"}),
inp = $('<input>', {type: "text",name: "someDate",id: "date_id"});
div.append(inp).appendTo("#static_div");
inp.datepicker({
minDate: 0
}).datepicker('setDate', new Date());
});
});
FIDDLE
Use minDate and maxDate options to hide the previouse date see this
$(function() {
$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
});
Format option set using this option
To disable dates before the current day:
$("#date_id").datepicker({
minDate: 0
});
Read the documentation: http://api.jqueryui.com/datepicker/#option-minDate