Remember the date selected in datepicker even after refresh - php

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);

Related

How to pass id along with date in datepicker?

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();
}
});
});

FullCalendar display events on dayClick

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.

jQuery Ui beforeShowDay - Disable Certain Dates

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(',');

How to add more past years in jquery calender

I am using modified(following modified code taken from stackoverflow ) jquery calender but i want to add more past years and unable to select day.. in this calender please help how can i do this ?The modified script used in html file is this :-
<script>
$(document).ready(function() {
$(".datepicker").datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'dd MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
},
beforeShow : function(input, inst) {
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
}
});
});
</script>
Try this :
$(".datepicker").datepicker({
yearRange: '1700:2050',
the year range gives you more years

Date picker with disable dates JQuery UI issue

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

Categories