Jquery Calendar disable dates using beforeShow and beforeShowDay - javascript

i have implemented code to disable dates using beforeShow and beforeShowDay callbacks
below code is for binding calendar to input
$("#start_on").datepicker({
onSelect: function(date) {
date_check(date);
}, minDate: 0, dateFormat: "yy-mm-dd",
beforeShow: get_booked,
beforeShowDay: disable_if_not_available
});
yes this is binding calendar to element
callback for beforeShow
function get_booked(inpput, inst) {
var D = new Date();
var month = (inst.selectedMonth == 0 ? D.getMonth() : inst.selectedMonth) + 1;
var year = (inst.selectedYear == 0 ? D.getYear() : inst.selectedYear);
dis_date = new Array();
$.ajax({
url: BASE_URL + "contest/get_booked",
data: {year: year, month: month, id:<?php echo (isset($contest_data->id)) ? $contest_data->id : 0; ?>},
dataType: "json", type: "POST",
success: function(data) {
for (var d in data) {
var D = data[d];
var start = D.start_on;
var d = start.split("-");
var sD = new Date(d[0], d[1] - 1, d[2]);
var end = D.end_on;
var d = end.split("-");
var eD = new Date(d[0], d[1] - 1, d[2]);
while (sD <= eD) {
dis_date.push(sD.getFullYear() + "-" + (sD.getMonth() + 1) + "-" + sD.getDate());
sD.setDate(sD.getDate() + 1);
}
}
}
});
}
callback for beforeShowDay
function disable_if_not_available(date) {
var y = date.getFullYear(), m = date.getMonth() + 1, d = date.getDate();
return [dis_date.indexOf(y + "-" + m + "-" + d) == -1];
}
problem with this is that disable_if_not_available is getting called before dis_date get filled from get_booked. currently disable_if_not_available return always true because dis_date is empty so what i want to do is to call/return disable_if_not_available only after i get response from get_booked
please ask if any doubt

This happens because the entire initialization of the datepicker ends before the ajax call returns any value.
what you could do is start the ajax call and when the call ends, call the initialization of the datepicker.
example:
...
...
$.ajax({
url: BASE_URL + "contest/get_booked",
data: {year: year, month: month, id:<?php echo (isset($contest_data->id)) ? $contest_data->id : 0; ?>},
dataType: "json",
type: "POST",
success: function(data) {
for (var d in data) {
var D = data[d];
var start = D.start_on;
var d = start.split("-");
var sD = new Date(d[0], d[1] - 1, d[2]);
var end = D.end_on;
var d = end.split("-");
var eD = new Date(d[0], d[1] - 1, d[2]);
while (sD <= eD) {
dis_date.push(sD.getFullYear() + "-" + (sD.getMonth() + 1) + "-" + sD.getDate());
sD.setDate(sD.getDate() + 1);
}
}
//CALL YOUR DatePicker Initialization
initDatePicker();
}
});
...
...
function initDatePicker(){
$("#start_on").datepicker({/*Initialization values*/});
}

Simple Solution for this.just use 'async:false' in your ajax call.
Example:
...
...
$.ajax({
url: BASE_URL + "contest/get_booked",
data: {year: year, month: month, id:id)) ? $contest_data->id : 0; ?>},
dataType: "json",
type: "POST",
async:false,
success: function(data) {
...
...

Related

Ajax call with setInterval does not fetch new data from database

I am working on a project where i need to display users details depending on date and time after given interval.I am using below code but it does not work as per my requirement.
$(document).ready(function () {
$.ajax({
type: "Post",
url: "<?php echo site_url('registrationc/map')?>",
// data: "unit_id="+unitid,
data: { startDate: startdate, endDate: enddate, status: status },
success: function (data) {
marker(data);
},
});
refresh();
});
function refresh() {
setInterval(function () {
$.ajax({
type: "Post",
url: "<?php echo site_url('registrationc/map')?>",
// data: "unit_id="+unitid,
data: { startDate: startdate, endDate: enddate, status: status },
success: function (data) {
alert("success 2");
alert(data);
marker(data);
},
});
}, 30000);
}
function marker_map(data){
var locations=JSON.parse(data);
alert(data);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(20.5937,78.9629),//{ lat: 20.5937, lng: 78.9629 }
mapTypeId: google.maps.MapTypeId.ROADMAP//HYBRID //SATELLITE//TERRAIN
});
var marker, i;
//var contentString ='<div id="iw-container"><div class="iw-title" align="center"></div>';
for (i = 0; i < locations.length; i++)
{
var url="http://maps.google.com/mapfiles/ms/icons/";
if(locations[i]['status']=="green")
{
url+="green"+"-dot.png";
}
else if(locations[i]['status']=="yellow")
{
url+="yellow"+"-dot.png";
}
else if(locations[i]['status']=="orange")
{
url+="orange"+"-dot.png";
}
else
{
url+="red"+"-dot.png";
}
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i]['lat'], locations[i]['longi']),
icon:{url:url},
map: map});
var land=locations[i][1];
var contentString = '<div id="content">'+
'<div class="iw-title">Patients Details</div>'+
'<h5 id="firstHeading" class="firstHeading">Patients Details</h5>'+
'<div id="bodyContent">'+
'<p>'+
'<p>Attribution: Uluru'+
'</p>'+
'</div>'+
'</div>';
google.maps.event.addListener(marker, 'click', (function(marker, i) {
var content = '<div id="iw-container">' +
'<div class="iw-title">'+locations[i]['firstname']+'</div>' +
'<div class="iw-content">' +
'<div class="iw-subTitle">STATUS:'+locations[i]['status']+'</div>' +
'<div class="iw-subTitle">PERSONAL DETAILS</div>'+
'<h6>Age:'+locations[i]['age']+'</h6>'+
'<h6>Gender:'+locations[i]['gender']+'</h6>'+
'</div>' +
'<div class="iw-bottom-gradient"></div>' +
'</div>';
var infowindow = new google.maps.InfoWindow({content:content});
return function() {
//infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
//marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png');
}
})(marker, i));
}
}
ajax function is called after given time interval but it does not fetch new data from database.for example if there are three entries in database during 1st call and than after given interval 2nd call also fetch only three entries even if there are five entries.how do i change the code to get expected result.
Issue seems with data that you pass to ajax call. Like start date and end date.
Please try below sample:
function getStats() {
var today = new Date();
var time = today.getHours() + ":" + today.getMinutes();
var time1 = " 00:00";
var status = "all";
var today = new Date();
var dd = String(today.getDate()).padStart(2, "0");
var mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0!
var yyyy = today.getFullYear();
var startdate = yyyy + "-" + mm + "-" + dd + "" + time1;
var enddate = yyyy + "-" + mm + "-" + dd + " " + time;
return { startdate, enddate, status };
}
$(document).ready(function () {
let { startdate, enddate, status } = getStats();
$.ajax({
type: "Post",
url: "<?php echo site_url('registrationc/map')?>",
data: { startDate: startdate, endDate: enddate, status: status },
success: function (data) {
marker(data);
},
});
refresh();
function refresh() {
setInterval(function () {
let { enddate } = getStats();
$.ajax({
type: "Post",
url: "<?php echo site_url('registrationc/map')?>",
data: { startDate: startdate, endDate: enddate, status: status },
success: function (data) {
marker(data);
},
});
}, 30000);
}
});

How to change the format of JQuery Date Picker to MM/DD/YYYY

Based on this link
This where I will go if i wanna change my date format
defaults: {
formatDate: function(date) {
var formatted = $.datePicker.utils.pad(date.getDate(), 2) + '/' + $.datePicker.utils.pad(date.getMonth() + 1, 2) + '/' + date.getFullYear();
return formatted;
},
parseDate: function(string) {
var date = new Date();
var parts = string.match(/(\d{1,2})\/(\d{1,2})\/(\d{4})/);
if ( parts && parts.length == 4 ) {
date = new Date( parts[3], parts[2] - 1, parts[1] );
}
return date;
},
selectDate: function(date) {
return true;
},
limitCenturies: true,
closeOnPick: true,
appendTo: null
},
How can I make this to MM/DD/YYYY? I tried everything I change it but when Im selecting dates the value goes on different dates
Here is the error
According to the documentation, this should work:
defaults: {
formatDate: function(date) {
//var formatted = $.datePicker.utils.pad(date.getDate(), 2) + '/' + $.datePicker.utils.pad(date.getMonth() + 1, 2) + '/' + date.getFullYear();
var formatted = $.datePicker.utils.pad(date.getMonth() + 1, 2) + '/' + $.datePicker.utils.pad(date.getDate(), 2) + '/' + date.getFullYear();
return formatted;
},
parseDate: function(string) {
var date = new Date();
if ( string ) {
formatted_date = string.split('/');
date = new Date( formatted_date[2], formatted_date[0] - 1, formatted_date[1] );
}
return date;
},
selectDate: function(date) {
return true;
},
limitCenturies: true,
closeOnPick: true,
appendTo: null
}
See it in action: Demo.
Try this out
var date = new Date('2014-01-06');
var newDate = date.toString('dd-MM-yy');

json response date format to user defined date format

Following code is returning $("#dob") and $("#anniversery") date as 2014-04-01T00:00:00
My code
<script>
$(function() {
function log(message) {
$("<div>").text(message).prependTo("#log");
$("#log").scrollTop(0);
}
$("#customerName").autocomplete({
source: function(request, response) {
$.ajax({
url: "ajaxCustomer",
dataType: "json",
data: {
str: $("#customerName").val(),
maxRows: 12
},
success: function(data) {
response($.map(data.customerList, function(item) {
console.log(item);
return {
label: item.customerName,
value: item.customerName,
id: item.customerId,
address: item.address,
dob: item.dob,
mobno: item.mobno,
annversery: item.anniversery
}
}));
},
error: function(data) {
alert(data.supplierList);
console.log(typeof data);
console.log(data);
alert('error');
}
});
},
minLength: 1,
select: function(event, ui) {
$("#customerId").val(ui.item.id);
$("#mobNo").val(ui.item.mobno);
$("#address").val(ui.item.address);
$("#dob").val(ui.item.dob);
$("#anniversery").val(ui.item.annversery);
},
open: function() {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function() {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
});
</script>
I want $("#dob") and $("#anniversery") its value in yyyy/mm/dd format
How to do this
I tried $("#dob").val(format_date(ui.item.dob));
function format_date(dt) {
var dd = dt.getDate();
var mm = dt.getMonth() + 1; //January is 0!
var yyyy = dt.getFullYear();
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
dt = mm + '/' + dd + '/' + yyyy;
document.write(dt);
document.write(year + '/' + month + '/' + day);
}
This is not working.
You have to cast the value you get from ui.item.dob to a Date.
var datefield = new Date(ui.item.dob);
$("#dob").val(format_date(datefield));
Then in your format_date function, remove the extra line at the bottom and put a return statement instead:
function format_date(dt) {
var dd = dt.getDate();
var mm = dt.getMonth() + 1; //January is 0!
var yyyy = dt.getFullYear();
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
dt = mm + '/' + dd + '/' + yyyy;
return dt;
}
You could use MomentJS
Apply format :
$("#anniversery").text(moment(ui.item.annversery).format('YYYY/MM/DD'));
var date = "2014-04-01T00:00:00";
var newDate = date.split("T")[0].replace(/-/g, "/");
console.log(newDate);
=> 2014/04/01
As already #display_name pointed you missed to parse the Date. Here a more simplified version of your code:
function format_date(dt) {
var dateString = new Date(dt); //parse the date
var formatedDate = dateString.getFullYear() + "/" +
('0'+ (dateString.getMonth() +1)).slice(-2) + "/" +
('0'+ dateString.getDate()).slice(-2);
return formatedDate; //return the formatted date to the input field
}
Now you can
$("#dob").val(format_date(ui.item.dob)); // incase if it is a textbox
try this..
var thisDate = "2013-01-01 00:00:00";
var thisDateT = thisDate.substr(0, 10);
You should create new Date object before using get functions:
var date = new Date(dt);
And then you can get the proper values:
var dd = date.getDate();
and so on.

jquery datepicker beforeShowDay works for wrong month?

I'm using jquery's datepicker to select dates and I want to highlight some dates - but I'm experiencing a strange problem with beforeShowDay.
When the page loads it seems that the json data is loaded, but when I click into the input box and datepicker appears, nothing is highlighted. After I click on forward month or backward, data from a previous month is loaded (e.g. click in input -> datepicker appears -> no highlights -> click on next month -> data from prev month appears highlighted)...
I've googled a long time now, checked if data is loaded before everything, but somehow this behaviour is not changing. Both datepicker experience the same problem.
(jquery-ui datepicker 1.10.1, jquery 1.9.1)
I'm glad about every hint!
var resDates;
var done = false;
function markDate(date) {
var ret = [true, 'free'];
if (!done) {
$.ajax({
dataType: "json",
url: "modules/OutShop/getReservations.php",
data: {item_id: $("#item-id").val()},
async: false,
success: function (dates) {
resDates = dates;
done = true;
}
});
}
$.each(resDates, function(key, value) {
var d = (date.getFullYear() + "-" + ("0" + date.getMonth()).slice(-2) + "-" + ("0" + date.getDate()).slice(-2));
if (d == value["day"]) {
//$("body").append("d: " + d + ", v: " + value["day"] + ", s: " + value["status"] + " ");
//$("body").append("s: " + value["status"] + " ");
if (value["status"] == "1")
ret = [false, 'marked'];
else if (value["status"] == "2")
ret = [false, 'reserved'];
else
ret = [true, 'free'];
}
});
return ret;
}
$(document).ready(function() {
if (!done) {
$.ajax({
dataType: "json",
url: "modules/OutShop/getReservations.php",
data: {item_id: $("#item-id").val()},
async: false,
success: function (dates) {
resDates = dates;
//done = true;
}
});
}
$("#item-datepicker-min").datepicker({
showButtonPanel: true,
defaultDate: +3,
minDate: +3,
beforeShowDay: markDate,
onSelect: function(selectedDate) {
$("#item-datepicker-max").datepicker("option", "minDate", selectedDate);
}
});
$("#item-datepicker-max").datepicker({
showButtonPanel: true,
minDate: +3,
defaultDate: +6,
beforeShowDay: markDate,
onSelect: function(selectedDate) {
$("#item-datepicker-min").datepicker("option", "maxDate", selectedDate);
}
});
});
EDIT
For further information: This is an example json object I got from the ajax response.
[{"status":3,"day":"2013-04-10"},{"status":3,"day":"2013-04-11"},{"status":3,"day":"2013-04-12"},{"status":3,"day":"2013-04-13"},{"status":2,"day":"2013-04-10"},{"status":2,"day":"2013-04-11"},{"status":2,"day":"2013-04-12"},{"status":2,"day":"2013-04-13"}]
Looks like your months are offset by 1, the javascript method date.getMonth() returns the months zero-based (eg. January is 0, Feb is 1) and your PHP script returns the date in normal format (Jan is 1, Feb is 2)
Check this
So if you change
var d = (date.getFullYear() + "-" + ("0" + date.getMonth()).slice(-2) + "-" + ("0" + date.getDate()).slice(-2));
to
var d = (date.getFullYear() + "-" + ("0" + date.getMonth()+1).slice(-2) + "-" + ("0" + date.getDate()).slice(-2));
you should get the right month showing

Unexpected Identifier Syntax Error in Javascript

I get an Unxepected Identifier editor with the following code. I've been troubleshooting it all day, and nothing. Hoping a fresh pair of eyes can spot my error. I'm trying to use jQuery UI to set up a date-picker and then get and manipulate the date. Changing the date on the picker should change an image on the page associated with that date via ajax.
$(document).ready(function(){
// Datepicker
$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd',
inline: true,
minDate: new Date(2012, 06 - 1, 1),
maxDate:new Date(2012, 09 - 1, 31),
onSelect: function(){
var day1 = ($("#datepicker").datepicker('getDate').getDate()).toString().replace(/(^.$)/,"0$1");
var month1 = ($("#datepicker").datepicker('getDate').getMonth() + 1).toString().replace(/(^.$)/,"0$1");
var year1 = $("#datepicker").datepicker('getDate').getFullYear();
var fullDate = year1 + "/" + month1 + "/" + day1;
var dashDate = year1 + "-" + month1 + "-" + day1;
var str_output = "<a id=\"single_image\" href=\"http://www.lasalle.edu/150/dayinhistory/" + fullDate + ".jpg\" title=\"\"><img src=\"http://www.lasalle.edu/scripts/timthumb/timthumb.php?src=http://www.lasalle.edu/150/dayinhistory/" + fullDate + ".jpg&w=560&h=350&zc=1&a=t\">";
$('#this-day-photo-archive').html(str_output);
var data = 'day=' + dashDate;
$.ajax({
url: 'http://www.lasalle.edu/150/content/day_grab.php',
type: "GET",
data: data,
cache: false,
success: function(html) {
$('#this-day-info').html(html);
console.log (html);
$(".left").click(function() {
$('#datepicker').datepicker( "setDate" , -1d );
});
$(".right").click(function() {
$('#datepicker').datepicker( "setDate" , +1d );
});
}
});
}
});
});
You should replace
$('#datepicker').datepicker( "setDate" , -1d );
with
$('#datepicker').datepicker( "setDate" , "-1d" );
(and the same for +1d)
A link to some examples for confirmation

Categories