How do i pass date from ajax to my method in mvc?

Nepethya Rana

9y14.6k.NET

I have a view with date field. I have used pickaday.js for rendering date control.

on select even of date i need to update my model with the date.

my code is :

Project Complete Date :

id="projectCompleteDate" data-projId="[email protected]" value="@Model.Project.ProjectCompleteDate"/>

Method in controller:

[HttpPost]

[ValidateAntiForgeryTokenAjax]

public void updateProjectWithReadyToOpenDate(Project proj)

{

var user = us.GetCurrentUser();

var bb = HasAccessToProject(user.Username,proj.ID);

if (bb == true)

{

using (var dbcontext = new MyDbContext())

{

var projId = proj.ID;

var project = dbcontext.Projects.Where(p => p.ID == proj.ID).FirstOrDefault();

if (project != null)

{

project.ProjectCompleteDate = proj.ProjectCompleteDate;

}

dbcontext.SaveChanges();

}

I get ID value but ProjectCompleteDate is coming null.

Please help. I need both date and time to update my model.

10 Replies

Know the answer? Post it — somebody with the same question will find it here.

Bryian Tan9y ago
I'm not sure how the PickaDay and Moment() plugin work, but sound like moment().format('h:mm A'); will return the time? If that the case, can you change the code to append the time to the date? Example
var datVal = $("#projectCompleteDate").val() + ' '+ moment().format('h:mm A');
Nepethya Rana9y ago
Like as you said, I am now using bootsrap datetime picker for date and time.

Now how do i call ajax call and update my model on date change event?

$(function () {
$('#projectCompleteDate').datetimepicker();
});
Nepethya Rana9y ago
sir I changed the code to get date value. like this:

var picker = new Pikaday({
field: document.getElementById('projectCompleteDate'),
minDate: new Date(),
maxDate: new Date(2020, 12, 31),
yearRange: [2000, 2020],
format: 'M/D/YYYY',
onSelect: function () {
debugger;
var datVal = $("#projectCompleteDate").val();
// datVal = moment().format('h:mm A'); -- this gives me time i seleceted date. My databse has datetime datatype. from where i need create a store proc to sep date and time for report
alert(datVal);
var projId = $(this).attr("data-projId");

updateProjectWithProjectCompleteDate(projId, datVal);

}
});

this line : var datVal = $("#projectCompleteDate").val(); and I am able to pass date to my object field. But I need to get the time also.
Nepethya Rana9y ago
Mon Oct 16 2017 00:00:00 GMT-0500 (Central Daylight Time) This is what on selection of date is happening. Its not capturing the time. I looked into pickada.js there is moment.js as well. But i am not sure how it will work. any idea sir?
Nepethya Rana9y ago
Yes I tried that before and later i changed that the code right now in question.
Bryian Tan9y ago
Have you try "ProjectCompleteDate": datVal, ?
Nepethya Rana9y ago
I am working on a project which has used pickaday.js. I think pickaday should have one. This project is using it to get date for other properties.

console.log(datValue) prints date and time the date has selected.

I am not sure if "ProjectCompleteDate": new Date(datVal), is correct code to assign date. I am beginner and i do not have much of js and jquery knowledge.
Bryian Tan9y ago
Ok, I see you want both date and time, not just date.I'm not sure if the current plugin (Pikaday) support time picker. Here other plugin to consider

http://trentrichardson.com/examples/timepicker/
https://xdsoft.net/jqplugins/datetimepicker/
Nepethya Rana9y ago
I need both date and time . what and how do i pass date and time after selecting date on calender control.
Bryian Tan9y ago
I think the ProjectCompleteDate is not matching the one in the Project Object. My assumption is, in Project.ProjectCompleteDate , the type is DateTime (M/D/YYYY hh:mm:ss tt), but on the UI, the code is passing Date (M/D/YYYY). You can try change ProjectCompleteDate to string and pass in string on the UI to see how it behave.

OR

On the Project.ProjectCompleteDate, add the data anootation to match what will be passed in from the UI.

[DisplayFormat(DataFormatString = "{0:M/d/yyyy}", ApplyFormatInEditMode = true)]