I am developing webpage in which i have used text field and set it's type as time. But it is giving me 00:00 AM/PM format.
I want 00:00:00 as time format.
use jquery timepicker
$(function(){
$('#example').timepicker();
});
check this link
Just add the step attribute to the element. Note: You might want to implement your own time type if you need cross-browser support. input<type=time> does not work in Safari.
<input type="time" step="1">
In case you need own implementation, here it is. Requires no third part library. To access the value just get the value of the timepicker div
using document.getElementById("timepicker").getAttribute("data-value");
function updateTime()
{
function getFormattedValue(value)
{
return value>9?value:"0"+value;
}
var hour = document.getElementById("hour").value,
minute = document.getElementById("minute").value || 0,
second = document.getElementById("second").value || 0;
var time = getFormattedValue(hour)+":"+getFormattedValue(minute)+":"+getFormattedValue(second);
var timeelem = document.getElementById("timepicker");
timeelem.setAttribute("data-value", time);
console.log(time);
console.log(timeelem.getAttribute("data-value"));
}
<div id="timepicker" data-value="">
<input id="hour" type="number" max="23" min="0" onchange="updateTime()">
<input id="minute" type="number" max="59" min="0" onchange="updateTime()">
<input id="second" type="number" max="59" min="0" onchange="updateTime()">
</div>
Related
The question might suggest that I need onchange, which is not the case. Compare these two snippets:
var slider = document.getElementById("slider")
slider.onchange = function() {
var currentVal = slider.value
document.querySelector("b").innerText = "The current value is " + currentVal.toString()
}
<input type="range" id="slider" min="1" max="10" step="1" , value="4">
<br>
<b>The current value is 4</b>
var slider = document.getElementById("slider")
slider.onmousemove = function() {
var currentVal = slider.value
document.querySelector("b").innerText = "The current value is " + currentVal.toString()
}
<input type="range" id="slider" min="1" max="10" step="1" , value="4">
<br>
<b>The current value is 4</b>
The upper one uses onchange and only updates once the mouse is released.
The lower one uses onmousemove and updates every time the mouse gets moved over the slider. However, I don't think that is the most memory saving method. It also doesn't change when using the arrow keys unless the mouse is moved over the slider.
Is there a certified or at least better way of doing what the lower one achieves?
Just use oninput Event, it will call when user slides on modern browsers.
var slider = document.getElementById("slider")
slider. oninput = function() {
var currentVal = slider.value
document.querySelector("b").innerText = "The current value is " + currentVal.toString()
}
<input type="range" id="slider" min="1" max="10" step="1" , value="4">
<br>
<b>The current value is 4</b>
After selecting date time from owl date time picker event is not firing.
<label style='margin-right:5px ;margin-left:210px'>
Date Time:
<input [owlDateTimeTrigger]="dt" [owlDateTime]="dt" class="form-control" placeholder="Date time Picker" (change)="getScheduledTime($event)">
<owl-date-time #dt ></owl-date-time>
</label>
Let Try this once, It's working fine tested,
Html File,
<input placeholder="Date Time:"
[(ngModel)]="dateTime"
[owlDateTimeTrigger]="dt" [owlDateTime]="dt"
(ngModelChange)="onChange($event)" <!--here added -->
>
Typescript,
onChange(data) {
alert("Triggered" + data);
console.log("Triggered", data);
}
Screenshot,
I hope its solve your problem.
Thanks,
Muthukumar
you can use ngModelChange for this
(ngModelChange)="getScheduledTime($event)"
I've tried many ways to validate the date and time with Javascript functions but none seem to work. I'd like to alert users when their date input is of a past date whereas the time start cannot be the same as time end and it cannot be later than time end.
My HTML codes:
<p>
<label> Date:
<input type="date" id="date" name="date" required />
</label>
</p>
<p>
<label> Time start:
<input type="time" id="timeStart" name="timeStart" required />
</label>
</p>
<p>
<label> Time end:
<input type="time" id="timeEnd" name="timeEnd" required />
</label>
</p>
could be you should convert you value in a proper date
eg:
var d = new Date("03/25/2015");
var n = d.getMonth();
As you can only store strings in localstorage so when you tried to
parse the JSON to get d, it turned to be a string. So you need to
convert it into Date Object before doing any operations on it as
mentioned by scaisEdge
var date = new Date(d);
var monthname = month[date.getMonth()];
Refer https://jsfiddle.net/Ltufu0aj/
I'm using AngularJs datepicker and being stuck at this problem for a while now.
In my app, users can use the datepicker's calendar to select date, or they can click "This Month" to automatically set the date to this month.
Clicking on This Month button will activate a model change in the controller, just like this:
if (when == 'this_month') {
$scope.date_from = Date.today().moveToFirstDayOfMonth().toString('dd-MM-yyyy');
$scope.date_to = Date.today().moveToLastDayOfMonth().toString('dd-MM-yyyy');
}
The HTML
<input name="date_from" placeholder="Choose Date" class="input-small filter-element datepicker-dmy" data-date-format="dd-mm-yyyy" type="text" ng-model="date_from">
<input name="date_to" placeholder="Choose Date" class="input-small filter-element datepicker-dmy" data-date-format="dd-mm-yyyy" type="text" ng-model="date_to">
It works just fine for everything: the date gets changed, the text input shows this month's date, etc.
However, the only thing wrong is the calendar itself not being up-to-date with the date change (i.e. still showing the view of whatever the month it was selected before that)
For example, in this screenshot, when clicking on "Last Month", the calendar still shows This Month view.
How should I tap into the DatePicker's calendar then?
HTML
<input name="date_from" ng-change = getDateFrom(date_from) placeholder="Choose Date" class="input-small filter-element datepicker-dmy" data-date-format="dd-mm-yyyy" type="text" ng-model="date_from">
<input name="date_to" placeholder="Choose Date" class="input-small filter-element datepicker-dmy" ng-change=getDateTo(date_to) data-date-format="dd-mm-yyyy" type="text" ng-model="date_to">
Angular JS
$scope.getDateTo = function (date_to) {
$scope.dateTo = date_to;
console.log(date_to);
}
$scope.getDatefrom = function (date_from) {
$scope.dateFrom = date_from;
console.log(date_from);
}
Other way
$scope.$watch('date_form', function (date_form) {
$scope.dateForm = date_form;
});
$scope.$watch('date_to', function (date_to) {
$scope.dateTo = date_to;
});
I have this dojo TimeTextBox in the HTML:
<input type="text" id="startTime" value="" dojoType="dijit.form.TimeTextBox"></input>
and this JS code:
dojo.addOnLoad(
function(){
var sartTime = dijit.byId('startTime');
}
)
So how do I format the time to look like HH:mm am|pm
Use the constraints.timePattern attribute:
<input type="text"
id="startTime"
value=""
dojoType="dijit.form.TimeTextBox"
constraints="{timePattern:'h:mm a'}" />
You'll still get a Date object when you ask the TimeTextBox for its value though. To actually get a string on the format HH:mm am|pm| you have to convert it manually afterwards.