I'm using .net core api with angular7.
I have a problem to convert dateTime to Date with ngModel
<input class="form-control" name="dateT"
[(ngModel)]="exp.dateTo |date:'yyyy-MM-dd'" #dateT="ngModel" type="date"/>
Instead if two-way binding.Use one way and have a event handler to update User input.
<input class="form-control" name="dateT" (ngModelChange)="updatedate($event)" [ngModel]="exp.dateTo |date:'yyyy-MM-dd'" #dateT="ngModel" type="date"/>
In your ts file add updatedate to update the ngmodel
updatedate(event) {
this.exp.dateTo = new Date(event);
}
Related
I have used ngx-material-timepicker for implementing the time filter.in our case time picker is open properly but its not working in the following scenarios:
Case 1 :
1.initially i have set selected time in the input and it working properly now this time i am not using with [(ngModel)]
<input [ngxTimepicker]="defaultValue" [value]="'05:11 pm'" (change)="selectChanged($event)">
<ngx-material-timepicker #defaultValue></ngx-material-timepicker><br>
Case 2 :
2.Now we have add [(ngModel)] for get the selected value that is selected fro the picker but now this time out initially set value is not showing in the input but if i remove the [(ngModel)] its working:
<input [ngxTimepicker]="defaultValue" [(ngModel)]="date1" [value]="'05:11 pm'" (ngModelChange)="selectChanged($event)" >
<ngx-material-timepicker #defaultValue></ngx-material-timepicker><br>
I have also post above issue in the github but get any response,please tell me anyone how to fix above issue.
I've got the same problem but in my case my inputs are into form and i forget about the name propriety.
i just added the name="date" in the input tag
<mat-form-field class="toggle-example" style="width: 100%">
<input matInput [(ngModel)]="time" [ngxTimepicker]="toggleTimepicker" name="time" [format]="24" [disableClick]="true" readonly>
<ngx-material-timepicker-toggle matSuffix [for]="toggleTimepicker"></ngx-material-timepicker-toggle>
<ngx-material-timepicker #toggleTimepicker></ngx-material-timepicker>
</mat-form-field>
I have fixed issue via below code:
<input [ngxTimepicker]="defaultValue" [(ngModel)]="date1 == undefined ? defaultValue : date1" [value]="'05:11 pm'" (ngModelChange)="selectChanged($event)" >
I think the onchange that you were asking is to set the time
You can use [timeset]="(setTime())" inside your ngx-time-picker tag
And in your ts file write the set time method.
I used this step and succeeded
<mat-form-field>
<input aria-label="default time" matInput [ngxTimepicker]="defaultValue" [value]="'9:00 am'" readonly>
<ngx-material-timepicker (timeSet)="setTime($event)" #defaultValue>
</ngx-material-timepicker>
Readonly fields don't seem to work on iOS. This is what I have:
#Html.EditorFor(model => model.DateOfBirth, new { htmlAttributes = new { #readonly = "true" } })
Essentially, this gets translated to this:
<input type="date" readonly="readonly" />
Works on Windows Chrome, but does does not work on the iPhone. Still able to edit the field. The date picker shows up.
This is actually a bug in iOS, a readonly date field is still changeable.
You can fix it by adding something like this to the HTML:
onclick="this.blur()"
I just encountered this. Solved it by making it type="text" when I am rendering it as read-only mode.
Try changing your input tag to this
<input type="date" readonly />
Read this too, maybe is an iOS bug.
Use the disabled attribute instead of readonly.
<input type="date" disabled />
I am outputting a DateTime to a string format of MM/dd/yyyy to an text input field. This works fine on all browsers except latest version of Safari (on Yosemite, if that matters). See examples below:
This code:
<div><input type="text" value='#Model.Arrival.Value.ToString("MM/dd/yyyy")' /></div>
<div><input type="text" value="#Html.Raw(Model.ArrivalDateString)" /></div>
<div><input type="text" value="8/23/2015" /></div>
<div><input type="text" value="08/23/2015" /></div>
Produces this:
The test page I setup for this has absolutely nothing else running on it. It's just a bare bones HTML page with server side output from a view model. MVC 5 and .net framework 4.5.1
Viewing page source, it looks like this in Safari:
<input type="text" value="08-20-2015" />
On other browsers, it is this:
<input type="text" value="08/20/2015" />
UPDATE: It looks like .NET is choosing a different culture / format for Safari browsers. A possible fix is to specify a format provider.
I was able to fix the issue by specifying a culture for the string format. ie.:
DateTime arrival = DateTime.Now;
CultureInfo invariant = CultureInfo.InvariantCulture;
string dateString = arrival.ToString("MM/dd/yyyy", invariant);
en-US works as well. Still not sure why this happens. It looks like ASP.NET is doing something different based on the user agent. The request headers otherwise looks like same.
I would've figured this out earlier if I was able to get browserstack to work locally.
I have a value for user display and a similar value for storage. How can I modify what I have so that I save the correct data to the model?
Fiddle
HTML
<div>formatted value for user display</div>
<input type="text" data-bind="value: formattedUnitOfCost" id="Model_Bound_ID" />
<div>unformatted value (the one I'd like to save)...this is not model bound</div>
<input type="text" data-bind="value: unitOfCost" />
JavaScript/Knockout
function AppViewModel() {
var self = this;
self.unitOfCost = ko.observable(1.01).extend({
isServerSet: false
});
self.formattedUnitOfCost = ko.computed({
read: function () {
return '$' + self.unitOfCost().toFixed(2);
},
write: function (value) {
// Strip out unwanted characters, parse as float, then write the raw data back to the underlying "price" observable
value = parseFloat(value.replace(/[^\.\d]/g, ""));
self.unitOfCost(isNaN(value) ? 0 : value); // Write to underlying storage
},
owner: self
});
}
ko.applyBindings(new AppViewModel());
The unformatted value is not displayed to the user. Model_Bound_ID is user editable.
You're doing it the wrong way.
Your model bound control (I mean the control that will be posted to your controller, and has the unformatted value) should be created like any other control, for example using Html.HiddenFor or whatever you want in your (Razor?) template. And you must add the data-bind attribute in the template. Remember that low-dash will be converted in medium-dash, so you can add it in the attributes parameter of the Html Helper like this: { data_bind = "value: unitOfcost" }.
Obviously this hidden field will be sent to the controller when posted (direct post, ajax, or whatever).
Now you need to add the visible control, and bind it to another observable. This observable will be a computed observable, which will do this:
on read, it will take the value from unitOfWork, and return it formatted
on write, it will parse the value to convert it to number, and update the unitOfWork observable with the parsed value
In fact you've got nearly all the code, but were implementing it all the way back.
Another way of looking at this answer is to change the html from this:
<input type="text" data-bind="value: formattedUnitOfCost" id="Model_Bound_ID" />
<input type="text" data-bind="value: unitOfCost" />
to this
<input type="text" data-bind="value: formattedUnitOfCost"/>
<input type="text" data-bind="value: unitOfCost" id="Model_Bound_ID" />
And KO does the rest by the power of the observables. Gosh I love KO
I am using the following to set the date of the datebox plugin
<input data-id="ti_datebox" type="date" data-role="datebox" data-options='{"useInline":true, "noSetButton":true}'>
$ti_datebox.trigger('datebox', {'method':'set', 'value': theDateStr, 'date':theDate})
However, I can't set the time with the same code.
<input data-id="ti_datebox" type="date" data-role="datebox" data-options='{"useInline":true, "noSetButton":true, "mode": "timebox"}'>
$ti_datebox.trigger('datebox', {'method':'set', 'value': theDateStr, 'date':theDate});
Ideally, I'd like to set the time based on some string values and not an actual date object.
Is this possible? If not, how can I set the time?
Any help much appreciated.
It's actually easier than you are making it - DateBox has a 'set' method as well, that takes a string as a value (in the same format as it outputs as it happens). There is no need to send it a date object as well - it will handle creating that.
So, you would:
// For 12hr clock
$('datebox element').trigger('datebox', {'method':'set', 'value':'08:00 AM'});
// For 24hr clock
$('datebox element').trigger('datebox', {'method':'set', 'value':'08:00'});
A working example is here:
http://jsfiddle.net/jtsage/AbVqh/1/
fwiw, if you for some reason need more control, all the set method actually does is change the value in the input box, and call the "refresh" method - which re-reads the input.
I think you are looking for this:
$('input[data-id="ti_datebox"]').trigger('datebox', {'method':'set','value':"08:00"});
Let me know if that helps.
Here is the example for the demo site
http://dev.jtsage.com/jQM-DateBox/demos/time/
http://dev.jtsage.com/jQM-DateBox/demos/api/events.html
Time Default
<label for="mydate">Some Time</label>
<input name="mydate" id="mydate" type="date" data-role="datebox"
data-options='{"mode": "timebox"}'>
12 Hour Clock Mode
<label for="mydate">Some Time</label>
<input name="mydate" id="mydate" type="date" data-role="datebox"
data-options='{"mode": "timebox", "timeFormatOverride": 12}'>