i have in Html :
<input type="datetime-local" step=1 ng-model="end_date" required />
and in code (angularJs)
$scope.end_date = new Date('2018-11-10 10:11:15');
and the output, no matter what i do, is '2018-11-10 10:11:00'.
I really need the seconds.
What can i do?
Thx.
For the output, just display it differently with a filter. Such filter already is in AngularJS, it's called date.
Simply select the format that you need (in your case the seconds would be just 's'). Here is a demo:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.end_date = new Date('2018-11-10 10:11:15');
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="datetime-local" step=1 ng-model="end_date" required />
<hr>
{{end_date | date:"s"}}
</div>
You can use very handy directive : https://github.com/eight04/angular-datetime
and then :
<input datetime="HH:mm:ss" step=1 ng-model="myDate" required />
plunker: http://plnkr.co/edit/iOs0mO4ZuTfmm00HGThp?p=preview
you should be able to make use of Date filter in angularJs.
<span>{{end_date | date:'MM/dd/yyyy HH:mm:ss'}}</span>
It will display the date with time:min:second
If you just want the time use
<span>{{end_date | date:'HH:mm:ss'}}</span>
Related
I want to refine my value today but i cant set. Can help me!
<input type="date" name="start" value="2022-12-25"/>
<input type="date" name="end" value="2022-12-25"/>
I want to refine my value today but i cant set. Can help me!
You can try to set the default date with js:
<input type="date" name="start" />
<input type="date" name="end" />
#section Scripts{
<script>
$(function(){
document.getElementsByName('start')[0].valueAsDate = new Date();
document.getElementsByName('end')[0].valueAsDate = new Date();
})
</script>
}
result:
the information you provided is not sufficient. Provide which language/technology you are working, i figured it out that you are looking for help in Microsoft technology stack.
Coming to the point you want to print/show Current Datetime value, for that, According to me Create variable storage Current Datetime and bind it to the Html
for Ex.
var CurrentDateTime = DateTime.now;
this will set Current date time to the variable and in HTML MVC if you are using razor view / pages
you just need to bind that value to it.
there are multiple ways for that.
but here i would like to GO with ViewBag approach
you can do like following
ViewBag.CurrentDatetime = DateTime.Now;
And in your UI cshtml file
retrieve that stored value from ViewBag like following
#{
var CurrentDatetime = ViewBag.CurrentDatetime;
}
<input type="date" name="end" value=#CurrentDatetime/>
Note: If you not find this answer Helpful, i am requesting you to Provide some Detailed and precise Explanation regarding what you exactly looking for.
Thanks.
I am a bit new to Angularjs. In Chrome, for number type input fields, pressing on up and down key arrow increases/decreases the entered value. It needs to be disabled. Any ideas or help in how it can be done?
I tried using jQuery: $(":input").bind('keyup mouseup', function () but the ng-model binding is not updating. Might be because the angular js doesn't recognize the change made with jQuery.
Model won't change inside jquery event.Use ng-keypress event in angularjs
If you need to disable it permanently better do it another way, use regular text input but restrict other chars than numbers.
<input type="text" ng-pattern="/^[0-9]*$/" />
Check out ngPattern docs
You can use ng-model directive to access the value of input in controller, and ng-disabled directive to control an input state. Hopefully the following demo may be of some help:
var app = angular.module('demo', []);
app.controller('DemoCtrl', function($scope) {
$scope.myNumber = 0;
$scope.isDisabled = false;
$scope.toggle = function() {
$scope.isDisabled = !$scope.isDisabled;
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="DemoCtrl">
<input type="number" ng-model="myNumber" ng-disabled="isDisabled"/>
<button ng-click="toggle()">Disable/Enable</button>
</div>
</div>
I am using below HTML tag:
<input type="time" />
In Chrome, Its showing PM/AM format, can we restrict to display 24 format always.
I dont want to use HTML5 tag
As stated in this answer not all browsers support the standard way. It is not a good idea to use for robust user experience. And if you use it, you cannot ask too much.
Instead use time-picker libraries. For example: TimePicker.js is a zero dependency and lightweight library. Use it like:
var timepicker = new TimePicker('time', {
lang: 'en',
theme: 'dark'
});
timepicker.on('change', function(evt) {
var value = (evt.hour || '00') + ':' + (evt.minute || '00');
evt.element.value = value;
});
<script src="https://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>
<link href="https://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css" rel="stylesheet"/>
<div>
<input type="text" id="time" placeholder="Time">
</div>
More info about the time input can be found on MDN Web Docs
<!DOCTYPE html>
<html>
<body>
Time: <input type="time" id="myTime" value="16:32:55">
<p>Click the button to get the time of the time field.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myTime").value;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
I found that by setting value field (not just what is given below) time input will be internally converted into the 24hr format.
You can't do it with the HTML5 input type. There are many libs available to do it, you can use momentjs or some other jQuery UI components for the best outcome.
In my case, it is taking time in AM and PM but sending data in 00-24 hours format to the server on form submit. and when use that DB data in its value then it will automatically select the appropriate AM or PM to edit form value.
I want to ask how can I round the numbers inside an input, using angularjs
<input type="number" ng-model="value1"/>
I want the number to show 2 decimals with rounding.
Can you help please
Use $watch in this case will be more appropriate, It will tend to format value on initial load also.
Markup
<input type="number" ng-model="value1"/>
Code
$scope.$watch('value1',function(newVal, oldVal){
if((newVal != oldVal))
$scope.value1 = newVal? newVal.toFixed(2): 0;
});
You can use ng-change:
<input type="number" ng-model="value1" ng-change="roundNumber()" />
$scope.roundNumber = function(){
$scope.value1 = Math.round($scope.value1 * 100) / 100;
};
//call function once at bottom of controller for initial run
$scope.roundNumber();
Or create a directive to do it if this is going to be a common functionality you want
I'd like to change the font size into an <input type="text" size="10> dynamically to fill the box. Here are some examples:
With less chars:
With more chars:
Is it possible?
I know JQuery and JavaScript weren't mentioned or tagged, but what you want will need JavaScript, and the JQuery.InputFit plugin will do exactly what you want:
<input type="text" name="younameit" id="input">
<script type="text/javascript">
$('input').inputfit();
</script>
I'm a little late to this question, but I want offer a solution in case you don't want to implement jquery just for this:
<p>A function is triggered when the user releases a key in the input field. The function transforms the characters size.</p>
Enter your name: <input type="text" id="fname" onkeyup="myFunction()">
function myFunction(){
var x=document.getElementById("fname");
var initialSize=25-x.value.length;
initialSize=initialSize<=10?10:initialSize;
x.style.fontSize = initialSize + "px";
}
check out this jsfiddle