I use $scope.dt= moment().format("YYYY-MM-DD") to init datapicker module.
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
this is plnkr test code..
why this can not show value on input?
Moment returns the date as a string, rather than a date object, which is what the datepicker requires, so you need to convert it to a date.
Ex:
$scope.today = function() {
$scope.dt = moment().toDate();
};
$scope.today();
You'll then need to format that if you want it to display properly outside of the datepicker, which you can do when you call it in your view:
{{dt | date: "yyyy-MM-dd" }}
Why moment format value can not init module?
the old version support this.
Related
I have a filter search that shows matching strings of an array in a list when user types. When the user clicks on one item of the list, a method should fire. Everything works fine, but the problem is that it doesn't fire on first click but a on a second attempt on the same item of the list or any other it works. I can't figure out why is this happening. Here's my code.
<div
class="filter-form"
:class="{'visible': filterVisibility[index]}"
v-if="col.filter"
>
<div class="input-group">
<input
type="text"
class="form-control"
#keyup="filterColumn($event, index)"
#blur="toggleFilter(index)"
>
<button
class="btn btn-secondary"
type="button"
#click="toggleFilter(index)"
>Filtrar</button>
</div>
<ul class="filter-matches list-group">
<li
class="list-group-item"
v-for="match of filteredMatches"
:key="match"
#click="clickFilteredMatch(String(match), index)"
>{{match}}</li>
</ul>
</div>
i have page with the url that show my list of items:
https://localhost:123/AllSystems/List?systemTypeID=1
and inside this page i have search (i pass SearchTerm to list.cshtml.cs file ):
<form method="get">
<div class="form-group">
<div class="input-group">
<input type="search" class="form-control" asp-for="SearchTerm" />
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-search"></span> **Search**
</button>
</div>
</div>
</form>
when i click on Search button (inside the search form) i go to url:
https://localhost:123/AllSystems/List?SearchTerm=nba
that fine but i want to pass the systemTypeID=1 to from last url
(https://localhost:123/AllSystems/List?systemTypeID=1).
how i do it?
i want the result be something like that:
https://localhost:123/AllSystems/List?systemTypeID=1&SearchTerm=nba
thank's
you can pass multiple dynamic values to QueryString as below
you can set Value1 and Value2 and pass that values to your query string as below
string value1="1";
string value2="nba";
Response.Redirect("https://localhost:123/AllSystems/List?systemTypeID"+value1+"&SearchTerm="+value2);
in second page you can access the value like
string typeid= Request.QueryString["systemTypeID"];
string searchvalue = Request.QueryString["SearchTerm"];
I have an angular 7 reactive form, input field in this form is to let user see and modify time and then using Save() save it back to our db, the problem is that user can enter any none sense numbers in this field which dose not make sense in terms of Time.(like hours should be 1-24, Minutes 1-60)
My question is how can I validate what user entered into time field and if its valid then let Save btn be active?
Note: Based on my testing even though its none sense time entry but while trying to save its not saving to db and its probably sql not letting that happen.
I googled but i could not find anything, also angular has only email Validators which u can put while defining form.
this is my form defination
timeForm: FormGroup = new FormGroup({
Id: new FormControl(''),
Time: new FormControl(''),
});
and this is my HTML side
<form style="background-color: aliceblue;" [formGroup]="service.timeForm">
<mat-grid-list cols="1" rowHeight="120px">
<mat-grid-tile>
<div class="form-controles-container">
<input type="hidden" formControlName="Id" />
<mat-form-field>
<input formControlName="Time" matInput placeholder="Time" />
</mat-form-field>
<div class="button-row">
<button mat-raised-button color="primary" type="submit" (click)="Save()">Save</button>
<button mat-raised-button color="warn" (click)="Cancel()">Cancel</button>
</div>
</div>
</mat-grid-tile>
</mat-grid-list>
</form>
I need some sort of validation when user punch in any input which dose not make sense in Time my Save btn should not be activated.
I appreciate your help and guideline.
You can use the HTML type="time" or if you want more you can simply use a library like: JsDaddy/ngx-mask found on Github. Use it like this:
HTML with MatInput:
<input formControlName="Time" matInput placeholder="Time" type="time" />
With ngx-mas:
<input formControlName="Time" matInput placeholder="Time" mask="Hh:m0" />
Adding type="time" in all input time type use cases always help.
I'm creating a form in thymeleaf that contains a file upload field that's not part of my model.
When I load the page, thymeleaf complains and throws NotReadablePropertyException for that field.
How can I get thymeleaf to ignore the fact that the field does not exist on the model?
Code:
<div class="form-group"
th:classappend="${#fields.hasErrors('uploadFile')}? 'has-error'">
<label class="col-sm-12 control-label" style="text-align: left; margin-bottom: 7px;">Upload Photo</label>
<div class="col-sm-12" style="margin-bottom:5px;">
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput">
<i class="glyphicon glyphicon-file fileinput-exists"></i>
<span class="fileinput-filename"></span>
</div>
<span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new">Select file</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="uploadFile" accept="image/*" required>
</span>
Remove
</div>
<p id="error" style="position:absolute;color:#FF0000;margin-top:-7px"></p>
</div>
</div>
Error:
org.springframework.beans.NotReadablePropertyException: Invalid property 'uploadFile' of bean class [bean.Library]: Bean property 'uploadFile' is not readable or has an invalid getter method: Does the return type of the getter match the parameter type of the setter?
the error that you get is because of the line
th:classappend="${#fields.hasErrors('uploadFile')}
that expects a field expression as a parameter.
You can replace
th:classappend="${#fields.hasErrors('uploadFile')}
with
th:classappend="${#fields.hasErrors('*')}
where the has-error class will appear if there is an error with any of the fields.
Or you can even replace it with
th:classappend="${#fields.hasErrors('global')}
that is not associated with any specific field in the form.
Or alternatively, you can add the field (uploadFile) in the model as a transient attribute.
I'm trying to load a form with an object that has a enum property, seems that everything is working correctly, but when I try to apply a class I get an error. I can see in the HTML code that checked property is been apply correctly, however I need to apply an specific class to the checked element and in the following line is the one that I have the problem.
th:classappend="${'__${currency}__' == '__${reference.currency}__' ? 'active'}"
The complete element looks like this
<div class="btn-group" data-toggle="buttons">
<label th:each="currency : ${T(entity.CurrencyEnum).values()}"
th:for="${#ids.next('currency')}" class="btn btn-default" th:classappend="${'__${currency}__' == '__${reference.currency}__' ? 'active'}">
<input type="radio" th:name="currency" th:field="*{currency}"
th:text="${currency}" th:value="${currency}" />
</label>
</div>
Thanks in advance...
--- UPDATE ---
Here is a sample code after solving the issue. The problem was where I place the final } please be carefull with this detail.
<div th:fragment="currency (selected)">
<label
th:each="currency : ${T(CurrencyEnum).values()}"
th:for="${#ids.next('currency')}" class="btn btn-default"
th:classappend="${currency == selected} ? 'active'"> <input type="radio"
th:name="currency" th:field="*{currency}" th:text="${currency}" th:value="${currency}" />
</label>
</div>
Assuming that reference is a variable defined somewhere and it is visible in this contex, you can try with this:
th:classappend="${currency} eq ${reference.currency} ? 'active'"