We Keep Coding

how to detect html element in typescript

How can I detect an element from the HTML when there is no such element, here is a range picker I want to detect the custom range item in typescript
this is the HTML code
<form action="" id="dates">
<input [class.show-calend]="showCalendar" readonly="readonly" id="range-picker" type="text" class="form-control inspection_date"
name="dateRange" placeholder="Add date"
[formControl]="dateRange" style="cursor: pointer"
daterangepicker (selectionDone)="onSelectionDone($event)" [options]="rangeOptions" (cancelDaterangepicker)="cancel($event)" (selected)="selectedDate($event)" (ngModelChange)="ngModelChange($event)" />
</form>
this is the HTML code which is visible only when I open the dev panel on a browser

I solved the problem in this way
elementLi:any
this.elementLi = document.getElementsByTagName('li')[7];

Thymeleaf and DatePicker: set min Date

I would like to set a minimum selectable date in my datepicker, using thymeleaf.
I try to set it by this code:
<label th:utext="#{${name}}" th:for="${name}" class="control-label"></label>
<div class="input-group input-group-prepend">
<span class="input-group-text far fa-calendar-alt"></span>
<input type="text" th:id="${name}" th:name="${name}" th:value="${value}" th:placeholder="${placeholder}" class="form-control" onfocus="(this.type='date')" min="${minDate}"/>
</div>
But this code min="${minDate}" is ignored.
There is a way to do that I want with thymeleaf or I can do it only by javascript?
Thanks

You can try using th:attr as below
th:attr="min=${minDate}"

Angular ng-pattern causes binding to break

I've got a form:
<div class="panel-group">
<label for="url" tooltip="Enter the Engine as a Web Service (EWS) URL the Empower Editor will use for PDF preview.">EWS URL</label>
<input id="url" size="50" ng-model="config.ewsUrl" required ><br/>
<label for="PreviewTimeout" tooltip="Specify how long the Empower Editor will wait for a response from the PDF preview.">Preview timeout (Seconds)</label>
<input id="PreviewTimeout" type="number" min="15" max="60" required ng-model="config.previewTimeout" style="width: 150px;">
</div>
When I add an ng-pattern attribute to the input it breaks the binding:
<div class="panel-group">
<label for="url" tooltip="Enter the Engine as a Web Service (EWS) URL the Empower Editor will use for PDF preview.">EWS URL</label>
<input ng-pattern="/^((ht|f)tp(s?)\\:\\/\\/)?[0-9a-zA-Z]([-.\\w]*[0-9a-zA-Z])*(:(0-9)*)*(\\/?)([a-zA-Z0-9\\-\\.\\?\\,\\:\\'\\/\\\\\\+=&%\\$#_]*)?$/" id="url" type="url" size="50" ng-model="config.ewsUrl" required><br/>
<label for="PreviewTimeout" tooltip="Specify how long the Empower Editor will wait for a response from the PDF preview.">Preview timeout (Seconds)</label>
<input id="PreviewTimeout" type="number" min="15" max="60" required ng-model="config.previewTimeout" style="width: 150px;">
</div>
If I remove the reg ex, it goes back to binding again. What could cause this?

It looks like you are trying to validate a url. You don't need to use a regular expression or the ng-pattern option for this. Instead just use the following:
<input type="url" id="url" type="url" size="50" ng-model="config.ewsUrl" required/>
That in mind, the real reason that you aren't getting model binding is probably because the regular expression is not validating the values entered (either because it is incorrect or it is not a valid regular expression). I put together a quick plunker demonstrating what happens with valid and invalid values (on a validated field).
See the plunker here.
EDIT - Version Using ng-pattern
If older browser support is important, you will probably still need to also use ng-pattern. In order to do this you need to make sure the regular expression is in the correct format (leading and trailing slash, but no "g"). For an example I pulled a regular expression for url's from here and implemented it in the following code:
<input id="url" type="url" size="50" ng-model="config.workingUrl2"
ng-pattern="/https?:\/\/(www\.)?[-a-zA-Z0-9#:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9#:%_\+.~#?&//=]*)/"
required/>
See this working in the updated plunker! Best of luck!

JQuery datepicker does not load in all fields

I am trying to load JQuery DatePicker in two text fields, so I am using the following code
$(function() {
$('#DOB, #SignupDate').datepicker();
});
and here is the HTML for both fields:
<div class="field field_input">
<label for="DOB">D.O.B</label>
<input type="text" name="DOB" value="">
</div>
<div class="field field_input">
<label for="SignupDate">Signup Date</label>
<input type="text" name="SignupDate" value="">
</div>
It is loading just fine in the DOB field but it is not loading in the SignupDate field. Can someone please tell me what I am missing here and how to solve it?
Thanks for your time

You try to select the #DOB and #SignupDate.
$('#DOB, #SignupDate')
It means get element by id DOB and SignupDate but you have no element with id="DOB" nor
id="SignupDate"
So please use
<input type="text" id="DOB" name="DOB" value=""> //<- note id="DOB"
<input type="text" id="SignupDate" name="SignupDate" value=""> //<- note id="SignupDate"

You need to have an id attribute on your inputs. Two reasons:
In your jQuery code, # indicates an id selector, not a name selector.
The for attribute on the labels should correspond with an id attribute on another element, not the name attribute.
Given that this is probably a form, you still want to keep the name attribute, but you probably just want a matching id attribute.

restrict and input text to a specific language characters in angular.js

i am building a form using angular.js.
my form looks like:
<form name="registerForm" class="form-horizontal">
<div class="control-group">
<label class="control-label">שם פרטי</label>
<div class="controls">
<input type="text" ng-model="register.firstName" placeholder="שם פרטי" required>
</div>
</div>
<div class="control-group">
<label class="control-label">שם משפחה</label>
<div class="controls">
<input type="text" ng-model="register.username" placeholder="שם משפחה">
</div>
</div>
<div class="control-group">
<label class="control-label">דוא"ל</label>
<div class="controls">
<input type="email" ng-model="register.email" placeholder='דוא"ל'>
</div>
</div>
</form>
i am building a register form inside i will have 2 fields:
first name and last name that should be entered only with a specific language (not english).
explanation: no other language except that language will be accepted by the form.
all other fields will have to be in english.
thanks

This is a good question.
You can check the Unicode block for this language here, I guess it is Hebrew, so the code range is 0590-05FF.
Then you can use ngPattern to do the validation like this:
<input type="text" name="firstName" ng-model="register.firstName" placeholder="שם פרטי" required ng-pattern="pattern"></div>
function ctrl($scope) {
$scope.pattern = /[\u0590-\u05FF]+/g;
}
Here is the demo

I think Regex is the way to go.
HTML5 has the new pattern attribute that you could use to validate the user input, the only problem is that you also have to take care of browsers that do not support it, with Angular you can use the ngPattern directive.
This question will help you with the regex.
Remember that this is just the front-end validation and I recommend you to validate the user input in the back-end as well.