I am using an input for the date. How do we set the Input to display the Date Today? Thank you for your time.
<div class="form-group">
<label>Debarred</label>
<input v-model="form.debarred" type="date" name="debarred"
placeholder="Debarred"
class="form-control" :class="{ 'is-invalid': form.errors.has('debarred') }">
<has-error :form="form" field="debarred"></has-error>
</div>
You can update the model value form.debarred on page load like:
this.form.debarred = new Date().toLocaleDateString('en-CA');
//==> "2020-04-03"
Now, using .toLocaleDateString('en-CA') is need here as <input type="date"> value can only accept a string representing a date in YYYY-MM-DD format, or empty.
DEMO:
const debarred = document.querySelector('[name=debarred]');
debarred.value = new Date().toLocaleDateString('en-CA');
<div class="form-group">
<label>Debarred</label>
<input type="date" name="debarred" placeholder="Debarred" class="form-control">
<has-error :form="form" field="debarred"></has-error>
</div>
Related
The scenario i am working on is -> on selection of the date on mat datepicker i want to make a http call which performs a few calculations
Trying to do this using (selectedChanged), but doesn't seem working, wanted help on how i could fix this, thanks in advance
The below is the HTML code where i am trying to do this
<div class="form-group m-form__group row">
<div class="col-lg-4 m-form__group-sub">
<mat-form-field class="example-full-width" appearance="outline">
<mat-label>Policy Start Date</mat-label>
<input matInput [min]="minDate" [max]="maxDate
[matDatepicker]="picker4"
placeholder="Choose a date" formControlName="policy_start_date" >
<mat-datepicker-toggle matSuffix [for]="picker4" >
</mat-datepicker-toggle>
<mat-datepicker #picker4 (selectedChanged)="currentPeriodClicked()">
</mat-datepicker>
</mat-form-field>
</div>
MatDatepicker does not have a selectedChanged event. Try using either the dateChange or dateInput event on MatDatepickerInput instead:
<mat-form-field class="example-full-width" appearance="outline">
<mat-label>Policy Start Date</mat-label>
<input matInput [min]="minDate" [max]="maxDate
[matDatepicker]="picker4"
(dateChange)="currentPeriodClicked()"
placeholder="Choose a date"
formControlName="policy_start_date" >
<mat-datepicker-toggle matSuffix [for]="picker4" ></mat-datepicker-toggle>
<mat-datepicker #picker4></mat-datepicker>
</mat-form-field>
See: https://v6.material.angular.io/components/datepicker/overview#input-and-change-events.
I have a couple of major gaps in my understanding of vapor/leaf/html. I am working from the "todo" example that is created using the beta branch of vapor.
First, I made my own fluent model (no problems that I know of):
import FluentSQLite
import Vapor
final class affordatmodel: SQLiteModel {
var id: Int?
var propertyCost: String
var targetEquity: String
var interestRate: String
var amortization: String
var sponsor1: String
var sponsor2: String
var rent: String
var rentInflation: String
var propertyTaxes: String
var propertyTaxesInflation: String
var strataFees: String
var strataFeesInflation: String
init(propertyCost: String, targetEquity: String, interestRate: String, amortization: String, sponsor1: String, sponsor2: String, rent: String, rentInflation: String, propertyTaxes: String, propertyTaxesInflation: String, strataFees: String, strataFeesInflation: String) {
self.propertyCost = propertyCost
self.targetEquity = targetEquity
self.interestRate = interestRate
self.amortization = amortization
self.sponsor1 = sponsor1
self.sponsor2 = sponsor2
self.rent = rent
self.rentInflation = rentInflation
self.propertyTaxes = propertyTaxes
self.propertyTaxesInflation = propertyTaxesInflation
self.strataFees = strataFees
self.strataFeesInflation = strataFeesInflation
}
}
/// Allows to be used as a dynamic migration.
extension affordatmodel: Migration { }
/// Allows to be encoded to and decoded from HTTP messages.
extension affordatmodel: Content { }
/// Allows to be used as a dynamic parameter in route definitions.
extension affordatmodel: Parameter { }
Then I make an instance and send it to a leaf template:
let defaultData = affordatmodel(propertyCost: "700000", targetEquity: "300000", interestRate: "1", amortization: "20", sponsor1: "500000", sponsor2: "200000", rent: "1200", rentInflation: "1", propertyTaxes: "8000", propertyTaxesInflation: "1", strataFees: "0", strataFeesInflation: "0")
return leaf.render("welcome", ["affordat": defaultData])
And my Leaf template successfully populates the html with the default data (body shown here):
<body class="container">
<h1>Payment and Principal Calculations</h1>
<form action="/affordat" method="POST">
<div class="form-group">
<label for="propertyCost">Property Cost</label>
<input type="number" class="form-control" name="propertyCost" placeholder="#(affordat.propertyCost)">
</div>
<div class="form-group">
<label for="targetEquity">Target Equity</label>
<input type="number" class="form-control" name="targetEquity" placeholder="#(affordat.targetEquity)">
</div>
<div class="form-group">
<label for="interestRate">Interest Rate</label>
<input type="number" class="form-control" name="interestRate" placeholder="#(affordat.interestRate)">
</div>
<div class="form-group">
<label for="amortization">Amortization (years)</label>
<input type="number" class="form-control" name="amortization" placeholder="#(affordat.amortization)">
</div>
<div class="form-group">
<label for="sponsor1">Sponsor 1 Funds</label>
<input type="number" class="form-control" name="sponsor1" placeholder="#(affordat.sponsor1)">
</div>
<div class="form-group">
<label for="sponsor2">Sponsor 2 Funds</label>
<input type="number" class="form-control" name="sponsor2" placeholder="#(affordat.sponsor2)">
</div>
<div class="form-group">
<label for="rent">Rent</label>
<input type="number" class="form-control" name="rent" placeholder="#(affordat.rent)">
</div>
<div class="form-group">
<label for="rentInflation">Rent Inflation (will be used exactly)</label>
<input type="number" class="form-control" name="rentInflation" placeholder="#(affordat.rentInflation)">
</div>
<div class="form-group">
<label for="propertyTaxes">Property Taxes (first year est.)</label>
<input type="number" class="form-control" name="propertyTaxes" placeholder="#(affordat.propertyTaxes)">
</div>
<div class="form-group">
<label for="propertyTaxesInflation">Property Taxes Inflation (est.)</label>
<input type="number" class="form-control" name="propertyTaxesInflation" placeholder="#(affordat.propertyTaxesInflation)">
</div>
<div class="form-group">
<label for="strataFees">Strata Fees (first year est.)</label>
<input type="number" class="form-control" name="strataFees" placeholder="#(affordat.strataFees)">
</div>
<div class="form-group">
<label for="strataFeesInflation">Strata Fees Inflation (est.)</label>
<input type="number" class="form-control" name="strataFeesInflation" placeholder="#(affordat.strataFeesInflation)">
</div>
<input type="hidden" name="_csrf" value="{{csrfToken}}">
<button type="submit" class="btn btn-primary">Refresh Calculations</button>
</form>
</body>
Great, so I know how to get fluent data to HTML. My problem is I don't know how to get it back. When the "Post" occurs, the data does not seem to get passed to the controller. My route is:
router.post("affordat", use: affordatController.create)
And the relevant part of my controller looks like this:
import Vapor
final class AffordatController {
func create(_ req: Request) throws -> Future<affordatmodel> {
return try req.content.decode(affordatmodel.self).flatMap(to: affordatmodel.self) { affordatmodel1 in
return affordatmodel1.save(on: req)
}
}
}
Which shows me one of my models, with an ID #, but no data. And I kind of understand why because I didn't really seem to send the post data to the controller. How I am supposed to send the POST data to the controller? Is the problem in my leaf template, my route, or my controller?
It looks like it should work. You can inspect the data being sent to your server in the network inspector in your browser. Make sure you preserve logs and you'll be able to see the POST request and the data sent to the server.
If you breakpoint at each point in the request you can see what the data is.
As an aside, it looks like you're submitting an empty form, so it's just filling everything in as blank strings. Do you mean to use value instead of placeholder in the form inputs? Value will pre-populate the data for the user, placeholder will show the value to the user as a suggestion but won't send the data in the form submission.
I have an input field in a form which is filled but disabled (I am trying to build details view). In the code below titleAccessor.valid returns false.
Any ideas how to overcome this issue ?
<div class="form-group row">
<label class="col-md-3 form-control-label" for="title">{{'contentSalesTextConfig.titleForm'|translate}}</label>
<div class="col-md-9">
<input [disabled]="pageStatus==4" required [ngClass]="{'redBorder': ((titleAccessor.touched||formSubmitted)&&!titleAccessor.valid)}" [ngModel]="textContentMain.title" #titleAccessor="ngModel" name="title" id="title" type="text" class="form-control" placeholder="{{'contentSalesTextConfig.placeHolder.titleForm'|translate}}">
</div>
</div>
NOTE: When i remove [disabled]="pageStatus==4" validation works as it is supposed to..
disabled inputs are considered as invalid inputs , you can use readonly instead of disabled :
<input [readonly]="pageStatus==4" required [ngClass]="{'redBorder': ((titleAccessor.touched||formSubmitted)&&!titleAccessor.valid)}" [ngModel]="textContentMain.title" #titleAccessor="ngModel" name="title" id="title" type="text" class="form-control" placeholder="{{'contentSalesTextConfig.placeHolder.titleForm'|translate}}">
hope this will help :)
i have i simple CRUD application that stores data to a database.
I try to import date and time from a single input by a bootstrap datepicker. But i got some weird error.
Service
def insertAction(String id, String name,String thl,Timestamp dt1){
def sql = new Sql(dataSource)
sql.execute("INSERT INTO mn (id, name, thl, dt1) VALUES (${id as long},$name,${thl as long},$dt1)")
}
Controller
def save() {
println params
[customer: customerService.insertAction(params.id,params.name,params.thl,params.dt1)]
redirect action: "list"
}
GSP
<div class='col-md-4'>
<div class="form-group">
<label class="control-label col-sm-2" for ="dt1">Date :</label>
<div class='input-group date' id="dt1">
<input id="" name="dt1" type='datetime' class="form-control" >
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$('#dt1').datetimepicker({
});
</script>
Postgres column is set to timestamp
I added the following code
Timestamp ts = new Timestamp(params.getDate("dt1").getTime())
and the erros in now this
URI
/Test/customer/save
Class
org.springframework.context.NoSuchMessageException
Message
No message found under code 'date.dt1.format' for locale 'en_US'.
Inside your controller:
Timestamp ts = new Timestamp(params.getDate("dt1").getTime())
[customer: customerService.insertAction(params.id,params.name,params.thl,ts)]
As by default when you get a variable using params.key, value is of String type. You need to manually convert it to desired type.
I'm using ASP classic, I need to send a file and get the textfields to insert on a DB, I did put the ENCTYPE="multipart/form-data" on the form but when I submit it gives me this error:
"Wrong Content-Type. Make sure you have included the attribute
ENCTYPE="multipart/form-data" in your form."
What is strange is that when a leave up the textfields and keep just the file fields it works.
Form:
<div data-role="content">
<form method="post" ENCTYPE="multipart/form-data" action="formteste.asp" >
<div class="ui-field-contain">
<label for="text-4">text1:</label>
<input type="text" data-clear-btn="true" name="text1" value=""></div>
<div class="ui-field-contain">
<label for="text-4">text2:</label>
<input type="text" data-clear-btn="true" name="text2" value=""></div>
<div class="ui-field-contain">
<label for="date-4">Date:</label>
<input type="date" data-clear-btn="true" name="date" id="date-1" value=""></div>
<input type="file" data-clear-btn="true" name="file-1" id="file-1" value="">
<input type="submit" data-inline="true" value="Go">
</form>
</div>
and ASP:
Set Upload = Server.CreateObject("Persits.Upload.1")
text1 = Upload.Form("text1")
Upload.OverwriteFiles = False
On Error Resume Next
Upload.SetMaxSize 1048576 ' Limit files to 1MB
Upload.Save("c:/")
For Each File in Upload.Files
arquive = File.FileName
next
For Each Item in Upload.Form
Response.Write Item.Name & "= " & Item.Value & "<BR>"
Next
If Err <> 0 Then
%>
<div>"<% = Err.Description %>"</div>
<% end if%>
I've searched a lot for this, but none could help with my issue, I hope to get some response.
From the AspUpload Reference
IMPORTANT: The Upload.Files and Upload.Form collections are populated by the Upload.Save method. Therefore, it is incorrect to reference either collection before the Save method is called.