Right now I am using owl ng datepicker - as shown in the image(https://daniel-projects.firebaseapp.com/owlng/date-time-picker). But it is opening on input field click. I want it to be opened on datepicker icon click in my input box.
here is the html code for the same.
<input id="fromDate"
name="fromDate"
type="text"
placeholder="From Date"
class="form-control"
tooltip="From Date"
delay="500"
triggers=""
#fromDateToolTip="bs-tooltip"
(mouseenter)="fromDateToolTip.show()"
(mouseleave)="fromDateToolTip.hide()"
[(ngModel)]="fromDatePicker"
[owlDateTime]="dt1"
[owlDateTimeTrigger]="dt1"
readonly="readonly"
(ngModelChange)="dateFilter()"
(keydown.backspace)="clear()">
<owl-date-time
[pickerType]="'calendar'"
[startAt]="startAtFromDate"
[showSecondsTimer]="true"
(afterPickerClosed)="setFromDateSelected($event,dt1)"
(afterPickerOpen)="fromDatePickerOpen()"
#dt1>
</owl-date-time>
remove [owlDateTimeTrigger]="dt2" from input field and place it some where in icon field.
<div class="example-wrapper">
<h2>Trigger Picker by a Icon</h2>
<label class="example-input-wrapper">
Date Time
<input placeholder="Date Time:" [(ngModel)]="dateTime" [owlDateTime]="dt2">
<span class="example-trigger" [owlDateTimeTrigger]="dt2">
<i class="fas fa-calendar-alt"></i>
</span>
<owl-date-time #dt2></owl-date-time>
</label>
<h4>Value From Picker: {{dateTime}}</h4>
</div>
You can use the owlDateTimeTrigger property.
The date time picker that this trigger is associated with.
Try with this:
<input id="fromDate" placeholder="From Date" ... [owlDateTime]="dt1 [owlDateTimeTrigger]="dt1">
<span [owlDateTimeTrigger]="dt1"><i class="fa fa-calendar"></i></span>
<owl-date-time [pickerType]="'calendar'" [startAt]="startAtFromDate [showSecondsTimer]="true" (afterPickerClosed)="setFromDateSelected($event,dt1)" (afterPickerOpen)="fromDatePickerOpen()" #dt1></owl-date-time>
Related
I have a problem with Thymeleaf date format when I send a date. The HTML shows the date correctly within a h3 tag but not inside the code of the datepicker and I can not understand why....
<div>
<label for="birthdate" th:text="#{editprofile.about4.birthdate}">Birth date</label>
<label class="input">
<i class="icon-append fa fa-calendar"></i>
<input type="date" name="date" id="birthdate" class="form-control margin-bottom-20" th:value="${#dates.format(profile2about2th.birthdate,'yyyy/MM/dd')}" th:field="*{birthdate}">
</input>
</label>
<h3 th:text="${#dates.format(profile2about2th.birthdate,'yyyy/MM/dd')}"></h3>
</div>
why it shows the date with hours in one place and correctly in the other...... input type="date" name="birthdate" id="birthdate" class="form-control margin-bottom-20" value="1932-10-10 00:00:00.0"
Thanks
th:field and th:value shouldn't be used on the same tag. (th:field sets the name, id and value attributes of the tag it is on.) You'll see that you would get the correct formatting if you left off th:field, but then the form wouldn't submit correctly. In my opinion, the way to fix this is to:
Add an InitBinder method to your controller, like this:
#Controller
public class WhateverController {
.
.
.
#InitBinder
public void initBinder (WebDataBinder binder) {
binder.registerCustomEditor(Date.class, new CustomDateEditor(new SimpleDateFormat("yyyy/MM/dd"), true));
}
.
.
.
}
Remove the th:value. Your HTML should look like this:
<div>
<label for="birthdate" th:text="#{editprofile.about4.birthdate}">Birth date</label>
<label class="input">
<i class="icon-append fa fa-calendar"></i>
<input type="date" name="date" id="birthdate" class="form-control margin-bottom-20" th:field="*{birthdate}" />
</label>
<h3 th:text="${#dates.format(profile2about2th.birthdate,'yyyy/MM/dd')}"></h3>
</div>
There are ways to add global binders as well, if you want this to work for your entire application and not just that one controller.
Ensure that the date passed in as value (in this case birthdate) is of this format:
yyyy-mm-dd
and NOT in the date picker's format mm/dd/yyyy
Read more here.
We have built a site with a login page - login page is a simple form in field sets - annoyingly when using an iPad the keyboard is triggered whenever pressing the button - it stays active as the next page is loaded - i can understand why - following is the form code - is there any way to disable this functionality?
<section>
<h3>Login</h3>
<form method="post" action="/Login" novalidate="novalidate" _lpchecked="1"> <fieldset>
<label class="ui-front legend icon-img-inside">
<label for="FormModel_UserName">User Name</label>
<input type="text" value="" name="FormModel.UserName" id="FormModel_UserName" data-val-required="Please provide your User Name" data-val="true" aria-required="true" aria-describedby="FormModel_UserName-error" class="input-validation-error" aria-invalid="true">
<span data-valmsg-replace="true" data-valmsg-for="FormModel.UserName" class="field-validation-error"><span id="FormModel_UserName-error" class="">Please provide your User Name</span></span>
<img alt="Icon: Person" src="/css/img/icons/icon-user.svg">
</label>
</fieldset>
<fieldset>
<label class="ui-front legend icon-img-inside">
<label for="FormModel_Password">Password</label>
<input type="password" name="FormModel.Password" id="FormModel_Password" data-val-required="Please provide your Password" data-val="true" aria-required="true" class="input-validation-error" aria-describedby="FormModel_Password-error">
<span data-valmsg-replace="true" data-valmsg-for="FormModel.Password" class="field-validation-error"><span id="FormModel_Password-error" class="">Please provide your Password</span></span>
<img alt="Icon: Pencil" src="/css/img/icons/icon-pencil.svg">
</label>
</fieldset>
<div data-valmsg-summary="true" class="validation-summary-errors"><ul> <li>Please provide your User Name</li><li>Please provide your Password</li> </ul></div> <fieldset>
<button class="button" name="submit" type="submit">
<i class="key"></i>
<span>Login</span>
</button>
</fieldset>
<!-- Javascript detection -->
<span class="result-login" id="result"></span>
You could try to disable native, default submit process and do submiting with js,, something like this:
document.getElementsByClassName('button')[0].onclick = function(e){
e.preventDefault();
document.getElementById('frm1').submit();
}
see the code here, I changed some tag names, look the html pane also..: http://codepen.io/mkdizajn/pen/EgmPQR?editors=1010
I can't see this live and test but I hope that helps..
If I use the below code, it would not print the HTML5 invalidate error:
Enter your 4 digit Pin
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" maxlength=4 pattern="[a-z]">
</label>
<input type="text">
<input type="button">
However If I remove the 2nd text input type, it would show me an invalid input error on pressing enter or clicking the button.
The below code works fine:
Enter your 4 digit Pin
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" maxlength=4 pattern="[a-z]">
</label>
<input type="button">
<section class="col col-6">
<label class="input">
<i class="icon-append fa fa-building"></i>
<input type="text" ng-model="customer.Name" name="customerName" placeholder="Customer Name" required>
<span style="color:red" ng-show="myForm.customerName.$dirty && myForm.customerName.$invalid">
<span ng-show="myForm.customerName.$error.required">Name Required</span>
</span>
</label>
</section>
How can i implement custom validation on it? m applying angularjs validation it works fine but I want custom valuation on this tag. I want user insert only alphabets in this textbox.
Use ngPattern directive and provide appropriate regular expression:
<input ng-pattern="/^[a-zA-Z]*$/" />
I have a simple form with a date validation which works fine:
The problem is that when the validation kicks in, the "End Date" label gets misplaced as you can see (is above the date field box/calendar):
The code related is the following (it's just a form):
<form name="senstageaddform">
<div class="form-element">
<label for="ed_senStartDate" class="text-label">
{{i18n "EDUCATION_SEN_START_DATE"}} <span class="required">*</span>
</label>
<input type="text" class="date standard-text-field" maxlength="16" id="ed_senStartDate" name="startDate"/>
</div>
<div class="form-element">
<label for="ed_senEndDate" class="text-label">{{i18n "EDUCATION_SEN_END_DATE"}}</label>
<input type="text" class="date standard-text-field" maxlength="16" id="ed_senEndDate" name="endDate"/>
</div>
</form>
Is there any way to "pack" the form or any way to stop this happening?
Any hint please?
Thanks everyone