How to properly format date for django via datepicker - html

I am trying to populate a DateTimeField on a django model. I am doing it via the frontend using this extension (https://bootstrap-datepicker.readthedocs.io/en/latest/). The problem is when i submit the form, I get this error in the console "Datetime has wrong format. Use one of these formats instead: YYYY-MM-DDThh:mm[:ss[.uuuuuu]][+HH:MM|-HH:MM|Z]. Where could the problem lie?
Model
class Video(models.Model):
beginDate = models.DateTimeField(default=timezone.now)
Date picker
<input
type="text"
id="from-datepicker"
onChange={handleDate}
data-provide="datepicker"
name="beginDate"
data-date-format="yyyy-mm-dd"
placeholder="Select date"
className="form-control lesson__startDate"
required
/>

Related

How edit input field with type = " "datetime-local"?

I need edit existing data in form. When I load data in form from model to input field with type="datetime-local" - its empty. If i write new value to it and send then evetything is fine.
So, for example, for input field with type "time" in html:
<form action="#" th:action="#{/schendule}" th:object="${jobDetailDTO}" method="post">
...
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" data-toggle="toggle" id="everyDay" > Every day timer:
</label>
<input type="time" class="form-control" th:field="*{localTime}" disabled>
</div>
and I send data to spring controller
#PostMapping(value = "/schendule", consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE)
public String schenduleFtp(#Valid JobDetailDTO jobDetailDTO) throws SchedulerException {...
When I want to edit input i add model:
modelAndView.addObject("jobDetailDTO", jobDetailDTO);
Everything fine with field "time", but with type = dateTime-local, i have empty value in input tag whan trying to edit, how to bind LocalDateTime value from model to view ? In style like tinput time
tag?

Dynamically set Bootstrap Datepicker value from input like "1996-02-07T00:00:00" format using typescript

Trying to fetch DateofBirth value from the database which is in this date format:
yyyy-MM-ddT00:00:00
I am using Angular6 and bsDatepicker from Bootstrap. When I am binding date value from json to the field, It shows invalid date.
My code looks like this:
I tried using value property of input to set with datepipe alerady
component.html:
<input type="text" id="dob" class="form-control" date-placeholder="Date Of Birth" name="dob" [(ngModel)]="dob" #DateofBirth="ngModel" placeholder="Date of Birth" bsDatepicker required/>
json array:
{dob: "1996-02-07T00:00:00"
empcode: "6789"
empfather: "ML "
empid: 1
empname: "Vana"
empphone: "+919898989898"
role: "adminstaff"}

Making next field disabled until previous is selsected

ho to make input data field disabled in angular 6 until previous input data field is selected. Like I have one source field and one destination input field. So i want to make Destination field to be disabled until the Source is selected.
If I consider your source and destination input fields as Start Date and End Date input fields with type="date", then you can create the destionation field i.e. End Date field as readonly as shown below:
<input type="date" name="end_date" id="end_date" class="form-control" placeholder="* End Date" #endDate="ngModel" [(ngModel)]="end_date" required readonly>
And add a change function on your Source field i.e. Start Date field as shown below:
<input type="date" name="start_date" id="start_date" class="form-control" [min]="today" placeholder="* Start Date" [(ngModel)]="start_date == null ? '' :start_date" #startDate="ngModel" (change)="onDateChange($event)" required>
Now on your Component.ts file, create the same function (i.e. onDateChange($event)) to remove the readonly property from End Date field, which will execute whenever a change-event occur on Start Date field.
onDateChange(event) {
$("#end_date").prop('readonly', false);
}

Inserting Date Value into Date Field using Laravel

At the moment, I have a date field on a form that I would like to be able to insert the current value of the current record being edited. No records are missing this date field in my MySQL database, but for some reason, the value of the record will not actually load into the field input, it does however load into the "value" portion of the input field.
At the moment here is my field's code:
<input type="date" name="date" id="date" class="form-control" style="width: 100%; display: inline;" onchange="invoicedue(event);" required value="{{$shipment->date}}">
And here is the code output:
<input name="date" id="date" class="form-control" style="width: 100%; display: inline;" onchange="invoicedue(event);" required="" value="2018-05-10 00:00:00" type="date">
But this is what it looks like in my browser:
But in my MySQL database table, the field (which is a date field) is formatted as following: 2018-05-12
When using <input type="date">, the value will need to be formatted in ISO 8601 date format: YYYY-MM-DD
Try mutating your $shipment->date value by appending ->format('Y-m-d') and it should match the expected format.
Give this a shot:
<input
...
value="{{ $shipment->date->format('Y-m-d') }}"
...
>
You can learn a bit more about it here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
https://en.wikipedia.org/wiki/ISO_8601
For dates you can use mutators in laravel check Documentations
Then you can do something like this:
class Shipment extends Model {
protected $dates = ['date'];
}
Then you can simply write
<input type="date" name="date" id="date" class="form-control" style="width: 100%; display: inline;" onchange="invoicedue(event);" required value="{{$shipment->date->format('m/d/Y')}}">
If you don't want to use laravels date mutator, you can use your own something like this:
class Shipment extends Model
{
/**
* Set the date attribute.
*
* #param string $value
* #return void
*/
public function setDateAttribute($value)
{
$this->attributes['date'] = Carbon::parse($value)->format('m/d/Y');
}
}
Hope this helps.
Laravel makes use of carbon and makes tasks like this an absolute walk in the park. Post your date value to your controller like normal, the input you're using is fine.
Then simply format with Carbon
$formattedDate = Carbon::parse($request->date)->format('Y-m-s');
You now have yourself a date in the format 2018-05-13 which is the correct format for sql
You should take a read of the Carbon documentation it can do some great things.
Check it out here https://carbon.nesbot.com/docs/

input field edit not updating ng-model for date picker?

I have created a date picker in Angular
<div class="datepicker-wrapper">
<label for="license_expiry_date">Start Date (YYYY-MM-DD)</label>
<input type="text" class="form-control" [ngModel]="fromDate | date: 'yyyy-MM-dd'" placeholder="Enter start date" (focus)="onPurchaseDateFocus('from')" name="start_date">
<div [hidden]="!isFromDatepickerVisible" class="datepicker-container">
<datepicker [(ngModel)]="fromDate" name="fromdatepicker" (selectionDone)="onDateSelectionDone('from')">
</datepicker>
</div>
</div>
I can select a date by using date picker which will update the ng-model, the input tag above the date picker is editable. but when I edit the date from the input field instead of date picker instead of selecting by date picker, ng-model is not getting updated.
Why is the value not updated when I edit the input field?
Not sure what's going wrong but my first guess is the one-way data binding on the form control.
[ngModel]="fromDate | date: 'yyyy-MM-dd'"
try to change it to
[(ngModel)]="fromDate | date: 'yyyy-MM-dd'"
More on two-way data binding
https://angular.io/docs/ts/latest/guide/template-syntax.html#!#two-way