0

EDITED the original question after further research.

Using Angular Material, I have a relatively simple form inside an $mdDialog that makes a POST request to a Django REST Framework endpoint. All the data submits just fine except that from the md-datepicker element.

I can pick a date, bind it to a variable in my controller, and even display the data in real-time (just below md-datepicker) w/ Angular templating. That output suggests that the selected date is just a standardized date string:

"2015-11-27T06:00:00.000Z"

But on submit, what gets sent as form data is a different longform string:

parsed: Fri Nov 20 2015 00:00:00 GMT-0600 (Central Standard Time)
raw: Fri+Nov+20+2015+00%3A00%3A00+GMT-0600+(Central+Standard+Time)

This causes Django REST Framework to throw up a Bad Request exception since that format isn't listed in my settings.py as acceptable. I need it either format the md-datepicker output to MM-DD-YYYYThh:mm:ss.uuuuuuZ, or specify another format in my settings.py, which currently has those values:

REST_FRAMEWORK = {
    'DATETIME_FORMAT': ('%m-%d-%YT%H:%M:%S.%fZ'),
    'DATETIME_INPUT_FORMATS': ('%m-%d-%YT%H:%M:%S.%fZ', '$m-%d-$y')
}

How do I format an md-datepicker POST value to an output Django REST Framework can understand? I've checked out the following threads which call for updating the .parseDate and .formatDate methods in $mdDateLocaleProvider but that doesn't change the value that eventually gets injected into my post request:

Change format of md-datepicker in Angular Material

Any help appreciated - relatively new to Angular. Thanks, all.

Community
  • 1
  • 1
jckstl
  • 314
  • 3
  • 11

1 Answers1

1

After more research, I figured it out. Posting the answer in case anyone else encounters this issue.

Basically, md-datepicker stores a JavaScript Date object by default. Trying to send the Date object as-is resulted in the longform string in POST that Django REST Framework couldn't interpret. Luckily, JS Date objects have a built-in method for generating an ISO-compliant string, which DRF has no problem with. In my controller, I changed the form submission function, using the .toISOString() method to convert the JS object, then making my POST request:

$scope.submitClient = function (data) {
    data.md_date = data.md_date.toISOString();
    $.post({
            url: '/clients/',
            data: data
    })
}
jckstl
  • 314
  • 3
  • 11