How to highlight custom date in bootstrap date picker - javascript

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;

Related

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 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 convert a date format in semnatic-UI-Calendar?

I am developing a web application where I am using this module as a datepicker calendar:
https://github.com/mdehoog/Semantic-UI-Calendar
By default settings, when I select a date, it is input in the following format : 'October 12, 2016'
I want the selected date to be input in the following format '2016-10-12'
With reference to its API, I am using the following javascript code:
<script>
$(document)
.ready(function() {
$('.date_selecter').calendar({
type: 'date'
});
})
;
</script>
Does anyone know how to get the date in the format of 'yyyy-mm-dd'?
You can use the onChange event for the calendar instead of reading the value from the text field - this will give you a JavaScript Date object which you can then format yourself.
$(document).ready(function() {
$('.date_selecter').calendar({
type: 'date',
onChange: function(date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
if (month < 10) {
month = '0' + month;
}
if (day < 10) {
day = '0' + day;
}
// everything combined
console.log(year + '-' + month + '-' + day);
}
});
});

how to set today's date as default and will change everyday in INTEL XDK?

I'm working on an application that will have an input field as DATE. Which changes daily,
Based on the date the data will be displayed.
I got the solution to my problem in
HTML5 Input Type Date -- Default Value to Today?
this discussion .
But when i tried to code in intel XDK .its not displaying todays date . Here is the code.
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;
var today = year + "-" + month + "-" + day;
document.getElementById("theDate").value = today;
<input type="date" id="theDate">
I have tried same code in my project . But it gives result like
Thanks in advance.....
Moment.js is very helpful Moment.js helped me. Thanks for your replies .. :)
First import Moment.js file into your code.
document.getElementById('today').value = moment().format('YYYY-MM-DD');
Use the above piece of code in the separate function where the page gets automatically loaded.
Thanks for replies.

How to set 1st date and last date of the month on Bootstrap date?

I am using bootstrap date-picker on HTML form
<script>
$(document).ready(function() {
$('.datepicker').datepicker({
autoclose: true,
});
});
Now i have two date fields on my form called start-date and end-date. I want to set start-date to be the 1st day of the month and end -date to be the last date of the month . Is it possible to set it on Bootstrap date-picker ? sample code will be appreciated.
var dateToday = new Date();
var fromDate = (dateToday.getMonth() + 1) + "/01/" + dateToday.getFullYear()
var toDate = (dateToday.getMonth() + 1) + "/" + dateToday.getDate() + "/" + dateToday.getFullYear()
see more of my answer here. JQuery DatePicker on ASP.net
or this
var month = 0; // January
var d = new Date(2008, month + 1, 0);
alert(d); // last day in January
from Calculate last day of month in javascript

Categories