I want to apply a condition on selected date from date picker in html5. i.e. if i have selected jan month and click on submit button it will go to next page and show u were born in jan month.
<form action="new.html">
<input type="date"> <input type="submit" value="Submit" />
</form>
Have you considered using jquery's datepicker? It will provide your end user a much better experience with the ability to dropdown a calendar and also works in all browsers. Here is the code to do so:
$("#datepicker").datepicker(
{
onSelect: function (arg) {
var date = new Date(arg);
// The below code give the index of the month like Jan as 0, ... ,Dec as 11
var month = date.getMonth();
}
}
And in your body tag,
<input type="text" id="datepicker" />
For more info on the jquery datepicker, refer to this link: http://docs.jquery.com/UI/Datepicker
Here are some good faqs on datepicker if you decide to use it: http://jqfaq.com/category/widgets/datepicker/
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 have an edit page that wants to edit the date using bootstraps-datepicker. It works nicely. But the problem is that when I fetch data from back-end by value tag in the input field the edit date starts from the year 1931 instead of 2020 (current year). I am using two script
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="{{asset('/admin/js/formpickers.js')}}"></script>
input field
<div id="datepicker-popup" class="input-group date datepicker">
<input type="text" name="date" class="form-control" value="{{$coupon->expiry_date}}">
<div class="input-group-addon input-group-text">
<span class="mdi mdi-calendar"></span>
</div>
</div>
if I remove value tag then it starts from 2020 but by use that I have to fetch previous given date from back-end. Can any one help me?
In value tag you need to give a Date object instead of a standard date e.g 10/12/2020
So, to convert your string value to Date object, you should try splitting your $coupon->expiry_date value to Date obj like this:
new Date(year,month,date)
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 2 dates : StartDate and EndDate using angular-ui-bootstrap datepicker
When I choose a startDate (greater than today date) I set the min-date of EndDate datepicker at the startDate. So all dates <= startDate are disabled.
But the Today button in popup of EnDate can set today date which is not conform business rule.
Is there a way to disable the the Today button without disabling all the button-bar?
Sample HTMl for that:
ng-model , ng-change and min-date
<input type="text" uib-datepicker-popup="dd/MM/yyyy" ng-model="personForm.StartDate" name="startDate" ng-change="myStartDateChange()" />
<input type="text" uib-datepicker-popup="dd/MM/yyyy" min-date="endmindate" ng-model="personForm.EndDate" name="endDate" />
add function in your controller:
$scope.myStartDateChange = function () {
$scope.endmindate= $scope.personForm.StartDate;
}
you should update ui-bootstrap version to 0.14.0 or laster.
it could be fix this bug.
https://github.com/angular-ui/bootstrap/pull/4199
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'});
});