I am trying to use bootstrap-datetimepicker.min.js
and I have successfully integrated it in my project. Yet, when I tryg to show today's date as a default value in the from
input field, it is not working.
Javascript:
var d = new Date();
var currDate = d.getDate();
var currMonth = d.getMonth();
var currYear = d.getFullYear();
var dateStr = currDate + "-" + currMonth + "-" + currYear;
$('#from').datetimepicker({
pickTime: false,
defaultDate: dateStr
});
HTML:
<input type="text" placeholder="From" name="from" id="from" style="width: 90%"/>
<input type="text" placeholder="To" name="to" id="to" style="width: 90%"/>
AND with this I would also like to validate the date in from
filed so that it should not be less than today's date and to
date not less than tomorrow's date and not greater than 3 month date.
I have searched for an answer on google and Stackoverflow already. Please help me.
try this code working fiddle http://jsfiddle.net/KWvNe/
HTML
<div class="well">
<div id="from-datepicker" class="input-append date">
<input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
<div class="well">
<div id="to-datepicker" class="input-append date">
<input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
JS
$(function() {
var d = new Date();
var today = d;
var dateThreeMonthLater = d.setMonth(d.getMonth() + 3);
$('#from-datepicker').datetimepicker({
language: 'pt-BR',
startDate: today,
endDate: dateThreeMonthLater
});
$('#to-datepicker').datetimepicker({
language: 'pt-BR'
});
});
Check working fiddle here http://jsfiddle.net/KWvNe/ do not forgot to include essential javascript and css check here http://tarruda.github.io/bootstrap-datetimepicker/
You can set following options for a datepicker
maskInput: true, // disables the text input mask
pickDate: true, // disables the date picker
pickTime: true, // disables de time picker
pick12HourFormat: false, // enables the 12-hour format time picker
pickSeconds: true, // disables seconds in the time picker
startDate: -Infinity, // set a minimum date
endDate: Infinity // set a maximum date