<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.
Related
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);
}
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/
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
I am switching between a Kendo Date-Time picker and a Kendo Date Picker. The Picker alternates between the two depending on if the user has selected "All Day" - which then only the Date Picker is shown.
However, when switching from the Date-Picker, to the Date-Time picker, if one alters the date then tries to switch, Kendo doesn't store the date, and shows the Date-Time picker as empty.
<div class="col-sm-6">
<label class=" control-label" for="start-date">Start Date & Time</label>
<input kendo-date-time-picker id="start-date-time" name="start-date-time"
data-ng-model="registeringUser.StartDate"
data-ng-required="true"
min="today"
max="howFarOut"
data-ng-show="!setAllDay">
<input kendo-date-picker id="start-date" name="start-date"
data-ng-model="registeringUser.StartDate"
data-ng-required="true"
min="today"
max="howFarOut"
data-ng-show="setAllDay">
<span class="help-block"></span>
</div>
<div class="col-sm-6">
<label class=" control-label" for="end-date">End Date & Time</label>
<input kendo-date-time-picker id="end-date-time" name="end-date-time"
data-ng-model="registeringUser.EndDate"
data-ng-required="true"
min="today"
max="howFarOut"
data-ng-show="!setAllDay">
<input kendo-date-picker id="end-date" name="end-date"
data-ng-model="registeringUser.EndDate"
data-ng-required="true"
min="today"
max="howFarOut"
data-ng-show="setAllDay">
<span class="help-block"></span>
</div>
I currently switch between the option by changing the visibility, and it works as long as one does not alter the Date-Picker and then switches back to Date-Time. Does anyone know how to store the date when switching back to Date-Time?
For example: If it was 2/02/20002 3:00 PM, then when switched to Date only, it becomes 2/02/2002. But if I change the date to 2/03/2002, then switch it back to Date-Time, the calendar then reads as empty- while I'd like it to read as 2/03/2002 12:00 AM
scope.setAllDay = false;
scope.cbSelected = function () {
if (scope.myCheckbox) { // when checked
scope.setAllDay = true;
} else {
scope.setAllDay = false;
}
};
You need to specify kendo date time picker parse-format and match it with kendo date picker format by default its follow your culture setting, e.g M/d/yyyy for en-US
<input kendo-date-time-picker
ng-model="dateString"
k-ng-model="dateObject"
k-parse-formats="['dd/MM/yyyy']"
ng-show="!allDay"/>
<input kendo-date-picker id="start-date" name="start-date"
k-format="dd/MM/yyyy"
ng-model="dateString"
ng-show="allDay">
See my dojo
I want hide oldest date in date input. How to do this ?
Model:
Public Property OrderDate As Date
View
#Html.EditorFor(Function(m) m.OrderDate, New With {.placeholder = "Set Date"})
Html Output
<input class="text-box single-line" data-val="true" data-val-date="The field Order Date must be a date." data-val-required="Order Date is Required" id="OrderDate" name="OrderDate" type="date" value="01/01/0001">
You can set it HTML5 min and max attr. For example,
<input name="somedate" type="date" min="2013-12-25">
In your example
<input name="somedate" type="date" min='#DateTime.Now.ToShortDateString()'>