I have using the following code i dont know how to highlight the selected dates, and how to add css for selected dates
Here my code.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#from" ).datepicker({
dateFormat: 'dd/mm/yy',
numberOfMonths: 2,
autoclose: true,
minDate:0,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
$( "#to" ).datepicker( "show" );
}
});
$( "#to" ).datepicker({
dateFormat: 'dd/mm/yy',
numberOfMonths: 2,
minDate:0,
autoclose: true,
});
});
</script>
</head>
<body>
<label for="from">From</label>
<input type="text" id="from" name="from" value="19/04/2016">
<label for="to">to</label>
<input type="text" id="to" name="to" value="29/04/2016">
I need the highlight like the below image
Please help me how to highlight.
Thanks
Yes i have fixed the issue now its working.
beforeShowDay: function(date){
var startDate = $('#reportFrom').val();
var endDate = $('#reportTo').val();
startDate = startDate.split('/');
endDate = endDate.split('/');
startDate = new Date(startDate[2], (startDate[1]-1), startDate[0]);
endDate = new Date(endDate[2], (endDate[1]-1), endDate[0]);
if ($.trim(startDate) != '' && $.trim(endDate) !='') {
if(($.trim(startDate) == $.trim(date)) && ($.trim(endDate) == $.trim(date))) {
return [true, 'dp-highlight dp-end-highlight dp-start-highlight'];
}
if($.trim(startDate) == $.trim(date)) {
return [true, 'dp-highlight dp-start-highlight'];
}
if(date < endDate && date > startDate ) {
return [true, 'dp-highlight'];
}
if($.trim(endDate) == $.trim(date)) {
return [true, 'dp-highlight dp-end-highlight'];
}
return [true, ''];
}
}
Related
I have jQuery UI datepicker integrated with KnockoutJS.
<input class="input-small hasDatepicker" data-bind="datepicker: ItemCurrentDate, datepickerOptions: { dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, minDate: ItemStartDate(), maxDate: ItemEndDate(), datePickerPlaceholder: 'dd/mm/yy' } name="ItemCurrentDate" type="text" value="" placeholder="dd/mm/yy" id="dp12345">
I had to add minDate and maxDate restrictions.
After I added minDate restriction, it set current value(ItemCurrentDate) to maxDate value, even if ItemCurrentDate >= ItemStartDate.
I need ItemStartDate to remain the same when I just open dp.
not totally following the question, but will this work? here is a fiddle. http://jsfiddle.net/LkqTU/33447/ I wasn't sure from your question if min and max dates are observables that can change. I assumed they were static but if not you may need to change the update portion of the custom binding, probably destroy the datepicker and recreate it with the new min and max dates.
you may run the solution below or you may use the fiddle referenced above
ko.bindingHandlers.datepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
var options = allBindingsAccessor().datePickeroptions || {};
options.onSelect = function(selected, evnt) {
var observable = valueAccessor();
observable(selected);
};
$(element).datepicker(options);
// setting initial value
$(element).datepicker("setDate", valueAccessor()());
//handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).datepicker("destroy");
});
},
//update the control when the view model changes
update: function(element, valueAccessor, allBindingsAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
$(element).datepicker("setDate", valueAccessor()());
}
};
function model() {
var self = this;
this.itemCurrentDate = ko.observable(new Date(2017, 1, 26));
this.itemStartDate = ko.observable(new Date(2017, 1, 1));
this.itemEndDate = ko.observable(new Date(2017, 2, 22));
this.resetDate = function() {
self.itemCurrentDate(new Date(2017, 1, 26));
}
}
var mymodel = new model();
$(document).ready(function() {
ko.applyBindings(mymodel);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input data-bind="datepicker: itemCurrentDate,
datePickeroptions: {
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
minDate: itemStartDate(),
maxDate: itemEndDate(),
datePickerPlaceholder: 'dd/mm/yy'
}
" />
<p>
theDate: <span data-bind="text: itemCurrentDate"></span>
</p>
<p>
<input type="button" data-bind="click: resetDate" value="reset date" </p>
</p>
I have two date-pickers #from and #to, as usual, now what I need to do is make sure that the date range selected between the two is always within 3months of each other. So basically, on selecting one of the pickers, I need to set minDate/maxDate option for the other one relative to the selected date, But I don't know what would be the best way to find these relative dates. Any suggestions?
Alternatively you could do it like this:fiddle
Both ways are valid, i suppose.
.js
$("#startDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText,dateObj){
var dateObject = $(this).datepicker("getDate");
dateObject.setMonth(dateObj.currentMonth+3);
$("#endDatePicker").datepicker( "option", "maxDate",dateObject);
}
});
$("#endDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
onSelect: function(dateText,dateObj){
var dateObject = $(this).datepicker("getDate");
dateObject.setMonth(dateObj.currentMonth-3);
$("#startDatePicker").datepicker( "option", "minDate",dateObject);
}
});
I have created a jsfiddle.The range between the days is set to 3 days.you can edit based on ur requirement
$(document).ready(function () {
$("#startDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function (date) {
if ($('#endDatePicker').val() == "") {
var selectedDate = new Date(date);
var secsPerDay = 86400000;
var endDate = new Date(selectedDate.getTime() + 2 * secsPerDay);
alert(endDate);
$("#endDatePicker").datepicker("option", "minDate", selectedDate);
$("#endDatePicker").datepicker("option", "maxDate", endDate);
}
}
});
$("#endDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
onSelect: function (date) {
if ($('#startDatePicker').val() == "") {
var selectedDate = new Date(date);
var secsPerDay = 86400000;
var startDate = new Date(selectedDate.getTime() - 5 * secsPerDay);
$("#startDatePicker").datepicker("option", "minDate", startDate);
$("#startDatePicker").datepicker("option", "maxDate", selectedDate);
}
}
});
});
and HTML
<p>Start Date:
<input type="text" id="startDatePicker"/>
</p>
<p>End Date:
<input type="text" id="endDatePicker"/>
</p>
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
So i am trying to restrict the user from selecting the check-out date
to be the same as the check-in date using jQuery UI Date range picker
(http://jqueryui.com/datepicker/#date-range). I have it where they are
not able to select before the check-in date but as of right now the
check-in date and check-out date can be the same files.
This is the jquery
$(function() {
$( "#check-in" ).datepicker({
minDate: 0,
dateFormat: "yy-mm-dd",
changeMonth: true,
numberOfMonths: 2,
changeYear: true,
onClose: function( selectedDate, inst ) {
$( "#check-out" ).datepicker( "option", "minDate", selectedDate);
}
});
$( "#check-out" ).datepicker({
minDate: "+1D",
dateFormat: "yy-mm-dd",
changeMonth: true,
numberOfMonths: 2,
changeYear: true,
onClose: function( selectedDate, inst ) {
$( "#check-in" ).datepicker( "option", "maxDate", selectedDate +"+1D");
}
});
});
This is the HTML
<div class="formInput">
<label for="check-in">Check-in:</label>
<input type="text" id="check-in" name="check-in" value="yyyy/mm/dd" size="30" class="textInput">
</div>
<div class="formInput">
<label for="check-out">Check-out:</label>
<input type="text" id="check-out" name="check-out" value="yyyy/mm/dd" size="30" class="textInput">
</div>
What I want is the check out date to default to 1 day after the check in date every time the check-in date is selected. Thank you in advance
You can't add days using this code
$( "#check-in" ).datepicker( "option", "maxDate", selectedDate +"+1D")
Try this instead:
onClose: function( selectedDate, inst ) {
var maxDate = new Date(Date.parse(selectedDate));
maxDate.setDate(maxDate.getDate() - 1);
$( "#check-in" ).datepicker( "option", "maxDate", maxDate);
}
Here's the fiddle: http://jsfiddle.net/RxTax/1/
change minDate.setDate(maxDate.getDate() + 1);
to minDate.setDate(minDate.getDate() + 1);
the fact is that is just working with dateFormat: "yy-mm-dd" and not with other dateFormat as regional fr or alike.
I have written a work-around for other dateFormats using alternate fields. I tested on IE chrome and Firefox and works quite good.
function resetFrom() {
var altcheck-in = document.getElementById("altcheck-in");
var check-in= document.getElementById("check-in");
altcheck-in.value = "";
if (altcheck-in.value == "") {
check-in.value = "";
$("#check-out").datepicker("destroy");
$("#check-out").datepicker({
minDate: "+1D",
dateFormat: "yy-mm-dd",
altFormat: "dd-mm-yy",
altField: "#altcheck-out",
changeMonth: true,
numberOfMonths: 1,
changeYear: true,
showOn: "button",
buttonImage: "/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date",
onClose: function (selectedDate) {
if (selectedDate != "") {
var maxDate = new Date(Date.parse(selectedDate));
maxDate.setDate(maxDate.getDate() - 1);
$("#check-in").datepicker("option", "maxDate", maxDate);
}
}
});
}
}
function resetTo() {
var altcheck-out = document.getElementById("altcheck-out");
var check-out = document.getElementById("check-out");
altTo.value = "";
if (altcheck-out.value == "") {
to.value = "";
$("#check-in").datepicker("destroy");
$("#check-in").datepicker({
dateFormat: "yy-mm-dd",
altFormat: "dd-mm-yy",
altField: "#altcheck-in",
minDate: 0,
changeMonth: true,
numberOfMonths: 1,
changeYear: true,
showOn: "button",
buttonImage: "/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date",
onClose: function (selectedDate) {
if (selectedDate != "") {
var minDate = new Date(Date.parse(selectedDate));
minDate.setDate(minDate.getDate() + 1);
$("#check-out").datepicker("option", "minDate", minDate);
}
}
});
}
}
$(function () {
$("#check-in").datepicker({
dateFormat: "yy-mm-dd",
altFormat: "dd-mm-yy",
altField: "#altcheck-in",
minDate: 0,
changeMonth: true,
numberOfMonths: 1,
changeYear: true,
showOn: "button",
buttonImage: "/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date",
onClose: function (selectedDate) {
if (selectedDate != "") {
var minDate = new Date(Date.parse(selectedDate));
minDate.setDate(minDate.getDate() + 1);
$("#check-out").datepicker("option", "minDate", minDate);
}
}
});
$("#check-out").datepicker({
minDate: "+1D",
dateFormat: "yy-mm-dd",
altFormat: "dd-mm-yy",
altField: "#altcheck-out",
changeMonth: true,
numberOfMonths: 1,
changeYear: true,
showOn: "button",
buttonImage: "/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date",
onClose: function (selectedDate) {
if (selectedDate != "") {
var maxDate = new Date(Date.parse(selectedDate));
maxDate.setDate(maxDate.getDate() - 1);
$("#check-in").datepicker("option", "maxDate", maxDate);
}
}
});
});
<input name="altcheck-in" type="text" id="altcheck-in" onchange="resetFrom();" style="width:250px;" />
<input name="check-in" type="text" id="check-in" style="display: none" />
<input name="altcheck-out" type="text" id="altcheck-out" onchange="resetTo();" style="width:250px;" />
<input name="check-out" type="text" id="check-out" style="display: none" />
JQuery UI date picker end date 1 day after start date
http://jsfiddle.net/wskhcgdq/1/
You can't add days using this code
$( "#check-in" ).datepicker( "option", "maxDate", selectedDate +"+1D")
Try this instead:
$(function() {
$( "#check-in" ).datepicker({
minDate: 0,
dateFormat: "yy-mm-dd",
changeMonth: true,
numberOfMonths: 2,
changeYear: true,
onClose: function( selectedDate, inst ) {
var minDate = new Date(Date.parse(selectedDate));
minDate.setDate(maxDate.getDate() + 1);
$( "#check-out" ).datepicker( "option", "minDate", minDate);
}
});
$( "#check-out" ).datepicker({
minDate: "+1D",
dateFormat: "yy-mm-dd",
changeMonth: true,
numberOfMonths: 2,
changeYear: true,
onClose: function( selectedDate, inst ) {
var maxDate = new Date(Date.parse(selectedDate));
maxDate.setDate(maxDate.getDate() - 1);
$( "#check-in" ).datepicker( "option", "maxDate", maxDate);
}
});
});
HTML
<label for="checkIn">Check in</label>
<input type="text" readonly="readonly" name="checkIn" id="checkIn" />
<label for="checkOut">Check out</label>
<input type="text" readonly="readonly" name="checkOut" id="checkOut" />
javaScript
var dates = $( "#checkIn, #checkOut" ).datepicker({
autoSize: true,
minDate: "+0",
maxDate: "+6M",
onSelect: function( selectedDate ) {
var option = this.id == "checkIn" ? "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 );
}
});
now what I want that, whenever a user set any date for checkIn, checkOut should be next to that selected date along with all other options.
see the fiddle for the same
I tried a lot but not succeed. Please help me what logic to apply?
Try to separate the fields and initiate datepicker separately, and then, try this:
$('#date1').datepicker({
constrainInput: true,
dateFormat: 'D, dd M yy',
// Once change, set date2 min date
onSelect: function (dateText, inst) {
$('#date2').datepicker("option", "minDate", dateText);
}
});
$('#date2').datepicker({
constrainInput: true,
minDate: 0,
dateFormat: 'D, dd M yy'
});
Hope this help :)
shennyL answer didn't account for selected date + n.
So:
On your #checkIn place:
minDate: 0, //sets the minDate offset to 0, meaning today.
onSelect: function() {
var date = $(this).datepicker('getDate');
if (date) {
date.setDate(date.getDate() + 1);
$("#checkOut").datepicker("option", "minDate", date)
}
}
This works quite ok as far as I can tell. You may just need to clean up some code on your fiddle perhaps ?