Develop Reference

jQuery Countdown until server's midnight time

I use Keith Wood jQuery Countdown (http://keith-wood.name/countdown.html) and call it like this:
var midnight = new Date(2020, 4-1, 29, 23, 59, 59);
$('#defaultCountdown').countdown(
{
until: midnight,
format: 'HMS',
padZeroes: true,
compact: true
});
There is no problem taking the midnight time on the client side, but how to get the midnight from the server? I tried it like this but no success:
var midnight = '<?= date("Y, n, j, G, i, s", strtotime('tomorrow')); ?>'
I'll be grateful for any ideas!

I solved it like this:
$('#defaultCountdown').countdown(
{
until: +<?= strtotime('tomorrow') - time() ?>,
format: 'HMS',
padZeroes: true,
compact: true
});

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 assign Date to defaultDate?

I posted the same question but did not get the answer, so I post the question again.
Here are two global variables.
var ri_startDate = "";
var ri_endDate = "";
I added the date values stored in DB to global variables.
(The format of the date retrieved from the DB is YYY-MM-DD.)
$.ajax({
type: 'POST',
url: 'getSectionDate.do',
data: {"ri_idx" : ri_idx},
dataType: 'JSON',
success: function(resultData){
$.each(resultData, function(key, value){
ri_startDate = value.ri_startDate;
ri_endDate = value.ri_endDate;
$('#ri_startDate').val(ri_startDate);
$('#ri_endDate').val(ri_endDate);
});
if(ri_startDate != null || ri_startDate != "" || ri_endDate != null || ri_endDate != "") {
$('#calendarContainer').show(700,rerenderingFullCalendar);
$('.doctorname2').hide(700);
}
},
error: function(resultData) {
console.log("resultData Error >> " + resultData);
}
});
Now that everything is done, I'm going to insert it into the defaultDate.
As follows:
$('#calendar').fullCalendar({
defaultDate: moment(ri_startDate)
});
However, this will cause an error.
So I did the following.
$(function() {
var moment_startDate = moment(ri_startDate, 'YYYY-MM-DD');
var result_moment_startDate = moment_startDate.format('YYYY-MM-DD');
console.log(result_moment_startDate);
$('#calendar').fullCalendar({
defaultDate: moment(result_moment_startDate)
});
});
What did I do wrong?
I can not find the reason. I've tested it in Google Developer Tools, but it works fine. (When you create it globally instead of inside a function)
How can I do what I want? I just want to add the query value (ri_startDate) from the DB to defaultDate.
If you run this on Google Developer Tools, it works.
However, when I write this code and run it, I get the following error.
Uncaught TypeError: Cannot read property 'clone' of null at MonthViewDateProfileGenerator.DateProfileGenerator.buildRenderRange (fullcalendar.js:10447) at MonthViewDateProfileGenerator.BasicViewDateProfileGenerator.buildRenderRange (fullcalendar.js:12144) at MonthViewDateProfileGenerator.buildRenderRange (fullcalendar.js:14621) at MonthViewDateProfileGenerator.DateProfileGenerator.build (fullcalendar.js:10265) at MonthView.View.setDate (fullcalendar.js:3624) at Calendar.renderView (fullcalendar.js:9607) at Calendar.initialRender (fullcalendar.js:9534) at Calendar.render (fullcalendar.js:9470) at HTMLDivElement. (fullcalendar.js:12414) at Function.each (jquery-3.2.1.min.js:2)
How do I fix it? Because of this, progress can not be made.
Please help me.

As per our discussion you are sending January 2018 as the date to moment and assigning it to defaultDate and January 2018 is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged and will be removed in an upcoming major release.
Please refer to URL for more info. As your current problem is that you are unable to set default date to the desired one and if you provide the date in proper format as i described above you can set the calendar to any date in past or future see a demo below i am setting the calendar to 2015-10-10
$('#calendar').fullCalendar({
defaultDate: $.fullCalendar.moment('2005-10-01')
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.print.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.js"></script>
<div id="calendar">
</div>

I solved this problem with the help of #Muhammad Omer Aslam.
ajax part :
$.ajax
({
type: 'POST',
url: 'getSectionDate.do',
data: {"ri_idx" : ri_idx},
dataType: 'JSON',
success: function(resultData)
{
console.log("resultData : " + resultData);
$.each(resultData, function(key, value)
{
ri_startDate = value.ri_startDate;
ri_endDate = value.ri_endDate;
var a = JSON.stringify(resultData);
$('#ri_startDate').val(ri_startDate);
$('#ri_endDate').val(ri_endDate);
});
if(ri_startDate != null || ri_startDate != "" || ri_endDate != null || ri_endDate != "")
{
loadCalendar(ri_startDate, ri_endDate);
$('#calendarContainer').show(700,rerenderingFullCalendar);
$('.doctorname2').hide(700);
}
},
error: function(resultData)
{
console.log("resultData Error >> " + resultData);
}
});
loadCalendar function part:
function loadCalendar(ri_startDate,ri_endDate)
{
var todayMomentDate = $.fullCalendar.moment(ri_startDate);
var resultTodayMomentDate = todayMomentDate.format('YYYY-MM-DD');
console.log("resultTodayMomentDate : " + resultTodayMomentDate);
// fullCalendar 관련
$('#calendar').fullCalendar
({
});
$('#calendar').fullCalendar('gotoDate', resultTodayMomentDate);
};
This all works well.

Tried something like this... I used it before on my code.
$( "#datepicker-14" ).datetimepicker({
//format : 'DD-MM-YYYY HH:mm'
viewMode: 'days',
format: 'DD/MM/YYYY'
}, "date");
var dateNow = new Date();
var date= moment(dateNow).format('DD/MM/YYYY');

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/