2017-09-22 41 views
1

我下面这个教程的制作在asp.net MVC5日历调度: http://www.dotnetawesome.com/2017/07/curd-operation-on-fullcalendar-in-aspnet-mvc.html的JavaScript fullcalendar日期时间搞砸

我无法理解日期时间是如何传递以及为什么它显示的最小值数据库(就好像值为空因为留空):具体地说,它在数据库中设置为1/1/0001 12:00:00 AM。

我已经看过堆栈溢出的各种答案,但不知道如何或什么我需要改变,以使日期时间设置为非空值。

任何帮助极大的赞赏。

这里是我的索引视图的JavaScript

<script> 
     $(document).ready(function() { 
      var events = []; 
      var selectedEvent = null; 
      FetchEventAndRenderCalendar(); 
      function FetchEventAndRenderCalendar() { 
       events = []; 
       $.ajax({ 
        type: "GET", 
        url: "/home/GetEvents", 
        success: function (data) { 
         $.each(data, function (i, v) { 
          events.push({ 
           eventID: v.EventID, 
           title: v.Subject, 
           description: v.Description, 
           start: moment(v.Start), 
           end: v.End != null ? moment(v.End) : null, 
           color: v.ThemeColor, 
           allDay: v.IsFullDay 
          }); 
         }) 

         GenerateCalender(events); 
        }, 
        error: function (error) { 
         alert('failed'); 
        } 
       }) 
      } 

      function GenerateCalender(events) { 
       $('#calender').fullCalendar('destroy'); 
       $('#calender').fullCalendar({ 
        contentHeight: 400, 
        defaultDate: new Date(), 
        timeFormat: 'h(:mm)a', 
        header: { 
         left: 'prev,next today', 
         center: 'title', 
         right: 'month,basicWeek,basicDay,agenda' 
        }, 
        eventLimit: true, 
        eventColor: '#378006', 
        events: events, 
        eventClick: function (calEvent, jsEvent, view) { 
         selectedEvent = calEvent; 
         $('#myModal #eventTitle').text(calEvent.title); 
         var $description = $('<div/>'); 
         $description.append($('<p/>').html('<b>Start:</b>' + calEvent.start.format("DD-MMM-YYYY HH:mm a"))); 
         if (calEvent.end != null) { 
          $description.append($('<p/>').html('<b>End:</b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a"))); 
         } 
         $description.append($('<p/>').html('<b>Description:</b>' + calEvent.description)); 
         $('#myModal #pDetails').empty().html($description); 

         $('#myModal').modal(); 
        }, 
        selectable: true, 
        select: function (start, end) { 
         selectedEvent = { 
          eventID: 0, 
          title: '', 
          description: '', 
          start: start, 
          end: end, 
          allDay: false, 
          color: '' 
         }; 
         openAddEditForm(); 
         $('#calendar').fullCalendar('unselect'); 
        }, 
        editable: true, 
        eventDrop: function (event) { 
         var data = { 
          EventID: event.eventID, 
          Subject: event.title, 
          Start: event.start.format('DD/MM/YYYY HH:mm A'), 
          End: event.end != null ? event.end.format('DD/MM/YYYY HH:mm A') : null, 
          Description: event.description, 
          ThemeColor: event.color, 
          IsFullDay: event.allDay 
         }; 
         SaveEvent(data); 
        } 
       }) 
      } 

      $('#btnEdit').click(function() { 
       //Open modal dialog for edit event 
       openAddEditForm(); 
      }) 
      $('#btnDelete').click(function() { 
       if (selectedEvent != null && confirm('Are you sure?')) { 
        $.ajax({ 
         type: "POST", 
         url: '/home/DeleteEvent', 
         data: {'eventID': selectedEvent.eventID}, 
         success: function (data) { 
          if (data.status) { 
           //Refresh the calender 
           FetchEventAndRenderCalendar(); 
           $('#myModal').modal('hide'); 
          } 
         }, 
         error: function() { 
          alert('Failed'); 
         } 
        }) 
       } 
      }) 

      $('#dtp1,#dtp2').datetimepicker({ 
       format: 'DD/MM/YYYY HH:mm A' 
      }); 

      $('#chkIsFullDay').change(function() { 
       if ($(this).is(':checked')) { 
        $('#divEndDate').hide(); 
       } 
       else { 
        $('#divEndDate').show(); 
       } 
      }); 

      function openAddEditForm() { 
       if (selectedEvent != null) { 
        $('#hdEventID').val(selectedEvent.eventID); 
        $('#txtSubject').val(selectedEvent.title); 
        $('#txtStart').val(selectedEvent.start.format('DD/MM/YYYY HH:mm A')); 
        $('#chkIsFullDay').prop("checked", selectedEvent.allDay || false); 
        $('#chkIsFullDay').change(); 
        $('#txtEnd').val(selectedEvent.end != null ? selectedEvent.end.format('DD/MM/YYYY HH:mm A') : ''); 
        $('#txtDescription').val(selectedEvent.description); 
        $('#ddThemeColor').val(selectedEvent.color); 
       } 
       $('#myModal').modal('hide'); 
       $('#myModalSave').modal(); 
      } 

      $('#btnSave').click(function() { 
       //Validation/ 
       if ($('#txtSubject').val().trim() == "") { 
        alert('Subject required'); 
        return; 
       } 
       if ($('#txtStart').val().trim() == "") { 
        alert('Start date required'); 
        return; 
       } 
       if ($('#chkIsFullDay').is(':checked') == false && $('#txtEnd').val().trim() == "") { 
        alert('End date required'); 
        return; 
       } 
       else { 
        var startDate = moment($('#txtStart').val(), "DD/MM/YYYY HH:mm A").toDate(); 
        var endDate = moment($('#txtEnd').val(), "DD/MM/YYYY HH:mm A").toDate(); 
        if (startDate > endDate) { 
         alert('Invalid end date'); 
         return; 
        } 
       } 

       var data = { 
        EventID: $('#hdEventID').val(), 
        Subject: $('#txtSubject').val().trim(), 
        Start: $('#txtStart').val().trim(), 
        End: $('#chkIsFullDay').is(':checked') ? null : $('#txtEnd').val().trim(), 
        Description: $('#txtDescription').val(), 
        ThemeColor: $('#ddThemeColor').val(), 
        IsFullDay: $('#chkIsFullDay').is(':checked') 
       } 
       SaveEvent(data); 
       // call function for submit data to the server 
      }) 

      function SaveEvent(data) { 
       $.ajax({ 
        type: "POST", 
        url: '/home/SaveEvent', 
        data: data, 
        success: function (data) { 
         if (data.status) { 
          //Refresh the calender 
          FetchEventAndRenderCalendar(); 
          $('#myModalSave').modal('hide'); 
         } 
        }, 
        error: function() { 
         alert('Failed'); 
        } 
       }) 
      } 
     }) 
    </script> 
} 

这里是我的控制器:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 

namespace FamilyCalendar2.Controllers 
{ 
    public class HomeController : Controller 
    { 
     // GET: Home 
     public ActionResult Index() 
     { 
      return View(); 
     } 

     public JsonResult GetEvents() 
     { 
      using (Entities1 dc = new Entities1()) 
      { 
       var events = dc.Event.ToList(); 
       return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet }; 
      } 
     } 

     [HttpPost] 
     public JsonResult SaveEvent(Event e) 
     { 
      var status = false; 
      using (Entities1 dc = new Entities1()) 
      { 
       if (e.EventID > 0) 
       { 
        //Update the event 
        var v = dc.Event.Where(a => a.EventID == e.EventID).FirstOrDefault(); 
        if (v != null) 
        { 
         v.Subject = e.Subject; 
         v.Start = e.Start; 
         v.End = e.End; 
         v.Description = e.Description; 
         v.IsFullDay = e.IsFullDay; 
         v.ThemeColor = e.ThemeColor; 
        } 
       } 
       else 
       { 

        dc.Event.Add(e); 
       } 

       dc.SaveChanges(); 
       status = true; 

      } 
      return new JsonResult { Data = new { status = status } }; 
     } 

     [HttpPost] 
     public JsonResult DeleteEvent(int eventID) 
     { 
      var status = false; 
      using (Entities1 dc = new Entities1()) 
      { 
       var v = dc.Event.Where(a => a.EventID == eventID).FirstOrDefault(); 
       if (v != null) 
       { 
        dc.Event.Remove(v); 
        dc.SaveChanges(); 
        status = true; 
       } 
      } 
      return new JsonResult { Data = new { status = status } }; 
     } 
    } 
} 

这是事件类的样子:

namespace FamilyCalendar2 
{ 
    using System; 
    using System.Collections.Generic; 

    public partial class Event 
    { 
     public int EventID { get; set; } 
     public string Subject { get; set; } 
     public string Description { get; set; } 
     public System.DateTime Start { get; set; } 
     public Nullable<System.DateTime> End { get; set; } 
     public string ThemeColor { get; set; } 
     public Nullable<bool> IsFullDay { get; set; } 
     public string User { get; set; } 
    } 
} 
+0

我应该提到:如果我复制和粘贴源到我的项目的日期时间的问题仍然存在。这让我觉得可能是我的nuget软件包有问题吗?我有点新VS2017 – Daveyman123

+0

你可以调试此代码?所以你可以看到问题在哪里?在您的发布方法开始时,您看到您的DateTime道具有什么价值? –

+0

{1/1/0001 12:00:00 AM}这是调试的开始时间,结束时间为空。 – Daveyman123

回答

1

格式该日期不适用于c#自动绑定。

'DD/MM/YYYY HH:mm A' 

将其更改为

'DD/MM/YYYY HH:mm:ss' 
+0

谢谢。我还应该提到,我必须格式化为'MM/DD/YYYY HH:mm:ss'才能在我的电脑上运行。我不知道为什么把这个月先做好了,但它确实如此。 – Daveyman123