2016-06-02 19 views
0

FullCalendar.js APIを使用してカレンダー機能を備えたWebアプリケーションを開発しています。日付と時刻を選択すると、形式は06/08/2016 3:36 PMとなります。データがDBに保存され、再度フェッチされます。その後、フォーマットはWed Jun 06 2016 03:36:00 GMT + 1000(AUS東部標準時間)に変更されます。私は06/08/2016 3:36 PMのような同じ形式を保持したいと思います。FullCalendarJSの日付と時刻形式

日付をデータベースから保存/フェッチすると、フォーマットに合わせて変換されます。 SimpleDateFormatクラスを使用して、データを挿入する前後に日付を/からStringに変換しました。それでも、形式はCalendarUIではdd/mm/yyyyに変更されません。

フォーマットを保持する方法を教えていただけますか?

は、私は上記のコードでは、私のソースコード

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; 
} 

を添付した

を更新し、第一の方法は、Javaスクリプトから日付を取得し、DBにSQLの日付のタイムスタンプに変換して格納されます。 2番目の方法は、最初の方法とまったく逆です。

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'); 
         } 
       } 
      }); 
     }); 

私はStrutsフレームワークも使用しています。イベントはJSONとして返され、カレンダーのEvents変数に割り当てられます。

私がデバッグするとき、Javaオブジェクトによって返される日付は06/08/2016 3:36であり、この特定の変数はJavaのStringです。しかし、何とかJava Date Objectに変換され、長いものが表示されます。

+0

このJavaまたはJSについてお話していますか?いくつかのコードを教えてください。 –

+0

"Wed Jun 06 2016 03:36:00 GMT + 1000(AUS Eastern Standard Time)"はおそらくデフォルトのロケート設定を使用してStringにシリアル化されたJava Dateオブジェクトです。私は、DBの列形式がJavaの日付と互換性があると仮定しています。 "06/08/2016 3:36 PM"の形式は、実際の日付形式ではなく、単なる文字列のようです。 Javaでは、SimpleDateFormatを使用して日付を解析および書式設定することができます。 – Leo

+0

@Leo:私は変換するためにSDFを使用したという記事では言及しませんでした。私はちょうどポストを更新しました。その後も日付形式はJavaのDateオブジェクトです。 – Anand

答えて

0

ご意見ありがとうございます。

DateをJavaScript Dateオブジェクトに変換でき、必要な形式で日付文字列を作成できました。また、bootstrap-datetimepickerを使用して、画面の日付と時刻を選択しました。

日付と時刻の変換が行われるコードの抽出を添付しました。

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); }); 
関連する問題