We Keep Coding

Unable to set min input hour and time to tomorrow 16h on <input type="datetime-local"> [duplicate]

I am using Modal for reminder date for task. The current date and the days before it has to be disabled so that the User can select the pick-up date starting next day inorder to Mark reminder with his specified task.
for this I am using input type :
<input type="datetime-local" class="form-control" autocomplete="off" id="actionreminderdate" />
If I use below java script it works for input type "Date" But not for Datetime-local.
$(function(){
var dtToday = new Date();
var month = dtToday.getMonth() + 1;
var day = dtToday.getDate();
var year = dtToday.getFullYear();
if(month < 10)
month = '0' + month.toString();
if(day < 10)
day = '0' + day.toString();
var maxDate = year + '-' + month + '-' + day;
/*alert(maxDate);*/
$('#actionreminderdate').attr('min', maxDate);
});
Can you help me with it?

You can set min and max values on the input field:
<input type="datetime-local" id="dateInput">
$(document).ready(function(){
elem = document.getElementById("dateInput")
var iso = new Date().toISOString();
var minDate = iso.substring(0,iso.length-1);
elem.value = minDate
elem.min = minDate
});
Get the current time in a recognised ISO format (you have to trim the zone data off the end, which is annoying), then set that as the input value and the input min.
https://jsfiddle.net/w8qgj543/24/

How to highlight custom date in bootstrap date picker

Im using angularjs for my project and bootstrap date-picker for select date.
In my project there is 2 input for select From date and To date. For the From date can select only today date, for the To date calculation i have add 1 year for from date using JavaScript and bind to To Date input. Data binding part is working fine. but when i click on To date its not show highlighted date in date-picker. Can i know how to highlight Today.
These are the option currently im used.
autoclose: true,
todayHighlight: true

In HTML You can use this.
<input name="dateInput" type="date" ng-model="TodayDate"/>
And In Controller you can get new Date(), So You can Assign the date to the ng-model.
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth() + 1;
if (month < 10){
month = "0" + month;
};
if (day < 10) {
day = '0' + day;
}
$scope.TodayDate = year + "-" + month + "-" + day;

How do I disable dates till current date? For input Type Datetime-local

I am using Modal for reminder date for task. The current date and the days before it has to be disabled so that the User can select the pick-up date starting next day inorder to Mark reminder with his specified task.
for this I am using input type :
<input type="datetime-local" class="form-control" autocomplete="off" id="actionreminderdate" />
If I use below java script it works for input type "Date" But not for Datetime-local.
$(function(){
var dtToday = new Date();
var month = dtToday.getMonth() + 1;
var day = dtToday.getDate();
var year = dtToday.getFullYear();
if(month < 10)
month = '0' + month.toString();
if(day < 10)
day = '0' + day.toString();
var maxDate = year + '-' + month + '-' + day;
/*alert(maxDate);*/
$('#actionreminderdate').attr('min', maxDate);
});
Can you help me with it?

You can set min and max values on the input field:
<input type="datetime-local" id="dateInput">
$(document).ready(function(){
elem = document.getElementById("dateInput")
var iso = new Date().toISOString();
var minDate = iso.substring(0,iso.length-1);
elem.value = minDate
elem.min = minDate
});
Get the current time in a recognised ISO format (you have to trim the zone data off the end, which is annoying), then set that as the input value and the input min.
https://jsfiddle.net/w8qgj543/24/

How to change current month date to another month

I want to select any date and convert it to same date of next upcoming month. For example- I select 1st jun 2014 then it show 1st july 2014 and so on..
Fiddle
HTML
<input type='text' id='txtDate' readonly='true' />
<input type='button' id='btnConvert' value='Convert' /><br/>
Current Date : <span id='spnCurrentDate'></span><br/>
Next Month Date : <span id='spnNewDate'></span>
JS
$("#txtDate").datepicker({
changeMonth: true
});
$("#btnConvert").click(function(){
$("#spnCurrentDate").html($("#txtDate").val());
$("#spnNewDate").html($("#txtDate").val());

If you are just asking how to add one month to a Date object, you can't just add one to the month as 2014-01-31 + 1 month -> 2014-02-31 which is converted to 2014-03-03.
So if you roll over to the following month, you probably want to set the day to the last of the previous month:
function addOneMonth(date) {
var o = new Date(+date);
date.setMonth(date.getMonth() + 1);
// If have rolled over an extra month, set to last
// day of previous month
if (date.getDate() != o.getDate()) {
date.setDate(0);
}
return date;
}
addOneMonth(new Date(2014,0,31)); // 2014-02-28
or not…

DEMO here
var date1 = new Date();
date1.setMonth(date1 .getMonth() + 1);
now date1 is an object holding a date which is 1 months later
If you want to set it to the jQuery UI DatePickers, you can do this
$("#txtDate").datepicker({
changeMonth: true
});
$("#btnConvert").click(function(){
var date1 = new Date($("#txtDate").val());
date1.setMonth(date1 .getMonth() + 1);
$("#txtDate").datepicker("setDate", date1 );
});

Try This Demo : http://jsfiddle.net/PQfDc/151/
$("#txtDate").datepicker({
changeMonth: true,
minDate:'0',
onClose: function( selectedDate ) {
var d = new Date(selectedDate)
d.setMonth(d.getMonth() + 1);
$("#txtDate").datepicker("setDate", d );
$("#spnSelectedDate").text(selectedDate);
$("#spnNewDate").text($('#txtDate').val());
}
});
$("#txtDate1").datepicker({
changeMonth: true,
minDate:'0'
});
$("#btnConvert").click(function(){
var d1 = new Date($("#txtDate1").val());
var date = d1.getDate();
var month = d1.getMonth()+1;
var year = d1.getFullYear();
var newDate = month + "/" + date + "/" + year
$("#spnSelectedDate1").text($("#txtDate1").val());
$("#spnNewDate1").text(newDate);
});

HTML5 datepicker prevent past dates [duplicate]

This question already has answers here:
Disable certain dates from html5 datepicker
(6 answers)
Closed 9 years ago.
I am working on a website for booking movie tickets. What should I set the min attribute to, to prevent past dates in the HTML5 datepicker? (I do not want to use PHP solution mentioned here.)
Is there a pure HTML5/Javascript solution for this?

When the document loads have the date input disabled. Run an onload function that inserts today's date into the min field in the required format.
function onLoad() {
var input = document.getElementById("dateField");
var today = new Date();
// Set month and day to string to add leading 0
var day = new String(today.getDate());
var mon = new String(today.getMonth()+1); //January is 0!
var yr = today.getFullYear();
if(day.length < 2) { day = "0" + day; }
if(mon.length < 2) { mon = "0" + mon; }
var date = new String( yr + '-' + mon + '-' + day );
input.disabled = false;
input.setAttribute('min', date);
}
document.addEventListener('load', onLoad, false);
<body>
<input id="dateField" type="date" disabled />
</body>
Here it is in a fiddle: http://jsfiddle.net/tj9Xh/2/

try this:
<input id="dateField" type="date"/>
var dt= new Date();
var yyyy = dt.getFullYear().toString();
var mm = (dt.getMonth()+1).toString(); // getMonth() is zero-based
var dd = dt.getDate().toString();
var min = yyyy +'-'+ (mm[1]?mm:"0"+mm[0]) +'-'+ (dd[1]?dd:"0"+dd[0]); // padding
alert(min);
$('#dateField').prop('min',min);