We Keep Coding

Open HTML5 date picker inside input box click

I'm trying to open a HTML5 date picker on click inside an input text box using the below code, but it is not working as expected.
However, clicking on the calendar icon does open the date picker (by default). This is inside my Angular 7 application.
Fiddle: https://jsfiddle.net/mailmrmanoj/rL1ecp9w/5/
HTML:
<input
type="date"
name="startDate"
id="datePick"
(click)="openDP()"
class="input--small"
/>
Typescript:
declare var $;
openDP() {
$('#datePick').datepicker('show');
}
Is there anything wrong with my code?
Reference for the date picker: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_date

Try with input type="text" instead of type="date" and on focus event call function "openDP".
<input name="date" type="text" (focus)="focusFunction()" (focusout)="focusOutFunction()">
Note: You can also use angularjs-datepicker instead of default HTML5 date picker as type="date" is not supported in Safari or Internet Explorer 11 (or earlier).

How to use on-change event for textfield to make it empty if min-date condition fails

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

How can I get a form input field using jQuery-UI datepicker to use the year from another field?

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

Auto complete input type date picker

Today my challenge is this:
I have two inputs and a button:
Both inputs are date picker types. So When I pick a date from first input (for example I choose 11/19/2013) I want the second input to auto-complete to a one day later value. So the second one must pick 11/20/2013 automatically when I click the first input. I use these inputs to calculate a price(in my Magento store).
Below is the structure of my html (just a skeleton)
<div class="select_grid">
<input type="text" placeholder="mm/dd/yyyy" autocomplete="off" name="from" id="from" class="hasDatepicker">
<input type="text" placeholder="mm/dd/yyyy" autocomplete="off" name="to" id="to" class="hasDatepicker">
<input type="submit" name="Submit">
</div>

If you're happy to use JQuery You want to set something to the onChange handler of the from field.
Something like:
onChange="$('#to').attr('value',$(this).val());"
You'll have to modify it slightly. That syntax as it stands will just copy the value across. You'll need to use the javascript or jQuery date function to increment by one day/week etc.
An example of doing this is in this overflow question: Add +1 to current date

How to show a date only upto today's date in HTML?

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'});
});