We Keep Coding

HTML5 - Is there a way to highlight a specific day? (thought javascript)

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.

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

Datetime range selection javascript

I need to create a datetime range selector at the top of my dashboard such that, every chart and all text elements below gets filtered for the selected time period range.
So I was looking at this great solution by keith.
https://github.com/keithhackbarth/jquery-datetime-picker
I am a beginner in JS and there is nothing in the index.html for the above datetime picker.
There are only 4 JS libraries, which is too much code for a beginner.
I basically want to load the datetime as is there in my data only, so which part of code snippet do I start modifying?
Eg: The first column in my data - datetime is from 2014-03-01 to 2014-03-14
So the datetime picker should show exactly that after reading my data(column here)
index.html code :
<input type="text" class="dt_date_start"/>
<input type="text" class="dt_time_start" /> .........TO............
<input type="text" class="dt_date_end" />
<input type="text" class="dt_time_end" />
These are the four date ranges(classes) defined which are in datepair.js.
How do I go about editing datepair.js such that it loads the dates that I only want, which is present in the data.

Reading an HTML5 date in JavaScript

I have an input field in my project that uses the HTML5 date input type. This is saved to my database in the format YYYY-MM-DD. In another page, I access this date from a Twig and print it in a table. This prints in the format YYYY-MM-DD. So far so good. However, when I try to use an alert box to print the same date, JavaScript parses the date incorrectly to just show the year (and the wrong year at that).
Input field (as part of a bigger "make plan" input form):
<input type="date" id="start" name="startdate" class="form-control" required="required"/>
Output:
<td>{{plan.startdate}}</td> <!-- This prints correctly YYYY-MM-DD -->
<td>
<script>
alert({{plan.startdate}}); <!-- This alerts incorrectly YYYY -->
</script>
</td>
I can't really see the correlation between the dates either.
2014-03-27 gives '1984' in the alert box
2014-03-20 gives '1991' in the alert box
2014-04-01 gives '2009' in the alert box
I've tried to parse the date using the JavaScript, but I'm not really sure how to parse an incorrect year.

It is being evaluated as an expression instead of a date string. If you put the date in quotation marks then it should be fine. See the following
<td>{{plan.startdate}}</td> <!-- This prints correctly YYYY-MM-DD -->
<td>
<script>
alert("{{plan.startdate}}"); <!-- This alerts incorrectly YYYY -->
</script>
</td>

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