This is my code for bootstrap datepicker.
$('#datepicker').datepicker({
autoclose: true,
format: 'yyyy-mm-dd',
todayHighlight: true
});
Thanks for all to help me. Here is the updated fiddle
https://jsfiddle.net/5sfr0g36/5/
Set the minDate and maxDate properties to new Date();
$(document).ready(function(){
$('#datepicker').datetimepicker({
format: 'YYYY-MM-DD',
minDate: new Date(),
maxDate: new Date(),
});
});
Related
datePickerOptions: {
disabledDate (date) {
return date > new Date()
},
}
someone know how to disabled the past date? this code can only disabled the future dates, I want to do is disabled the past and future dates and enable only 3 days.
e.g. Jan 2 is the date today, Jan 1, Jan 2, Jan 3 is the enable dates.
For Disabling Future date also use From in disabledates: method
<script>
import Datepicker from "vuejs-datepicker";
export default {
components: {
Datepicker
},
data() {
return {
model: {
date: ""
},
DatePickerFormat: "dd/MM/yyyy",
disabledDates: {
from: new Date(Date.now()),
to: new Date(Date.now()-8640000)
}
};
}
};
</script>
Image
you can try with code sandbox which link in mentioned in above comment
I am using https://github.com/TrevorS/bootstrap3-datetimepicker-rails datetimepicker in my rails application. How do we close the widget after clicking on today button?
$(document).on('turbolinks:load', () => {
$(".form_datetime").datetimepicker({
timeZone: 'utc',
format: "YYYY-MM-DD HH:mm:ss UTCZ",
defaultDate: moment().tz('UTC'),
icons: {
today: 'todayText',
up: 'glyphicon glyphicon-chevron-up',
up: "fa fa-arrow-up",
down: "fa fa-arrow-down",
previous: " fa fa-arrow-left",
next: "fa fa-arrow-right"
},
showTodayButton: true,
ignoreReadonly: true,
allowInputToggle: true,
useCurrent: true,
});
Watch for the dp.change event, access the date picker through the data attribute of the anchor element, then call the hide function.
$(document).on("dp.change", () => {
$(".form_datetime").data("DateTimePicker").hide()
})
Documentation Source:
http://eonasdan.github.io/bootstrap-datetimepicker/Functions/#hide
http://eonasdan.github.io/bootstrap-datetimepicker/Events/#dpchange
When I select a date and try to empty or clear it in the textbox then click in any part of the page, I received this error "Uncaught TypeError: event.date.format is not a function". How can avoid this error? Can somebody help me with my problem? This is the jsfiddle https://jsfiddle.net/5nq3vmzg/1/
$('.datepicker').on('dp.change', function(event) {
var date = event.date.format('YYYY-MM-DD');
console.log(date);
Vue.set(vm, 'date', date);
});
When field is empty event.date === false, so try to check if event.date is not equals to false before formating it.
$('.datepicker').on('dp.change', function(event) {
if (event.date) {
var date = event.date.format('YYYY-MM-DD');
console.log(date);
Vue.set(vm, 'date', date);
}
});
var dayspace=14;
$('.timelastd').datepicker(
{setDate : new Date(),
dafaultDate: new Date(),
dateFormat:"yy-mm-dd",
minDate: new Date(),
maxDate: dayspace,
appendText: "click here",
changeYear: false,
}).keypress(function(e) {return false;});
I don't know how to put the variable to the maxDate?
Why can't this work?
if I change to this ~still not work~
var dayspace=14;
$('.timelastd').datepicker(
{setDate : new Date(),
dafaultDate: new Date(),
dateFormat:"yy-mm-dd",
minDate: new Date(),
appendText: "click here",
changeYear: false,
}).keypress(function(e) {return false;});
$('.timelastd').datepicker("option", "maxDate", dayspace);
I have 2 date fields. One "From" and one "To".
I want when the user select from the first field the date ex "09/12/2015" the maxdate on the second field to be "09/01/2016". My code is:
<script type="text/javascript">
$(function () {
$('#from').datetimepicker({format: 'DD/MM/YYYY'});
$('#to').datetimepicker({format: 'DD/MM/YYYY',useCurrent: false});
$("#from").on("dp.change", function (e) {
$('#to').data("DateTimePicker").minDate(e.date);
});
$("#to").on("dp.change", function (e) {
$('#from').data("DateTimePicker").maxDate(e.date);
});
});
</script>
Can you help me?
Thank You!
You can manipulate date using Moment, so you will have:
$("#from").on("dp.change", function (e) {
$('#to').data("DateTimePicker").minDate(e.date);
var nextMonth = e.date.add(1, 'months');
$('#to').data("DateTimePicker").maxDate(nextMonth);
});
Note that moment has a subtract method too, if you need to do the same operation in reverse.
$("#from").on("dp.change", function (e) {
$('#to').data("DateTimePicker").minDate(e.date);
var nextMonth = e.date.add(3, 'months');
$('#to').data("DateTimePicker").maxDate(nextMonth);
});
is failed when the maxdate belows 3 months