in AngularJS 1.5 I have a form with an input field of type "time". It works, but the time shown should be HH:mm - without seconds, etc.
Chrome does this by default, but Firefox and Internet Explorer show with seconds and milliseconds (e.g. "14:56:00.000" instead of "14:56").
How can we show the required time format in all browsers?
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-time-input-directive-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="timeExample">
<script>
angular.module('timeExample', [])
.controller('DateController', ['$scope', function($scope) {
$scope.example = {
value: new Date(1970, 0, 1, 14, 56)
};
}]);
</script>
<form name="myForm" ng-controller="DateController as dateCtrl">
<label for="exampleInput">Pick a time between 8am and 5pm:</label>
<input type="time" id="exampleInput" name="input" ng-model="example.value"
placeholder="HH:mm" min="08:00" max="17:00" required />
<div role="alert">
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.time">
Not a valid date!</span>
</div>
<tt>value = {{example.value | date: "HH:mm:ss"}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>
</body>
</html>
Thank you!
Firefox and IE don't support <input type="time">, it's browser dependent. See this link for more info on W3. So your input field will not be able to display it the same way as in Chrome.
An alternative is to use uib-timepickerfrom angular-ui or try one from jquery like webshim.
try using step attribute and set it to 60".
<input type="time" id="exampleInput" name="input" ng-model="example.value"
placeholder="HH:mm" min="08:00" max="17:00" required step="60" />
Date time input types are not supported by IE11 and Safari. But we hope for the best and regularly visit this "can_i_use" link to see if something has changed.
https://caniuse.com/#feat=input-datetime
We can write a common method in controller end to not allow second and millisecond to be shown in input type time
getFormatDate = function (val) { // assuming val is date like "/Date(946673340000)/"
if (val != undefined) {
date = new Date(val.match(/\d+/)[0] * 1); // creating a date object from val
return new Date(date.getFullYear(), date.getMonth(), date.getDate(),
date.getHours(), date.getMinutes());
}
}
Related
I have an input element with a minRange and maxRange set and am trying to get a custom validity message. I also have a Input TagHelper to write a custom message that I am trying to override on client-side.
I have tried this so far and it doesn't seem to be working.
<input asp-for="Amount" minRange="50.00" maxRange="100.00" oninput="check(this)" />
<script type="text/javascript">
function check(input) {
if (input.validity.rangeUnderflow || input.validity.rangeOverflow) {
input.setCustomValidity("Please enter an amount between $50.00 and $100.00.");
}
}
</script>
Rendered html:
<input oninput="check(this)" type="text" data-val="true" data-val-number="The field Amount must be a number." data-val-required="The Amount field is required." id="Model_Amount" name="Model.Amount" value="97.95" data-val-range-min="50.00" data-val-range-max="100.00" data-val-range="Please enter an Amount between 50.00 and 100.00" class="form-control valid" placeholder="Amount" aria-required="true" aria-invalid="false" aria-describedby="Model_Amount-error">
It still inputs "Please enter Amount between 50.00 and 100.00"
input taghelper:
public override void Process(TagHelperContext context, TagHelperOutput output)
{
if (MinRange != null && MaxRange != null)
{
TagHelperAttribute minAttr = new TagHelperAttribute("data-val-range-min", MinRange);
output.Attributes.Add(minAttr);
TagHelperAttribute maxAttr = new TagHelperAttribute("data-val-range-max", MaxRange);
output.Attributes.Add(maxAttr);
TagHelperAttribute rangeAttr = new TagHelperAttribute("data-val-range", string.Format("Please enter a {0} between {1} and {2}", DisplayName, MinRange, MaxRange));
output.Attributes.Add(rangeAttr);
}
}
Any help is appreciated.
Thanks
NH
Changed your code with some comments added. Hope this helps
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<!-- Change minRange/maxRange to just min/max -->
<input asp-for="Amount" min="50.00" max="100.00" oninput="check(this)" />
<span id="display"></span>
</body>
<script type="text/javascript">
function check(input) {
//Get current input field value
var num = parseInt(document.querySelector('input').value);
//Check if num is < or > than input.min/max
if(num >= input.min && num <= input.max){
document.getElementById('display').innerText = '';
}else{
document.getElementById('display').innerText = 'Number must be between 50 and 100';
}
}
</script>
</html>
I am trying to make a search engine "comparer." By that I mean I am trying to make a local website that takes a search term and makes it into a clickable search engine URL (google, bing, yahoo, etc). I'm starting with Google. The search term needs to go after https://www.google.com/search?q= I don't know how to add the userSearch onto the end of the URL and make the URL into a clickable link. I'm not even sure that I'm gathering the search term correctly.
<!-- Enter search term -->
<form>
<fieldset>
<legend></legend>
<p>
<label>Search Here! (please, no spaces)</label>
<input type = "text"
id = "userSearch"
var = term
/>
</p>
</fieldset>
</form>
<var> gURL = 'https://www.google.com/search?q=' + userSearch </var>
<script type="text/javascript">
<var> searchTerm = "userSearch"; </var>
<var> gURL = "https://www.google.com/search?q=" + 'searchTerm'; </var>
document.getElementById("gURL").src = url;
</script>
<!-- Search URL results -->
<h3>Results</h3>
<fieldset>
<h4 style="text-align:left;">Google.com
If you can help, thank you. I appreciate it.
I used a button and Jquery - but is this what you are trying to do?
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#userSearch').click(function() {
var fromForm = "<br>" + '<a href="https://www.google.com/search?q="' +
$('#searchField').val() + ">" + 'https://www.google.com/search?q="' +$('#searchField').val() + '</a>';
$('#outPut').append(fromForm);
});
});
</script>
</head>
<body>
<br>
<!-- Enter search term -->
<form>
<fieldset>
<legend></legend>
<label>Search Here! (please, no spaces)</label> <input type='text' id='searchField' placeholder="Search">
</fieldset>
</form>
<button id='userSearch'>Search</button>
<br>
<div id='outPut'>
</div>
I was able to make my comparer using some different code using multiple guides, but I do really appreciate your feedback. I am putting my code up on a Weebly website ( Click here ) and my goal is to make it a tool that makes it easy to search from different engines. It is mostly just for personal use, but I have it set up where others could find it helpful and useful.
I used this code:
<!-- Enter search term -->
<div>
<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField" float: center; display: block;/>
</div>
<script type="text/javascript">
//creates a listener for when you press a key
window.onkeyup = keyup;
//creates a global Javascript variable
var inputTextValue;
function keyup(e) {
//setting your input text to the global Javascript Variable for every key press
inputTextValue = e.target.value;
//listens for you to press the ENTER key, at which point your web address will change to the one you have input in the search box
if (e.keyCode == 13) {
window.location = "https://www.google.com/search?q=" + inputTextValue;
}
}
</script>
Thank you for all your guy's help, and I will definitely continue learning.
jsp page:
<label>Script ID:</label>
<input name="scriptId" type="text"
ng-model="selectedScript.scriptId"
ng-disabled="true"
value="{{selectedScript.scriptId}}"
/>
<form>
<h1>Date Pannel</h1>
<fieldset>
Pick a start date:<br>
<input ng-disabled = "mode =='BROWSE'" type="date" id="datePickerStart" ng-model="parent.startDate" onchange="document.getElementById('datePickerEnd').setAttribute('min', document.getElementById('datePickerStart').value)"><br><br>
Pick an end date:<br>
<input ng-disabled = "mode =='BROWSE'" type="date" id="datePickerEnd" ng-model="parent.endDate" ><br><br>
<button ng-disabled = "mode =='BROWSE'" ng-click="setDates()"
>Set Dates</button>
</fieldset>
</form>
controller.js
$scope.parent = {startDate:''};
$scope.parent = {endDate:''};
$scope.selectedScript.startDate = null;
$scope.selectedScript.endDate = null;
$scope.setDates = function setDates() {
$scope.selectedScript.startDate = $scope.parent.startDate.getTime();
$scope.selectedScript.endDate = $scope.parent.endDate.getTime();
myAppFactory.setDates($scope.selectedScript.startDate, $scope.selectedScript.endDate, $scope.selectedScript.src).success(function(data) {
$scope.selectedScript.src=data;
});
}
That's all the code i need to get some stuff done...
Now I have a table on my jsp page...
<tr
ng-repeat="s in scripts
ng-click="selectScript(s, $index)"
ng-class="getSelectedClass(s)">
<td>{{s.scriptId }}</td>
<td>{{s.fileName }}</td>
</tr>
controller.js
$scope.selectScript = function(script, index) {
if ($scope.mode != 'BROWSE')
return;
$scope.parent.startDate = $scope.selectedScript.startDate; <-- this part
$scope.parent.endDate.setTime = $scope.selectedScript.endDate; <--and this
$scope.selectedScript = script;
$scope.selectedRow = index;
};
When I save the script, the data in the database has startDate and endDate
that works...
My problem is that selectedScript as a model, in the code above, don't has any value in startDate and endDate...it's null (but the fields exist, and the database has the data I need)
But I need somehow to make it possible that parent.startDate and endDate are bound to the selectedScript's startDate and endDate...
Btw, i 1st tried to make the ng-model of the datepicker like selectedScript.startDate, but that didn't work...
Later I found out that the datepicker has it's own scope, and that's causing my problems...at least I believe so.
I just hope that I have made myself clear...
Can you help me?
I think your issue is because when you retrieve the data from the database, it passes it as a string, which isn't a format that the datepicker can read.
Essentially what you need to do is parse it as a Date attribute, to do this you can do;
$scope.parent.startDate = new Date($scope.selectedScript.startDate);
$scope.parent.endDate = new Date($scope.selectedScript.endDate);
Use this in the relevant places to parse as a date, or you can set up a watch to do it for you whenever the value is changed;
$scope.$watch('parent.startDate', function(startDate){
$scope.parent.startDate = new Date($scope.parent.startDate);
});
You can only use $watch for single values, or you can watch the whole object as 'parent'.
Hope it helps!
I have the following error an simle "number" input field in Chrome (ver. 33 =>) and other webkit browsers
<input type="number" name="number">
Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input
element's type ('number') does not support selection.
I tested in FF & IE (10=>) and working well
I found the following issue in chromium project:
https://code.google.com/p/chromium/issues/detail?id=346270
any idea?
thank you!
Yes, this is an webkit bug, try this solution:
Jsfiddle demo
Code:
<div class="container">
<form role="form">
<div class="form-group">
<label for="tel">tel</label>
<input type="tel" class="form-control" id="tel" placeholder="tel"/>
</div>
</form>
</div>
<script>
$("#tel").mask("(99) 999-9999");
$("#tel").on("blur", function() {
var last = $(this).val().substr( $(this).val().indexOf("-") + 1 );
if( last.length == 3 ) {
var move = $(this).val().substr( $(this).val().indexOf("-") - 1, 1 );
var lastfour = move + last;
var first = $(this).val().substr( 0, 9 );
$(this).val( first + '-' + lastfour );
}
});
</script>
1d/2D Barcodes needs captured using cordless barcode scanner and transferred to Windows PC.
I looked into Motorola MC2180 mobile computer specifications.
It seems to have Windows CE 6 with RhoElements Webkit based browser and Datawedge application which transfers scanned barcodes to keyboard buffers.
Scanning application prototype using ASP.NET MVC4 is below.
This approach has the following issues:
After scanning barcode, user must press manually tab to move to next field.
Is there some barcode APIS which can used ? I havent found any documentations for this
for MC2180 .
View below looks ugly: it allows to scan fixed number codes, but user may wat to enter 1 .. 200 codes to single order. How to change it so that number of codes in not fixed ?
Should jQuery Mobile used to improve this or other way ?
Controller perfoms manual parsing of http POST buffer. Can this improved using ASP.NET MVC4 features ?
Which is best way to scan barcodes in cordless way and transfer them to PC using free
or shipped with scanner shoftware ?
Which device shuld be used ?
If there is better cheap device than MC2180 it can used.
View:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<form method='post' action='SaveOrder'>
Number <input name='orderno' type='text'/>
Date <input name='orderdate' type='date'/>
<input type="hidden" name="_rowdelimiter" />
Product1 <input name='orderno' type='text'/>
Quantity1 <input name='quantity' type='text'/>
<input type="hidden" name="_rowdelimiter" />
Product2 <input name='orderno' type='text'/>
Quantity2 <input name='quantity' type='text'/>
<input type="hidden" name="_rowdelimiter" />
Product3 <input name='orderno' type='text'/>
Quantity3 <input name='quantity' type='text'/>
...
<input type='submit' value='Save order'/>
</form>
</body></html>
Controller:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult SaveOrder() {
var form = ControllerContext.HttpContext.Request.Form;
var orderDetails = new List<OrderDetails>();
var order = new Order();
OrderDetails row = null;
bool inheader = true;
foreach (var key in form.AllKeys)
{
if (key == "_rowdelimiter")
{
if (row != null)
orderDetails.Add(row);
row = new OrderDetails();
inheader = false;
continue;
}
if (inheader)
{
SetValue( order, key, HttpUtility.HtmlDecode(form[key]) );
continue;
}
SetValue( row, key, HttpUtility.HtmlDecode(form[key]) );
}
orderDetails.Add(row);
EntityManager.SaveOrder( order, orderDetails );
return ContentResult() {Content="Order saved" } ;
}
static void SetValue( object entity, string propertyName, string propertyValue ) {
PropertyInfo p = entity.GetType().GetProperty(propertyName);
p.SetValue(this, propertyValue, null);
}
You'd be better off using jQuery in the page to handle the scanned barcode. It could take each code & add it to an array. This array could then be listed on screen. When the operator has scanned some number of codes, they could click a button to submit the codes to the server. Your app would appear to be much more responsive that way, rather than submitting after each scan.