Develop Reference

FlatPickr - Get the Sundays between a date range for a calendar (inclusive)

I'm using flatPickr (a calendar plugin) to accomplish this. I'm sending the minDate and maxDate, which are both always Sundays, to the JavaScript from a PHP function:
$("#weeklySelector").flatpickr(
{
inline: true,
enableTime: false,
dateFormat: "Y-m-d",
minDate: "<?php echo getSecondSunday($oldestDay[0], $newestDay[0]); ?>",
maxDate: "<?php echo getLastSunday($newestDay[0], getSecondSunday($oldestDay[0], $newestDay[0])); ?>",
defaultDate: "<?php echo getLastSunday($newestDay[0], getSecondSunday($oldestDay[0], $newestDay[0])); ?>",
enable: [
function(date) {
// Enable only the Sundays between the minDate and maxDate
// Include the minDate & maxDate because they both always will be Sundays
}
],
onChange: function(selectedDates, dateStr, instance) {
weeklyDate = dateStr;
},
});
In pseudo-code, the logic looks something like this:
// minDate = "2020-04-05";
// maxDate = "2020-04-26";
enable: [
function(date) {
minDate, while(minDate+7 <= maxDate);
// Output: "2020-04-05", "2020-04-12", "2020-04-19", "2020-04-26"
}
],
Link to docs: https://flatpickr.js.org/examples/#disabling-all-dates-except-select-few

You need to use the .getDay() method of the date, which returns the day of the week (0 is sunday).
enable:[
function(date) {
return date.getDay() === 0; // 0 is sunday
}
]

How to format yy-mm-dd datepicker post to php?

I have javascript jquery-ui datepicker library based function for selecting from_date - to_date range and post to php. Format is posted to php as:
Wed May 13 2015 00:00:00 GMT+0200 (Central European Summer Time)
How can I set format for example 2015-05-20 for datepicker post to php in my function?
function updateResults() {
$.getJSON('results.php', {
from_date: fromDate.datepicker('getDate').toString(),
to_date: toDate.datepicker('getDate').toString()
}, function(data,status, xhr) {
$.plot('#flotcontainer', data, options);
});
}
//create a couple of date textboxes
$.datepicker.setDefaults
({
dateFormat: 'dd/mm/yy', defaultDate: '-1w', changeMonth: true, changeYear: true,
maxDate: 0, showButtonPanel: true, showWeek: true
});
var fromDate = $('#from').datepicker
({
onSelect: function()
{
var option = this.id == 'from' ? 'minDate': 'maxDate';
toDate.not(this).datepicker('option', option, $(this).datepicker('getDate'));
updateResults(); // When a new date is selected update the results
}
});
var toDate = $('#to').datepicker
({
onSelect: function()
{
updateResults(); // When a new date is selected update the results
}
});
//Set the default from and to dates.
fromDate.datepicker('setDate', '-1w');
toDate.datepicker('setDate', '+0');
updateResults(); // Initial call on load
});

Format is posted to php as:
Wed May 13 2015 00:00:00 GMT+0200 (Central European Summer Time)
Make a timestamp from it first:
$ts = strtotime($_POST['date']);
How can I set format 2015-05-20 for datepicker post to php in my function?
With the timestamp, you can use date:
$date = date("Y-m-d", $ts);

You have to use $.datepicker.formatDate(); to convert dates.
Example:
var date = $('.datepicker').datepicker('getDate');
var convertedDate = $.datepicker.formatDate('dd-mm-yy', date);
So your function would become
function updateResults() {
var from_date = fromDate.datepicker('getDate');
var to_date = toDate.datepicker('getDate');
from_date = $.datepicker.formatDate('yy-mm-dd', from_date);
to_date = $.datepicker.formatDate('yy-mm-dd', to_date);
$.getJSON('results.php', {
from_date: from_date,
to_date: to_date
}, function (data, status, xhr) {
$.plot('#flotcontainer', data, options);
});
}
For a live example check this JSfiddle
EDIT:
Use $.datepicker.formatDate('yy-mm-dd', ..); to convert dates. I changed my answer and provided a JSfiddle

Bootstrap datepicker beforeShowday works only on first change

I'm trying to disable booked dates on datepicker. My code simply posts an ID to ajax.php file and i run a mysql query based on that id and get start and end dates. then i make an array that contains these dates and the ones in between. Finally I get this json_encoded array and it basically defines dates to be disabled on my bootstrap datepicker. I have recently found out that nothing is wrong with $.post method and changed the title. The problem was beforeShowday, it doesn't rerun after changes. Here is the jQuery code:
$.ajaxSetup({ cache: false });
var date = new Date();
date.setDate(date.getDate());
function getJsonRes(urlid){
var tarihler = [];
var url="ajax.php";
$.post( url, {"id":urlid}, function(data) { //this is the post request
$.each( data, function(key, val) { //to retrieve json encoded data
var tarih=val;
tarihler.push(tarih);
});
var disabledDays = tarihler;
function daysDisabled(date) {
for (var i = 0; i < disabledDays.length; i++) {
if (new Date(disabledDays[i]).toString() == date.toString()) {
return false;
}
}
return true;
}
$('#grs').datepicker({ //this is start date
language:'tr',
todayHighlight:true,
weekStart: 1,
startDate:date,
autoclose: true,
format: 'dd-mm-yyyy',
beforeShowDay: daysDisabled
})
.on('changeDate', function (selected) {
startDate = new Date(selected.date.valueOf());
startDate.setDate(startDate.getDate(new Date(selected.date.valueOf()))+1);
$('#cks').datepicker('setStartDate', startDate);
});
$('#cks').datepicker({ //this is end date
todayHighlight:true,
weekStart: 1,
language:'tr',
autoclose: true,
format: 'dd-mm-yyyy',
beforeShowDay: daysDisabled
})
.on('changeDate', function (selected) {
FromEndDate = new Date(selected.date.valueOf());
FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf())));
$('#grs').datepicker('setEndDate', FromEndDate);
});
}, "json");
}
$('#choice').change(function(){
var idvalue=$(this).val();
getJsonRes(idvalue);
});

Javascript error when trying to create a calendar

I'm brand new to javascript and php and having a slight problem.
I'm trying to create a php calendar that interacts with mysql database and have been trying to write some javascript to add events to the calendar.
My events are being brought from the mysql database but whenever I click to add an event to the calendar I get an error in the console saying "uncaught TypeError: undefined is not a function" which appears to be caused by these lines in the code:
var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
My code is below, console log 'testing function success' is not being displayed. Please help!
$(document).ready(function() {
//get current date
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
theme:true,
weekNumbers: true,
//allow a 'more' option if too many events.
eventLimit: true,
//enables agenda view
header:{
left:'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: 'event.php',
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
console.log('testing function 1');
var title = prompt('Event Title:');
if (title) {
var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'eventadd.php',
data: 'title='+ title+'&start='+ start +'&end='+ end ,
type: "POST",
success: function(json) {
console.log('testing function success');
alert('OK');
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
});
});

Instead of lines
var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
use (take care not to redefine local varialbes start, end, which are params of the function, also use Moment's format function according to: http://momentjs.com/docs/#/displaying/format/ as recommended by the fullCalendar v2 code migration):
var sfmated = start.format("yyyy-MM-dd HH:mm:ss");
var efmated = end.format("yyyy-MM-dd HH:mm:ss");
a working jsfiddle is here:
http://jsfiddle.net/xv5n1wod/12/

Ajax Call too late... Giving result after 15 seconds

I have jquery datepicker which gives the events list when selected date through ajax call from database.. when i click on the date the result is getting displayed too late after 15 seconds...can any 1 suggest me what to do to get the result on clicked fastly:-
var x = '';
$('#calendar').datepicker({
altField: '#datepicker_send',
inline: true,
firstDay: 1,
showOtherMonths: true,
altFormat: "yy/mm/dd",
dateFormat: "yy/mm/dd",
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
onSelect: function (dateText) {
$('#event-date').text(dateText)
x = dateText;
//alert(x);
$.ajax({
type: "GET",
url: 'check_events.php',
data: 'y=' + x,
success: function (data) {
$('#event-date1').html(data); //Alert Data on success not result.
// alert(data);
}
});
}
});
Check_events.php:-``
<? php
if (isset($_GET['y'])) {
$y = $_REQUEST['y'];
$sql_check = mysql_query("SELECT * FROM events WHERE date='$y'");
$res = mysql_num_rows($sql_check);
if ($res == 0)
{
echo '<div class="evnt_name"><a href="#">No Events For Today <a/> </div>';
} else
{
while ($rec = mysql_fetch_assoc($sql_check))
{
?>
< div > Some Result < /div>
<?php }
}
}
exit; ?>

i think #JLevett is suggesting to change your host name from localhost to 127.0.0.1 in mysql connection string. Also specify field name in select query rather than * , it is in not much of a performance improvement but it will help.