Is there a way to do, with no jquery, something like:
<input type="date"/>
that opens a select date in textbox but for time picker? i just can't figure it out a way.
It is exactly what this input does, but with hours and minutes, not with days, months, years
Thanks a lot! :)
There is a 'time' input type but it does not have much browser support at the moment.
From w3schools example
<form action="/action_page.php">
Select a time:
<input type="time" name="usr_time">
<input type="submit">
</form>
will be received as military time
Related
I'm working with HTML5 elements on my webpage. By default, on the click of the date picker icon, the current date is highlighted.
<input id="dateField" type="date" name="date-field"/>
How can I configure it to highlight a specific date instead of the current year? say 1st Jan of the current year?
I tried to do this
document.getElementById('dateField').defaultValue = '2021-01-01'
and
<input id="dateField" type="date" name="date-field" value="2021-01-01"/>
but this will not only highlights but also selects the date.
You can use the value attribute like this:
<input id="dateField" type="date" name="date-field" value="2017-06-01"/>
You can learn more about this here.
I am wanting to create an alarm clock system that creates multiple alarms based off the first one.
So, if the user put in "10:00" I want to display that in an array, then +6 hours (new time 16:00) and push that to an array, then another 4 hours (20:00) and push that to an array.
The issue is, I am using an input type "time" and, with that it is not as simple as "plus 60" or whatever. I am wondering what the correct way to do this would be?
Maybe there is a simple way to "add time" to a time type, or if there is another way around it then convert it back to time later?
Here is my input form snippet -
<form #submit.prevent="Calculate">
<input type="time" class="timepicker" name="timepicker" min="00:00" max="23:59" v-model="time" required>
<button>Submit</button>
</form>
As for the methods, they are currently just console.log as I cannot figure it out.
Thanks!
I had an input field with type="datetime" where it has min-date condition as todays date.The flow is, if the date is valid,then submit button is enabled or else it will be in disabled state.Its working fine.
But now if the user selects the date which is invalid(old date),the date will be displayed in text box but the button will be disabled.
I want to use ng-change such that if user selects invalid date(old date),on-change event should make the text field as empty and want to display error message..How can we get this ng-change working
Html:
<input class="form-control" type="datetime" date-time auto-close="true" view="date"
min-date="{{today}}" min-view="date" maxlength="10" format="dd/MM/yyyy"
ng-model="$ctrl.newClient.DateInput" required="true"
ng-change="$ctrl.checkdate">
controller:
$scope.today= new Date().toISOString().split('T')[0];
this.checkdate=function(){
};
Can someone help.Thanks
You can use angular-pikaday, it's easier to manage dates with this lib, so the user can select the date and you can manage it after the selection on a calendar. With pikaday you can set the min selectable date, so you can delete your checkdate function.
Read also How can we make all the past dates in the calendar unselectable? . Maybe it's another solution :)
A more user friendly solution is using datetime-local and min attribute which does not let the user to select a date before that.
Example:
<input type="datetime-local" id="exampleInput" name="input"
ng-model="example.value" min="2017-01-01T00:00:00" />
Working Plunkr
I have a form that takes a user's date of birth. The problem with just using a datepicker popup to get year, month, and date, is that it can take forever to go through years, as the interface only goes month by month.
So, the current solution is to have one field for the year, using HTML5 number field, so a user can easily scroll through years, and then have another field that uses a datepicker popup to pick the month and day. People seem to like picking dates with the calendar popup.
In the form I have, the user can select the year and the month/day separately, and that's all fine. The datepicker defaults to showing the months and dates for the current year, but in a sense, this doesn't matter. We don't need to record what day of the week any one date lands on, so it doesn't matter if they select January 27th, for example, from 2014, even if their year of birth is 1980, because what we get back in the post data is 1980 and 01-27, which we combine to 1980-01-27, and we store that in the database.
Even though it's working, I'm pedantic, and it bugs me to show the calendar from the current year even through the user may have entered a different year. So, what I want to do is make it so that the year in the datepicker changes to match the year in the year field.
I'm stuck because the code for datepicker is a bit obscure to me, and I'm not sure how to take the value of the year field and apply it. I think what I need is an onchange Javascript event in the year field, but what function would I apply so as to make the datepicker adjust accordingly?
JSFiddle is here. And this is the code:
<form>
<ul>
<li>
<label for="birthday">Date of birth</label>
<input name="birthyear" type="number" min="1920" max="2002" step="1" value="1980" class="number" required />
<input name="birthday" type="date" id="birthday" placeholder="MM-DD" required />
</li>
</ul>
</form>
<script type="text/javascript">
if ( $('#birthday')[0].type != 'date' ) $('#birthday').datepicker({ dateFormat: 'mm-dd' });
</script>
This may not be EXACTLY what you're trying to do, but it certainly fixes your problem of having to scroll through months and months trying to achieve the correct year by changing it to a dropdown.
Datepicker changeYear option
HTML
<form>
<ul>
<li>
<label for="birthday">Date of birth</label>
<input name="birthday" id="birthday" placeholder="mm/dd/yyyy" required />
</li>
</ul>
</form>
JS
$(function () {
$('#birthday').datepicker({
dateFormat:'mm/dd/yy',
changeYear:true,
yearRange:'c-80:c+0'
});
});
Resulting Datepicker Dialog Box
I have a date input box like this:
<input type="date" id="start_date" name="start_date" class="text_search" />
This displays the date box up to anywhere in the past and future date. Past date is fine but I don't want to show the future date. For example if today's date is May 31, 2013, user can only choose the date upto May 31, 2013. How can I do that?
Use the max attribute as in <input type="date" name="bday" max="1979-12-31">. You can use javascript to set this attribute to today or set it on the server side
are you using any jquery ui plugin ? if yes then use following code,
$(function() {
$("#start_date").datepicker({maxDate: '+0d'});
});