Below is the table structure and only these dates are available in datapicker and when user click on those available dates i need to take price with that.
Table structure
and here is my code.
var availableDates = ["5-8-2015","20-8-2015"];
function available(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, availableDates) != -1) {
return [true, "","Available"];
} else {
return [false,"","unAvailable"];
}
}
$(function() {
$('#datepicker').datepicker({
beforeShowDay: available,
onSelect: function(dateText){
alert("check");
}
});
I didn't find any solution by which i can take price with the selected date by user.
Please provide suggestion.
Thank you.
You can get the value this way.
$(function() {
$('#datepicker').datepicker({
onSelect: function(dateText){
$(this).next().val();
// $(this).next().text();
}
});
});
Related
The dayClick in fullCalendar is defined as:
dayClick: function (start, allDay, jsEvent, view) {
alert('You clicked me!');
}
This is triggered when the user clicks on a day.
I wanted to access data of events when a user clicks on a particular day. Sort of merging the eventClick function in dayClick so that when I click on a particular day, I get the event title, starttime, endtime of all events occurring that particular day.
I hope this help you
$('#calendar').fullCalendar({
dayClick: function(date, allDay, jsEvent, view) {
var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 0, 0, 0).getTime();
var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 23, 59, 59).getTime();
var cache = new Date().getTime();
$.getJSON("/json-events.php?start="+startDate+"&end="+endDate+"&_="+cache,
function(data) {
// do stuff with the JSOn data
}
}
});
You can try this:
eventClick: function(xEvent, jsEvent, view) {
alert("Title: " + xEvent.title //Get the event title
+ "\n StartTime: " + xEvent.start //Get the event start date
+ "\n EndTime: " + xEvent.end //Get the event end date
);
console.log(xEvent); //See your console for all event properties/objects
}
xEvent properties/object lists.
dayClick: function(date, allDay, jsEvent, view) {
var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 0, 0, 0).getTime();
var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 23, 59, 59).getTime();
var cache = new Date().getTime();
$.getJSON("/json-events.php?start="+startDate+"&end="+endDate+"&_="+cache,
function(data) {
// do stuff with the JSOn data
});
alert('ENTROU!');
},
now it works
it opens a alert, you just have to put the information wanted.
I think this is what you are looking for.
dayClick: function(date, allDay, jsEvent, view) {
var date2 = new Date(date.getFullYear(), date.getMonth(), date.getDate()+1);
//This gives the next day of the clicked day('date' contains the clicked day)
var todaysEvents = $('#calendar').fullCalendar('clientEvents', function(event) {
// Below statement returns the EVENT OBJECT of the clicked day after comparing the two dates
return event.start >= date && event.start < date2;
});
// You can now access the returned object & extract what you want
// console.log(todaysEvents); --> returns the complete object
// console.log(todaysEvents[0].title); --> returns that day's event title
},
I Hope this helped.
I am using an Ajax call to PHP to return a string of dates that a user is available, To make it dynamic.
I am returning the string back to my jQuery as :
['7-15-2013','7-16-2013','7-17-2013','7-18-2013','7-19-2013','7-20-2013','7-21-2013','7-22-2013']
However when I initialise the datePicker, That string of dates does not load.
I am not too sure as to why, I suspect its my success function after my Ajax call.
My jQuery code looks like this :
$('.vendor_id').change(function()
{
var vendor_id = $('option:selected', this).attr('title');
var url = "/admin/po/get_user_dates/" + vendor_id;
$.ajax({
type : "POST",
url : url,
success: function(unavaildates)
{
var disabledDays = unavaildates;
function disableAllTheseDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) {
return [false];
}
}
return [true];
}
$('.booking-date').datepicker(
{
beforeShowDay: disableAllTheseDays,
numberOfMonths: 2,
dateFormat: 'DD, d MM, yy',
showButtonPanel: true
}
)
}
})
})
Hope someone call help me on this.
Quick Update.. On assigning disabledDays to ['7-15-2013','7-16-2013','7-17-2013','7-18-2013','7-19-2013','7-20-2013','7-21-2013','7-22-2013'] the datePicker works...?
Thanks in advance.
Because you are retrieving a string and not an array from the server.
I would suggest to return the string without square brakets "'7-15-2013','7-16-2013','7-17-2013','7-18-2013','7-19-2013','7-20-2013','7-21-2013','7-22-2013'" from the server and create the array like this :
var unavaildates = "'7-15-2013','7-16-2013','7-17-2013','7-18-2013','7-19-2013','7-20-2013','7-21-2013','7-22-2013'"
var disabledDays = unavaildates.split(',');
I just want to know if how can my datepicker remembered what month has been selected. For example, I choose June 1, 2013 even after refresh the month to be displayed in date picker is still June.
Here is my code.
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('#weekpicker').datepicker('widget').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('#weekpicker').datepicker( {
changeYear:true,
changeMonth:true,
showButtonPanel:true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#weekpicker').val($.datepicker.formatDate( dateFormat, startDate, inst.settings )
+ ' - ' + $.datepicker.formatDate( dateFormat, endDate, inst.settings ));
selectCurrentWeek();
},
beforeShow: function() {
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
}).datepicker('widget').addClass('ui-weekpicker');
$('.ui-weekpicker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.ui-weekpicker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
You would need to deal with sessions.
Once the website is refreshed, just add the date into a PHP session.
You can read more about sessionsn here and a more concrete example for what you are looking for, here.
Well, you added a space to "" in the if statement. And I guess I have bad logic anyways - you should probably use "&&" instead of "||". So please use the following code exactly as is:
$('input[type=text][id*=myDate1]').datepicker({
showOn: "button",
buttonImage: "/Images/cal.gif",
buttonImageOnly: true,
onSelect: function (dateText, inst) { $('#HiddenField1').val(dateText) },
changeMonth: true,
changeYear: true,
showWeek: true,
firstDay: 1
});
var theDate;
if ($('#HiddenField1').val() != "" && $('#HiddenField1').val() != null) {
theDate = $('#HiddenField1').val();
}
else {
theDate = new Date();
}
alert(theDate);
$('input[type=text][id*=myDate1]').datepicker("option", "showAnim", 'bounce');
$('input[type=text][id*=myDate1]').datepicker("option", "dateFormat", 'dd/mm/yy');
$('input[type=text][id*=myDate1]').datepicker("option", "altFormat", 'dd/mm/yy');
$('input[type=text][id*=myDate1]').datepicker('setDate', theDate);
Ive got an problem. I have an button that sends an command to an perl script. For 60 seconds the page will just load and load. So i need an countdown to tell the user how much time until the perl script is finished. So i got his javascript from the web that automaticly counts down when the page loads. Is it possible to reverse this?
http://goo.gl/cYdKg
You see what happens, when you don't state your requirements correctly? Two people doing the same wrong thing (bad for us, we did not clarified before, tho).
$.fn.timedDisable = function(time, callback) {
if (time == null) {
time = 5000;
}
var seconds = Math.ceil(time / 1000);
return $(this).each(function() {
$(this).attr('disabled', 'disabled');
var disabledElem = $(this);
var originalText = this.innerHTML;
disabledElem.text( originalText + ' (' + seconds + ')');
var interval = setInterval(function() {
disabledElem.text( originalText + ' (' + --seconds + ')');
if (seconds === 0) {
disabledElem.removeAttr('disabled')
.text(originalText);
clearInterval(interval);
if (typeof callback !== 'undefined')
callback();
}
}, 1000);
});
};
$(function() {
$('#btnContinue').click(function() {
$(this).timedDisable(5000, function() {
window.alert('done');
});
});
});
I need to update the disabled dates of a UI Jquery datepicker when a different city is chosen from a combo box, so what iv done is onchange of the combo box run the following function which does an ajax call to a php script which hits the DB via sql and returns the dates based on the city whcih i dump into the unavalibledates variable and rerun the .datepicker
This only works the first time its run, after which is does not update, but does not error. how do I make it update.
function update_datepicker()
{
$.ajax({
type: "POST",
url: "scripts/deals.php?val=05&city="+document.getElementById('city_combo').value,
success: function (temp2)
{
var unavailableDates = [eval(temp2)];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false,"","Unavailable"];
}
}
$('#datepicker').datepicker({ beforeShowDay: unavailable });
}
});
}
do not create every time a new datepicker, just update your current
var unavailableDates;
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false,"","Unavailable"];
}
}
var dp = $('#datepicker').datepicker({ beforeShowDay: unavailable });
function update_datepicker()
{
$.ajax({
type: "POST",url: "scripts/deals.php?val=05&city="+$('#city_combo').val(),
success: function (temp2)
{unavailableDates = [eval(temp2)];}
});
}
just add,
$('#datepicker').datepicker( "destroy" );
Before you recreate it, hope this helps otehrs