I am using jQuery datepicker to display calender.I want to know if I can use it to Display only 'Year' and not Complete Calender ??
This question is related to
javascript
jquery
jquery-ui
use this code for jquery time picker.
$(function() { _x000D_
$('#datepicker1').datepicker( {_x000D_
changeMonth: false,_x000D_
changeYear: true,_x000D_
showButtonPanel: false,_x000D_
dateFormat: 'yy',_x000D_
onClose: function(dateText, inst) { _x000D_
$(this).datepicker('setDate', new Date('2017'));_x000D_
}_x000D_
}).focus(function () {_x000D_
$(".ui-datepicker-month").hide();_x000D_
$(".ui-datepicker-calendar").hide();_x000D_
});_x000D_
});<script src="https://code.jquery.com/jquery-1.9.1.js"></script>_x000D_
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>_x000D_
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />_x000D_
_x000D_
<input type="text" id="datepicker1"/>Try this way it will hide the calendar and show year only
$(function() {
$( "#datepicker" ).datepicker({dateFormat: 'yy'});
});?
CSS
.ui-datepicker-calendar {
display: none;
}
DEMO ?
You can use the dateFormat attribute for that, something like:
$('#datepicker').datepicker({ dateFormat: 'yy' })
Try this:
add in html following
<input type="text" id="datepicker"/>
Add in js file
$(function() {
$( "#datepicker" ).datepicker({dateFormat: 'yy', changeYear: true, changeMonth: false});
});
Add in css
.ui-datepicker-calendar {
display: none;
}
.ui-datepicker-month {
display: none;
}
.ui-datepicker-prev{
display: none;
}
.ui-datepicker-next{
display: none;
}
You can use this bootstrap datepicker
$("your-selector").datepicker({
format: "yyyy",
viewMode: "years",
minViewMode: "years"
});
"your-selector" you can use id(#your-selector) OR class(.your-selector).
Try this piece of code, it worked for me:
$('#year').datepicker({
format: "yyyy",
viewMode: "years",
minViewMode: "years"
});
I hope it will do magic also for you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Styling links</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
hr{
margin: 2px 0 0 0;
}
a{
cursor:pointer;
}
#yearBetween{
margin-left: 67px;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="YearPicker.js"></script>
</head>
<body>
<div class="form-group col-sm-8" style="display:inline-flex;">
<div style="display:inline-flex;">
<label class="col-sm-4">Select Year</label>
<input type="text" id="txtYear1" class="form-control cols-sm-2"/>
<img id="yearImage" src="https://cdn4.iconfinder.com/data/icons/VISTA/accounting/png/400/calendar_year.png" style="cursor: pointer;width:50px; height:35px;"></img>
</div>
<div id="divYear1" style="display:none;border: 0.5px solid lightgrey; height:auto;">
<div style="background:lightgrey;height: 12%;">
<a id="btnPrev1" class="btnPrev glyphicon glyphicon glyphicon-menu-left" style="float:left;margin: 4px;"></a>
<input style="text-align: center; width: 43%; border: none; margin-left: 20%;" type="text" id="yearBetween" class="btn-default"/>
<a id="btnNext1" class="btnNext glyphicon glyphicon glyphicon-menu-right" style="float:right;margin: 4px;"></a>
</div>
<hr/>
<div id="yearContainer" style="width:260px; height:auto;">
</div>
</div>
</div>
</body>
</html>
$(document).ready(function(){
// initial value of the start year for the dynamic binding of the picker.
var startRange = 2000;
// given the previous sixteen years from the current start year.
$(".btnPrev").click(function(){
endRange = startRange;
startRange = startRange - 16;
$("#yearBetween").text('');
// finding the current div
var container = event.currentTarget.nextElementSibling.parentElement.nextElementSibling.nextElementSibling;
// find the values between the years from the textbox in year picker.
createButtons(container);
//bind the click function for the dynamically created buttons.
bindButtons();
var rangeValues = startRange+ " - "+(endRange-1) ;
$("#yearBetween").val(rangeValues);
});
// given the next sixteen years from the current end year.
$(".btnNext").click(function(){
startRange = endRange;
endRange = endRange + 16;
//clearing the cuurent values of the picker
$("#yearBetween").text('');
// finding the current div
var container = event.currentTarget.parentElement.nextElementSibling.nextElementSibling;
createButtons(container);
//bind the click function for the dynamically created buttons.
bindButtons();
// find the values between the years from the textbox in year picker.
var rangeValues = startRange+ " - "+(endRange-1) ;
// writes the value in textbox shows above the button div.
$("#yearBetween").val(rangeValues);
});
$("#txtYear1,#yearImage").click(function(){
debugger;
$("#divYear1").toggle();
endRange = startRange + 16;
//clearing the cuurent values of the picker
$("#yearBetween").text('');
var container = "#yearContainer";
// Creating the button for the years in yearpicker.
createButtons(container);
//bind the click function for the dynamically created buttons.
bindButtons();
// find the values between the years from the textbox in year picker.
var rangeValues = startRange+ " - "+(endRange-1) ;
// writes the value in textbox shows above the button div.
$("#yearBetween").val(rangeValues);
});
// binding the button for the each dynamically created buttons.
function bindButtons(){
$(".button").bind('click', function(evt)
{
debugger;
$(this).css("background","#ccc");
$("#txtYear1").val($(this).val());
$('#divYear1').hide();
});
}
// created the button for the each dynamically created buttons.
function createButtons(container){
var count=0;
$(container).empty();
for(var i= startRange; i< endRange; i++)
{
var btn = "<input type='button' style='margin:3px;' class='button btn btn-default' value=" + i + "></input>";
count = count + 1;
$(container).append(btn);
if(count==4)
{
$(container).append("<br/>");
count = 0;
}
}
}
$("#yearBetween").focusout(function(){
var yearValue = $("#yearBetween").val().split("-");
startRange = parseInt(yearValue[0].trim());
if(startRange>999 && startRange < 9985){
endRange = startRange + 16;
$("#yearBetween").text('');
var container = "#yearContainer";
createButtons(container);
bindButtons();
var rangeValues = startRange+ " - "+(endRange-1) ;
$("#yearBetween").val(rangeValues);
}
else
{
$("#yearBetween").focus();
}
});
$("#yearBetween, #txtYear1").keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A, Command+A
(e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: home, end, left, right, down, up
(e.keyCode >= 35 && e.keyCode <= 40)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
});
**NOTE :
**If anyone have objection that "why i have answered this Question now !" Because i tried all the answers of this post and got no any solution.So i tried my way and got Solution So i am Sharing to next comers****
HTML
<label for="startYear"> Start Year: </label>
<input name="startYear" id="startYear" class="date-picker-year" />
jQuery
<script type="text/javascript">
$(function() {
$('.date-picker-year').datepicker({
changeYear: true,
showButtonPanel: true,
dateFormat: 'yy',
onClose: function(dateText, inst) {
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, 1));
}
});
$(".date-picker-year").focus(function () {
$(".ui-datepicker-month").hide();
});
});
</script>
check this out jquery calendar to show only year and month
or something like this
$("#datepicker").datepicker( "option", "dateFormat", "yy" );?
I had the same problem and, after a day of research, I came up with this solution: http://jsfiddle.net/konstantc/4jkef3a1/
// *** (month and year only) ***_x000D_
$(function() { _x000D_
$('#datepicker1').datepicker( {_x000D_
yearRange: "c-100:c",_x000D_
changeMonth: true,_x000D_
changeYear: true,_x000D_
showButtonPanel: true,_x000D_
closeText:'Select',_x000D_
currentText: 'This year',_x000D_
onClose: function(dateText, inst) {_x000D_
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();_x000D_
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();_x000D_
$(this).val($.datepicker.formatDate('MM yy (M y) (mm/y)', new Date(year, month, 1)));_x000D_
}_x000D_
}).focus(function () {_x000D_
$(".ui-datepicker-calendar").hide();_x000D_
$(".ui-datepicker-current").hide();_x000D_
$("#ui-datepicker-div").position({_x000D_
my: "left top",_x000D_
at: "left bottom",_x000D_
of: $(this)_x000D_
});_x000D_
}).attr("readonly", false);_x000D_
});_x000D_
// --------------------------------_x000D_
_x000D_
_x000D_
_x000D_
// *** (year only) ***_x000D_
$(function() { _x000D_
$('#datepicker2').datepicker( {_x000D_
yearRange: "c-100:c",_x000D_
changeMonth: false,_x000D_
changeYear: true,_x000D_
showButtonPanel: true,_x000D_
closeText:'Select',_x000D_
currentText: 'This year',_x000D_
onClose: function(dateText, inst) {_x000D_
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();_x000D_
$(this).val($.datepicker.formatDate('yy', new Date(year, 1, 1)));_x000D_
}_x000D_
}).focus(function () {_x000D_
$(".ui-datepicker-month").hide();_x000D_
$(".ui-datepicker-calendar").hide();_x000D_
$(".ui-datepicker-current").hide();_x000D_
$(".ui-datepicker-prev").hide();_x000D_
$(".ui-datepicker-next").hide();_x000D_
$("#ui-datepicker-div").position({_x000D_
my: "left top",_x000D_
at: "left bottom",_x000D_
of: $(this)_x000D_
});_x000D_
}).attr("readonly", false);_x000D_
});_x000D_
// --------------------------------_x000D_
_x000D_
_x000D_
_x000D_
// *** (year only, no controls) ***_x000D_
$(function() { _x000D_
$('#datepicker3').datepicker( {_x000D_
dateFormat: "yy",_x000D_
yearRange: "c-100:c",_x000D_
changeMonth: false,_x000D_
changeYear: true,_x000D_
showButtonPanel: false,_x000D_
closeText:'Select',_x000D_
currentText: 'This year',_x000D_
onClose: function(dateText, inst) {_x000D_
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();_x000D_
$(this).val($.datepicker.formatDate('yy', new Date(year, 1, 1)));_x000D_
},_x000D_
onChangeMonthYear : function () {_x000D_
$(this).datepicker( "hide" );_x000D_
}_x000D_
}).focus(function () {_x000D_
$(".ui-datepicker-month").hide();_x000D_
$(".ui-datepicker-calendar").hide();_x000D_
$(".ui-datepicker-current").hide();_x000D_
$(".ui-datepicker-prev").hide();_x000D_
$(".ui-datepicker-next").hide();_x000D_
$("#ui-datepicker-div").position({_x000D_
my: "left top",_x000D_
at: "left bottom",_x000D_
of: $(this)_x000D_
});_x000D_
}).attr("readonly", false);_x000D_
});_x000D_
// --------------------------------<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>_x000D_
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>_x000D_
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">_x000D_
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />_x000D_
_x000D_
<div class="container">_x000D_
_x000D_
<h2 class="font-weight-light text-lg-left mt-4 mb-0"><b>jQuery UI Datepicker</b> custom select</h2>_x000D_
_x000D_
<hr class="mt-2 mb-3">_x000D_
<div class="row text-lg-left">_x000D_
<div class="col-12">_x000D_
_x000D_
<form>_x000D_
_x000D_
<div class="form-label-group">_x000D_
<label for="datepicker1">(month and year only : <code>id="datepicker1"</code> )</label>_x000D_
<input type="text" class="form-control" id="datepicker1" _x000D_
placeholder="(month and year only)" />_x000D_
</div>_x000D_
_x000D_
<hr />_x000D_
_x000D_
<div class="form-label-group">_x000D_
<label for="datepicker2">(year only : <code>input id="datepicker2"</code> )</label>_x000D_
<input type="text" class="form-control" id="datepicker2" _x000D_
placeholder="(year only)" />_x000D_
</div>_x000D_
_x000D_
<hr />_x000D_
_x000D_
<div class="form-label-group">_x000D_
<label for="datepicker3">(year only, no controls : <code>input id="datepicker3"</code> )</label>_x000D_
<input type="text" class="form-control" id="datepicker3" _x000D_
placeholder="(year only, no controls)" />_x000D_
</div>_x000D_
_x000D_
</form>_x000D_
_x000D_
</div>_x000D_
</div>_x000D_
_x000D_
</div>I know this question is pretty old but I thought that my solution can be of use to others that encounter this problem. Hope it helps.
In 2018,
$('#datepicker').datepicker({
format: "yyyy",
weekStart: 1,
orientation: "bottom",
language: "{{ app.request.locale }}",
keyboardNavigation: false,
viewMode: "years",
minViewMode: "years"
});
Source: Stackoverflow.com