fullcalender.formatdate not working

Question

I am trying to integrate fullcalender to php mysql.I have used the following code.I want to format the date such it will come in format yyyy/mm/dd but when i use format statements the code isn't working properly.If i remove format date it seems working but inserting 0000/0000/000 00:00 in the database.

my code:

 // Convert the allDay from string to boolean
 eventRender: function(event, element, view) {
   if (event.allDay === 'true') {
     event.allDay = true;
   } 
   else {
     event.allDay = false;
   }
 },
 selectable: true,
 selectHelper: true,
 select: function(start, end, allDay) {
   var title = prompt('Sample Textbox:');
   if (title) {
     start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
     end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
     $.ajax({
       url: 'http://localhost/fullcalendar/demos/add_events.php',
       data: 'title='+ title+'&start='+ start +'&end='+ end  ,
       type: "POST",
       success: function(json) {
         alert('Added Successfully');
         alert(json);
       }
    });   
    calendar.fullCalendar('renderEvent',
      {
        title: title,
        start: start,
        end: end,
        allDay: allDay
      },
      true // make the event "stick"
    );
  }
  calendar.fullCalendar('unselect');
},

Can anybody tell me what is the issue? If i remove format date it's working else it's not working. But i must format the data to get it properly inserted in the database. I just want date only no need of hours.

Answer 1

First if you are looking for date only not hours, you should probably use:

start = $.fullCalendar.formatDate(start, "yyyy/MM/dd");
end = $.fullCalendar.formatDate(end, "yyyy/MM/dd");

Instead of this:

start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");

If you remove date format it seems working because it's inserting dates like a timestamp (it looks like timestamp). Try changing your database structure type to VARCHAR and you will see something like this:

1405468800000

---

When you are using dateFormat function, you should look in your web browser console logs. You'll probably see:

Uncaught TypeError: undefined is not a function

It's because $.fullCalendar.formatDate method no more exist on fullCalendar V2 (changeLog). You may use Moment.js with .format() method (doc).

Don't forget to import moment.js and edit your start and end variables to:

start=moment(start).format('YYYY/MM/DD');
end=moment(end).format('YYYY/MM/DD');

It should fix your issues.

Answer 2

this code below should do the trick. (assuming you have the moment.min.js lib)

        start=moment(start).format('YYYY-MM-DDTHH:mm:ssZ'); 
        end=moment(end).format('YYYY-MM-DDTHH:mm:ssZ'); 

Answer 3

As Tifa's answer suggests : if you don't need the time part, don't encode it :

start = $.fullCalendar.formatDate(start, "yyyy-MM-dd");

---

Another problem lies in the parameter string you pass to your ajax request :

data: 'title='+ title+'&start='+ start +'&end='+ end  ,

This string is not url encoded.

The easiest way to correct this is to pass an object, and let jQuery handle the encoding :

data: {'title': title, 'start': start, 'end': end } ,