We Keep Coding

Select Day or Month or Year in Single Calendar or DatePicker (Flexible Selection Mode)

I have a unified textbox control where I need to flexibly accept a DatePicker selection which can be one of the following 3: Day (MM/DD/YYYY), Month (MM/YYYY), OR Year (YYYY).
I'm using Bootstrap DatePicker which has startView and minViewMode but the only thing I was able to do is separate them into 3 separate controls which isn't what I want. My goal is a combined control.
Here's the script I'm starting out with. Maybe I can create some invisible DatePickers and toggle them with a custom extra button, such as "Select This Level"? Or maybe I can hack the DatePicker panel to add a row of radiobuttons, "Day" / "Month" / "Year" which will switch the viewMode dynamically?
$('#day').datepicker({
format: "dd/mm/yyyy",
autoclose: true,
startView: "days",
minViewMode: "days"
}).on('change', function (ev) {
$(this).datepicker('hide');
});
$('#month').datepicker({
format: "mm/yyyy",
autoclose: true,
startView: "months",
minViewMode: "months"
}).on('change', function (ev) {
$(this).datepicker('hide');
});
$('#year').datepicker({
format: "yyyy",
autoclose: true,
startView: "years",
minViewMode: "years"
}).on('change', function (ev) {
$(this).datepicker('hide');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
Day Picker: <input id="day"> <br/>
Month Picker: <input id="month"> <br/>
Year Picker: <input id="year"> <br/>
COMBINED Day OR Month OR Year Picker Picker: <input id="combined" placeholder="Can get MM/DD/YYYY, MM/YYYY, or YYYY" style="width:250px"> <br/>

You can add a popover with three buttons(or whatever style you want) and show the datepicker depending on the one that is clicked. Took the popover code from here.
$('#Pops').datepicker({
format: "dd/mm/yyyy",
autoclose: true,
startView: "days",
minViewMode: "days"
})
.on('change', function(ev) {
$(this).datepicker('hide');
});
function showDatePicker(type) {
let picker = {
day: {
format: "dd/mm/yyyy",
autoclose: true,
startView: "days",
minViewMode: "days"
},
month: {
format: "mm/yyyy",
autoclose: true,
startView: "months",
minViewMode: "months"
},
year: {
format: "yyyy",
autoclose: true,
startView: "years",
minViewMode: "years"
}
};
console.log('boo', type, picker[type])
$('#Pops').datepicker("destroy")
$('#Pops').datepicker(picker[type])
$('#Pops').datepicker('show')
}
$(document).on("click", ".day", function() {
showDatePicker('day')
});
$(document).on("click", ".month", function() {
showDatePicker('month')
});
$(document).on("click", ".year", function() {
showDatePicker('year')
});
$("#Pops").popover({
html: true,
content: function() {
return $('#popover-content').html();
},
trigger: 'manual'
})
.on('mouseenter', function() {
var _this = this;
$(this).popover('show');
$('.popover').on('mouseleave', function() {
$(_this).popover('hide');
});
}).on('mouseleave', function() {
var _this = this;
setTimeout(function() {
if (!$('.popover:hover').length) {
$(_this).popover('hide');
}
}, 300);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
COMBINED Day OR Month OR Year Picker Picker: <input id="Pops" placeholder="Can get MM/DD/YYYY, MM/YYYY, or YYYY" style="width:250px" data-toggle="popover" data-trigger="focus" data-placement="bottom"> <br/>
<div id="popover-content" class="hide">
<button class="day">day</button>
<button class="month">month</button>
<button class="year">year</button>
</div>

Based on Riddhesh's answer I also created a cleaner, simpler radiobutton-controlled mode switch, without a popover.
But just as in his answer, the key idea is (1) destroy the DatePicker, (2) re-initialize with new Options on the fly.
function setDatePicker(type, datePickerID) {
var dayModeOptions = {
format: "mm/dd/yyyy",
autoclose: true,
orientation: 'bottom',
startView: "days",
minViewMode: "days"
};
var monthModeOptions = {
format: "mm/yyyy",
autoclose: true,
orientation: 'bottom',
startView: "months",
minViewMode: "months"
};
var yearModeOptions = {
format: "yyyy",
autoclose: true,
orientation: 'bottom',
startView: "years",
minViewMode: "years"
};
// Destroy & re-initalize with specified Mode Options for ID-specified control
$(datePickerID).datepicker("destroy");
if (type == 'day') // Day Mode initialization
$(datePickerID).datepicker(dayModeOptions);
else if (type == 'month') // Month Mode initialization
$(datePickerID).datepicker(monthModeOptions);
else // Year Mode initialization
$(datePickerID).datepicker(yearModeOptions);
}
$(document).ready(function() {
// Initialize with initial Mode Options
$('#combined').datepicker({
format: "mm/dd/yyyy",
autoclose: true,
orientation: 'bottom',
startView: "days",
minViewMode: "days"
}).on('change', function (ev) {
$(this).datepicker('hide');
});
// Handle radio buttons
$('input[name=mode]').change(function(){
// Hide any current DatePicker and erase text box value
$('#combined').datepicker('hide');
$('#combined').val('');
var value = $( 'input[name=mode]:checked' ).val();
if (value == 'day') {
setDatePicker('day', '#combined');
} else if (value == 'month') {
setDatePicker('month', '#combined');
} else {
setDatePicker('year', '#combined');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<div class="">
<input type="radio" id="dayMode" name="mode" value="day" checked> <label for="dayMode">Day</label>
<input type="radio" id="monthMode" name="mode" value="month"> <label for="monthMode">Month</label>
<input type="radio" id="yearMode" name="mode" value="year"> <label for="yearMode">Year</label>
</div>
COMBINED Picker: <input id="combined" placeholder="Depends on radiobutton" style="width:250px"> <br/>

Allow the user to select only quarter month in jquery datepicker

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');
})
});

Is it possible to customize the years range in bootstrap date picker

I have a attribute name is assessment year,in that attribute if i choose the year(ex 2012),the bootstrap date picker display the 2012 calendar only
my js file
$('.datepicker').datepicker({
format: "dd/mm/yyyy",
todayHighlight: true,
todayBtn: 'linked',
autoclose: true
});
I searched the lot of things,still i am not get a correct answer...help me friends

simple just add startDate and endDate assuming that you selected year "2016" http://jsfiddle.net/LcqM7/542/
$('.datepicker').datepicker({
autoclose: true,
startDate: '01/01/2016',
endDate: '12/31/2016'
});

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();
});

How display only years in input Bootstrap Datepicker?

I am using the following code to display only the years:
$("#datepicker").datepicker( {viewMode: "years", minViewMode: "years"});
but input appears in the format "dd/mm/yyyy"
How can I solve this since I do not have the format "yyyy"?

Try this
$("#datepicker").datepicker({
format: "yyyy",
viewMode: "years",
minViewMode: "years"
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<input type="text" id="datepicker" />
$("#datepicker").datepicker( {
format: " yyyy", // Notice the Extra space at the beginning
viewMode: "years",
minViewMode: "years"
});

For bootstrap datetimepicker, assign decade value as follow:
$(".years").datetimepicker({
format: "yyyy",
startView: 'decade',
minView: 'decade',
viewSelect: 'decade',
autoclose: true,
});

$("#year").datepicker( {
format: "yyyy",
viewMode: "years",
minViewMode: "years"
}).on('changeDate', function(e){
$(this).datepicker('hide');
});

For bootstrap 3 datepicker. (Note the capital letters)
$("#datetimepicker").datetimepicker( {
format: "YYYY",
viewMode: "years"
});

always year for bootstrap 3 datetimepicker
https://eonasdan.github.io/bootstrap-datetimepicker/
$('#year').datetimepicker({
format: 'YYYY',
viewMode: "years",
});
$("#year").on("dp.hide", function (e) {
$('#year').datetimepicker('destroy');
$('#year').datetimepicker({
format: 'YYYY',
viewMode: "years",
});
});

format: "YYYY"
Should be capital instead of "yyyy"