Allow the user to select only quarter month in jquery datepicker - javascript

How to limit Datepicker to allow the user to select only quarter month of the year
The Datepicker must allow the user to only select the quater month in future. Dates in the past must not be allowed.
Eg.if we are in jan then, in this case, quarter month should be enabled (march) and jan and feb should disable.
if we are in mar then in this case quater month should enabled(march) and jan and feb should disable.
if we are in Apr then in this case quater month should enabled(jun) and jan,feb,mar,apr,may should disable.
$(document).ready(function () {
$('.datepickerOne').datepicker({
format: "yyyy-mm",
viewMode: "months",
minViewMode: "months",
autoclose: true,
startDate: new Date(),
endDate: '+2y',
}).on("change", function () {
$("#testDetailsForm").bootstrapValidator('revalidateField', 'formsubmit_date');
})
});


try this
$(document).ready(function () {
$('.datepickerOne').datepicker({
format: "yyyy-mm",
viewMode: "months",
minViewMode: "months",
autoclose: true,
minDate:new Date(new Date().setMonth(new Date().getMonth() + 1)),
maxDate: "+2y"
}).on("change", function () {
$("#testDetailsForm").bootstrapValidator('revalidateField', 'formsubmit_date');
})
});


so try this. this Code Working as you say
$(document).ready(function () {
var currentTime = new Date();
// First Date Of the month
var startDateFrom = new Date(currentTime.getFullYear(),currentTime.getMonth(),1);
// Last Date Of the Month
var startDateTo = new Date(currentTime.getFullYear(),currentTime.getMonth() +2,1);
$('.datepickerOne').datepicker({
format: "yyyy-mm",
viewMode: "months",
minViewMode: "months",
autoclose: true,
minDate:startDateTo,
maxDate: "+2y"
}).
on("change", function () {
$("#testDetailsForm").bootstrapValidator('revalidateField', 'formsubmit_date');
})
});

Related

Bootstrap DatePicker format mm/yyyy set max month

I'm using bootstrap datepicker in format mm/yyyy, but I can't set max month. My code is like this:
$('#mesVigencia').datepicker({
format: "mm/yyyy",
startView: "months",
minViewMode: "months",
language: 'pt-BR'
});
How can I set max month like current month?

you need endDate: "0m" check my sample,
$('#mesVigencia').datepicker({
format: "mm/yyyy",
startView: "months",
minViewMode: "months",
language: 'pt-BR',
endDate: "0m"
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet"/>
<div id="mesVigencia"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>

Use maxDate: in the object
$('#mesVigencia').datepicker({
format: "mm/yyyy",
startView: "months",
minViewMode: "months",
language: 'pt-BR',
maxDate: new Date("2017-11-00")
});
Use new Date("2017-11-00") if you want to set november as the max month

How to set 3 months date range from current date in date picker?

I want to enable only 3 months from current date in bootstrap datepicker.
function addThreeMonthsToStartDate(today) {
var lastDate = new Date(today.getFullYear(), today.getMonth()+3, getDate());
return lastDate;
}
$("#startdate").datepicker({
isDisabled: function(date) {
return date.valueOf() < Date.now() ? false : true;
},
autoClose: true,
viewStart: 0,
weekStart: 1,
maxDate: lastDate,
dateFormat: "dd/mm/yyyy"
});
Any ideas?

Solution to your problem it allows only 3 months from current date.
$('#startdate').datepicker({
maxDate: "+90d",
minDate:0
});

Try this
function addThreeMonthsToStartDate(today) {
// var today = new Date();
var lastDate = new Date(today.getFullYear(), today.getMonth()+3,
today.getDate());
}
$("#startdate").datepicker({
isDisabled: function(date) {
return date.valueOf() < Date.now() ? false : true;
},
minDate: "dateToday", // If you need to disable past dates
autoClose: true,
viewStart: 0,
weekStart: 1,
maxDate: lastDate,
dateFormat: "dd/mm/yyyy"
});

Thanks a lot for your suggestions. I got the solution as below:
$("#startdate").datepicker({
isDisabled: function(date) {
var d = new Date();
return date.valueOf() < d.setMonth(d.getMonth()+3) ? false : true;
},
autoClose: true,
viewStart: 0,
weekStart: 1,
maxDate: 0,
dateFormat: "dd/mm/yyyy"
});

you most use startDate and endDate in bootstrap datepicker
function addThreeMonthsToStartDate(today) {
// var today = new Date();
var lastDate = new Date(today.getFullYear(), today.getMonth()+3,
today.getDate());
}
$("#startdate").datepicker({
isDisabled: function(date) {
return date.valueOf() < Date.now() ? false : true;
},
startDate: "dateToday", // If you need to disable past dates
autoClose: true,
viewStart: 0,
weekStart: 1,
endDate: lastDate,
dateFormat: "dd/mm/yyyy"
});

How to set default date in daterangepicker?

Is there any way to simply set default date as current + 5 day ahead in daterangepicker? Like this:
$('.selector').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
setDate: '+5d',
minDate: new Date()
}, function(start, end, label) {
$('.selector').val(start.format("YYYY-MM-DD"));
});

Like so. You also don't need that callback function since the format string is configurable.
$('.selector').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
startDate: moment().add(5, 'day'),
minDate: moment(),
locale: {
format: 'YYYY-MM-DD'
}
});

var someDate = new Date();
var numberOfDaysToAdd = 5;
someDate.setDate(someDate.getDate() + numberOfDaysToAdd);
$('.selector').val(formatDate(someDate));
this helped

Try this:
$('.selector').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
minDate: new Date()
}, function(start, end, label) { $('.selector').val(start.format("YYYY-MM-DD"));
});
var Today= new Date();
Today.setDate(Today.getDate() + 5);//any date you want
$('.selector').daterangepicker('setDate', Today);

In date-picker a dropdown disappears when I put a date with days

This example works fine when I use only month (the dropdown doesn't disappear):
http://jsfiddle.net/dT6AU/
But when I try to configure days, the dropdown disappears. I changed the date format to dd-mm-yyyy:
$(".datepicker").datepicker({
language: 'es',
format: "dd-mm-yyyy",
viewMode: "days",
minViewMode: "days",
autoclose: true
});
And added span.days to the function that stopPropagation.
How can I fix this problem?

in days mode, the stopPropagation should be called on td.day click
$(".datepicker").datepicker({
language: 'es',
format: "dd-mm-yyyy",
viewMode: "days",
minViewMode: "days",
autoclose: true
});
$(document).on('click', 'td.day, th.next, th.prev, th.switch, span.year', function (e) {
e.stopPropagation();
});

Bootstrap datepicker how to allow past 6 months dates

How can I enable past 6 months dates from today including today in Bootstrap datepicke.
For example if today is 4th October 2015 then calendar will only allow to pick any date between 4th April 2015 to 4th October 2015.
var date = new Date();
// initialize daterange
$('.input-daterange').datepicker({
format: "mm/dd/yy",
orientation: "top left",
autoclose: true,
todayHighlight: false,
toggleActive: false,
startDate: date
});

startDate should do it (doc)

I'm asuming you are using this, so you can make use of endDate and startDate.
You need to set the startDate to the Date.now - 6 months and the endDate to today.
var now = new Date();
var sixmonthsago = new Date(now.setMonth(now.getMonth() - 6));
$('.input-daterange').datepicker({
format: "mm/dd/yy",
orientation: "top left",
autoclose: true,
todayHighlight: false,
toggleActive: false,
endDate: now,
startDate: sixmonthsago
});
I didint test the code.

Categories