Menu
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 ??
694
Let's consider we have the below HTML code, in which we will be showing bootstrap datepicker without date part, and show only year part. $("#datepicker"). datepicker({ format: "yyyy", viewMode: "years", minViewMode: "years", autoclose:true //to close picker once year is selected });
Set changeMonth and changeYear to true so that Month and Year appear as Dropdown. Set date format to "MM yy". jQuery DatePicker has "onClose" event, which is called when Datepicker gets closed. So using this event, fetch the selected Month and Year and setDate of Datepicker.
datepicker({ dateFormat: 'yy-m-d', inline: true, onSelect: function(dateText, inst) { var month = dateText. getUTCMonth(); var day = dateText. getUTCDate(); var year = dateText. getUTCFullYear(); alert(day+month+year); } }); });
inside the jQuery script code just paste the code. $( ". selector" ). datepicker({ dateFormat: 'yy-mm-dd' });
**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> 
$(function() { $('#datepicker1').datepicker( { changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM yy', onClose: function(dateText, inst) { var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); $(this).datepicker('setDate', new Date(year, month, 1)); } }); }); Style should be
.ui-datepicker-calendar { display: none; } working demo
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
