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/
Related
I have an input date-picker and I want to set its min value to the current date
<input type="date" class="form-control" id="checkindate" placeholder="" min="">
how can I do this using Angular?
There are multiple ways to do it. The min attribute accepts a string in multiple formats. Here is my solution using 'yyyy-mm-dd'.
Controller (*.ts)
export class AppComponent {
currentDate: string;
constructor() {
// credit: https://stackoverflow.com/a/38148759/6513921
this.currentDate = new Date().toISOString().slice(0, 10);
}
}
Template (*.html)
<input type="date" class="form-control" id="checkindate" placeholder="" [min]="currentDate">
Working example: Stackblitz
You need to pipe the date to follow the input format.
Here Demo
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
/>
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);
}
<input type="text" class="form-control"
id="transactionAmount"
maxlength="10"
OnlyNumber="true"
[(ngModel)]="userBalance.transactionAmount"
name="transactionAmount"
placeholder="Amount"
required
#transactionAmount="ngModel">
Here I have to hide zero amount while user entering the values.
If he enters all zero's then only we have to hide not in cases like 20,30,100 etc...
I'm using Angular 2.
<input type="text" class="form-control"
id="transactionAmount"
maxlength="10"
OnlyNumber="true"
[(ngModel)]="userBalance.transactionAmount"
name="transactionAmount"
placeholder="Amount"
required
#transactionAmount="ngModel"
(keyup)="hideZero()>
Added This keyUp event in Html and in .ts added below code
hideZero(){
if(this.userBalance.transactionAmount === '0' ){
this.userBalance.transactionAmount = '';
}
}
Working Absolutely fine
/* In your ts */
validateNumber(value: String) {
userBalance.transactionAmount = value && value.replace(/(?:0*)(\d*)/g, (_,value1) => {
return value1;
})
}
<input (input)="validateNumber($event)">
Try using (ngModelChange) event which will trigger when user types values. By using regex, you can remove the last zero value and update the DOM. Hope this helps.
Angular 0 value don't display
<span *ngIf="!pro.model === '0'">{{ pro.model }}</span>
Like this,
When model value is zero that time don't display model value.
If model value is not zero that time show model value in your html pages.
<div class="input-group" ng-init="d.expiredAt = toDate(d.expiredAt);">
<input type="text" class="form-control" uib-datepicker-popup="dd/MMM/yyyy"
is-open="popup1.opened" ng-required="false"
close-text="Close" ng-model="d.expiredAt" ng-readonly="!editing"/>
I want to compare this date with current date and highlight this field with red if it is < than current date.
I guess that the purpose of your feature is to notify / prevent user from selecting a date before today ?
If it's the case, the bootstrap-ui component you're using provides the feature :
minDate (Default: null) - Defines the minimum available date.
Requires a Javascript Date object.
If you declare the today's date in your controller :
$scope.now = new Date();
You can use it like this in your HTML :
<input type="text" min-date="now" class="form-control" uib-datepicker-popup="dd/MMM/yyyy"
is-open="popup1.opened" ng-required="false"
close-text="Close" ng-model="d.expiredAt" ng-readonly="!editing"/>
It will disable the selection of passed dates.