Date and Time format in FullCalendarJS

Question

I am developing a web app with a calendar functionality using FullCalendar.js API. When I select the date and time, the format is 06/08/2016 3:36 PM . Once the data is saved into DB and fetched again. Then format is changed to Wed Jun 06 2016 03:36:00 GMT+1000 (AUS Eastern Standard Time) . I want to retain the same format like 06/08/2016 3:36 PM .

When I save/fetch the date from/to database, I convert it to suit to the format. I used SimpleDateFormat class to convert the date from/to String before and after inserting the data. Even then, the format is not changed to dd/mm/yyyy in the CalendarUI.

Can any of you please guide me on how to retain the format?

UPDATED

I have attached my source code

private Timestamp convertJSDateToJavaDate(String dat) {
    java.util.Date date = null;
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
    try {
        date = new SimpleDateFormat("dd/MM/yyyy hh:mm a").parse(dat);
        String newDate = sdf.format(date);
        date = sdf.parse(newDate);
    } catch (ParseException e) {
        e.printStackTrace();
    }
    return new java.sql.Timestamp(date.getTime());
}

private String convertJavaDateToJSDate(String dat) {
    java.util.Date date = null;
    String finalDate = "";
    SimpleDateFormat sdf = new SimpleDateFormat("dd/MM/yyyy HH:mm");
    try {
        if (dat != null) {
            date = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").parse(dat);
            finalDate = sdf.format(date);
            System.out.println("sdf - " + sdf.format(date));
        }
    } catch (ParseException e) {
        e.printStackTrace();
    }
    return finalDate;
}

In the above code, the first method is getting the date from Java Script and converts into SQL date-timestamp and stores into DB. Second method is exactly reverse of first one.

var calendar = $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        selectable: true,
        selectHelper: true,
        select: function(start, end, allDay) {              
            $("#calendarModal").modal({keyboard:true}); 
            calendar.fullCalendar('unselect');
        },
        editable: true,
        events: '../displays/getEventCalendar.action',
        eventClick: function(calEvent, jsEvent, view) {
              $("#calendarModal").modal({keyboard:true});
              $("#addEventCalendar_eventBean_start").val(calEvent.start);
              $("#addEventCalendar_eventBean_end").val(calEvent.end);
              $("#addEventCalendar_eventBean_title").val(calEvent.title);
              $("#addEventCalendar_eventBean_description").val(calEvent.description);
              $("#addEventCalendar_eventBean_allDay").val(calEvent.allDay);
    },
    timeFormat:'h:mm'
    });

     $('.modal form').on('submit', function(event) {
            event.preventDefault();
        var url = "addEventCalendar.action"; 
        $.ajax({
               type: "POST",
               url: url,
               data: $("#addEventCalendar").serialize(), // serializes the form's elements.
               success: function(data)
               {
                   if(data.status){     
                       $('#calendar').fullCalendar('removeEvents');
                        $('#calendar').fullCalendar('refetchEvents');
                        }
                }
            });
        });

I am also using the Struts framework. Events are returned as JSON and assigned to the Events variable in calendar.

When I debug, the date returned by Java Object is 06/08/2016 3:36 and this particular variable is String in Java. But somehow its getting converted into Java Date Object and displays the lengthy one.

Answer 1

Thanks for your suggestions.

I am able to convert the Date to JavaScript Date object and formed the date String in the format that I wanted. I also used the bootstrap-datetimepicker to select the date and time in the screen.

Attached the extract of code where the date and time conversion happens.

eventClick: function(calEvent, jsEvent, view) {

            var a = new Date(calEvent.start);
            var start =  ("0" + a.getDate()).slice(-2)+ "/"+("0" + (a.getMonth() + 1)).slice(-2) + "/" + a.getFullYear() + " "+("0" + a.getHours()).slice(-2) +":" + ("0" + a.getMinutes()).slice(-2);
            a = new Date(calEvent.end);
            var end =  ("0" + a.getDate()).slice(-2)+ "/"+("0" + (a.getMonth() + 1)).slice(-2) + "/" + a.getFullYear() + " "+("0" + a.getHours()).slice(-2) +":" + ("0" + a.getMinutes()).slice(-2);

              $("#calendarModal").modal({keyboard:true});
              $("#addEventCalendar_eventBean_id").val(calEvent.id);
              $("#addEventCalendar_eventBean_start").val(start);
              $("#addEventCalendar_eventBean_end").val(end); });