JQuery Datetimepicker date selected does not match date today - asp.net-mvc

Question

I am working on a scheduling project in MVC 5. I want to check the Date Selected against current Date. If they match, display the scheduled appointment for Today' date only in a view. Currently, the appointments do not display when I add "appointment.AppointmentDate == DateTime.Now". Instead the View duplicates "No Appointments Today'.
I have researched through StackOverFlow and other sites to try and figure out with no luck. One attempt was adding ".data('date') in the Create view: " $('#datetimepicker1.data('date'), #datetimepicker2').datetimepicker " to set the type as Date but was unsuccessful. I am a beginner and hope someone may be able to help me in the right direction. Thanks.
My code is below:
MODEL:
public enum AppointmentTime
{
_1pm_to_2pm, ApplicationDbContext _dbContext = new ApplicationDbContext();
public ActionResult Create(int id)
{
Property property = _dbContext.Properties.SingleOrDefault(b => b.PropertyID == id);
ViewBag.propertyName = property.PropertyName;
Consultation consultation = new Consultation();
consultation.PropertyID = id;
return View(consultation);
}
[HttpPost]
public ActionResult Create(Consultation consultation)
{
try
{
if (ModelState.IsValid)
{
Property property = _dbContext.Properties.SingleOrDefault(b => b.PropertyID == consultation.PropertyID);
property.Consultations.Add(consultation);
_dbContext.SaveChanges();
return RedirectToAction("Details", "Property", new { id = property.PropertyID });
}
return View();
}
catch
{
return View("Error");
}
}
_2pm_to_3pm,
_3pm_to_4pm,
_4pm_to_5pm,
_5pm_to_6pm
}
public class Consultation
{
[Key]
public int AppointmentID { get; set; }
[ForeignKey("Property")]
public int PropertyID { get; set; }
[Display(Name = "Enter your name")]
public string AppointmentName { get; set; }
[Required]
[Display(Name = "Email")]
public string AppointmentEmail { get; set; }
[Display(Name = "Select Date")]
[UIHint("AppointmentDate")]
[Required]
public DateTime AppointmentDate { get; set; }
public AppointmentTime AppointmentTime { get; set; }
public virtual Property Property { get; set; }
}
CONTROLLOR:
[Authorize(Roles = "Admin")]
public ActionResult AdminAppointmentView(Consultation consultaion)
{
var appointments = _dbContext.Consultations.ToList();
return View(appointments);
}
CREATE VIEW
#model OpenProperties.Models.Consultation
#{
ViewBag.Title = "Create Appointment";
}
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css"
rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
#using (Html.BeginForm(new { enctype = "multipart/form-data", id = "form1" }))
{
#Html.ValidationSummary(true)
<div>
#Html.HiddenFor(model => model.PropertyID)
<br />
<div class="form-group">
#Html.LabelFor(m => m.AppointmentName)
#Html.TextBoxFor(m => m.AppointmentName, new { #class = "form-control" })
</div>
<div class="form-group">
#Html.LabelFor(m => m.AppointmentEmail)
#Html.TextBoxFor(m => m.AppointmentEmail, new { #class = "form-control" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.AppointmentTime, new { #class = "control-label col-md-2" })
#Html.EnumDropDownListFor(model => model.AppointmentTime)
#Html.ValidationMessageFor(model => model.AppointmentTime)
</div>
<div id="datetimepicker1" class="input-append date">
#Html.TextBoxFor(m => m.AppointmentDate, "{0:dd/MM/yyyy HH}",
new { placeholder = "App Date", #class = "dtPicket" })
<span class="add-on">
<i data-time-icon="icon-time"
data-date-icon="icon-calendar"></i>
</span>
</div>
<br />
<br />
<input type="submit" value="Submit" />
</div>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script type="text/javascript">
$('#datetimepicker1, #datetimepicker2').datetimepicker({
format: 'dd/MM/yyyy'
});
</script>
}
AdminAppointmentView VIEW:
#model IEnumerable<OpenProperties.Models.Consultation>
<h2>Todays Appointments</h2>
#foreach (var appointment in Model)
{
if (appointment.AppointmentDate == DateTime.Now)
{
<li>
<ul>#appointment.AppointmentID</ul>
<ul>#appointment.AppointmentDate</ul>
<ul>#appointment.AppointmentEmail</ul>
<ul>#appointment.AppointmentName</ul>
<ul>For Property ID: #appointment.PropertyID</ul>
</li>
}
else
{
<ul> No Appointments Today </ul>
}
}

Answer 1

Just at first Glance.
if (appointment.AppointmentDate == DateTime.Now)
(
}
Is the date Format is same for appointment.AppointmentDate and DateTime.Now??.
If not just add Tostring Method to these date.
ex.
DateTime.Now.ToString("MMMM dd, yyyy")
2) You might check the // Difference in days, hours, and minutes. between the date as well. Instead of comparing
DateTime oldDate = new DateTime(2002,7,15);
DateTime newDate = DateTime.Now;
// Difference in days, hours, and minutes.
TimeSpan ts = newDate - oldDate;
// Difference in days.
int differenceInDays = ts.Days;
3) You can format date in datetime Picker as follows.
$('#datepicker').datetimepicker({
dateFormat: "yy-mm-dd",
timeFormat: "hh:mm:ss"
});
4) Also could you please put Script and datepicker code before the html
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script type="text/javascript">
$('#datetimepicker1, #datetimepicker2').datetimepicker({
format: 'dd/MM/yyyy'
});
</script>