jQuery UI DatePicker to show year only

Question

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

User · Accepted Answer

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

User · Answer

Try this  add in html following   lt input type  text  id  datepicker   gt    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          Working Demo

User · Answer

check this out jquery calendar to show only year and month  or something like this       datepicker   datepicker   option    dateFormat    yy

User · Answer

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   lt label for  startYear  gt  Start Year   lt  label gt     lt input name  startYear  id  startYear  class  date-picker-year    gt       jQuery    lt script type  text javascript  gt            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                                  lt  script gt

User · Answer

Try this way it will hide the calendar and show year only    function              datepicker    datepicker  dateFormat   yy                CSS   ui-datepicker-calendar      display  none      DEMO

User · Answer

lt  DOCTYPE html gt   lt html gt   lt head gt   lt meta charset  utf-8  gt   lt title gt Styling links lt  title gt   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet  gt   lt style type  text css  gt  hr       margin  2px 0 0 0    a      cursor pointer     yearBetween      margin-left  67px      lt  style gt   lt script type  text javascript  src  https   cdnjs cloudflare com ajax libs jquery 3 2 1 jquery min js  gt  lt  script gt   lt script type  text javascript  src  YearPicker js  gt  lt  script gt   lt  head gt    lt body gt      lt div class  form-group col-sm-8  style  display inline-flex   gt       lt div style  display inline-flex   gt           lt label class  col-sm-4  gt Select Year lt  label gt           lt input type  text  id  txtYear1  class  form-control cols-sm-2   gt           lt img id  yearImage  src  https   cdn4 iconfinder com data icons VISTA accounting png 400 calendar year png  style  cursor  pointer width 50px  height 35px   gt  lt  img gt       lt  div gt       lt div id  divYear1  style  display none border  0 5px solid lightgrey  height auto   gt       lt div style  background lightgrey height  12    gt           lt a id  btnPrev1  class  btnPrev glyphicon glyphicon glyphicon-menu-left  style  float left margin  4px   gt  lt  a gt           lt input style  text-align  center  width  43   border  none  margin-left  20    type  text  id  yearBetween  class  btn-default   gt           lt a id  btnNext1  class  btnNext glyphicon glyphicon glyphicon-menu-right  style  float right margin  4px   gt  lt  a gt       lt  div gt       lt hr  gt       lt div id  yearContainer  style  width 260px  height auto   gt       lt  div gt   lt  div gt   lt  div gt    lt  body gt   lt  html gt       paste the above given html in  html file and then paste the given jquery code in  js file  and you can use the custom jquery  html and css year picker       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 lt  endRange  i                          var btn     lt input type  button  style  margin 3px   class  button btn btn-default  value     i     gt  lt  input gt                count   count   1                container  append btn               if count  4                                  container  append   lt br  gt                     count   0                                         yearBetween   focusout function              var yearValue       yearBetween   val   split  -            startRange   parseInt yearValue 0  trim             if startRange gt 999  amp  amp  startRange  lt  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  amp  amp   e ctrlKey     true    e metaKey     true                       Allow  home  end  left  right  down  up              e keyCode  gt   35  amp  amp  e keyCode  lt   40                         let it happen  don t do anything                  return                       Ensure that it is a number and stop the keypress         if   e shiftKey     e keyCode  lt  48    e keyCode  gt  57    amp  amp   e keyCode  lt  96    e keyCode  gt  105                 e preventDefault

User · Answer

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

User · Answer

Try this piece of code  it worked for me      year   datepicker       format   quot yyyy quot       viewMode   quot years quot       minViewMode   quot years quot       I hope it will do magic also for you

User · Answer

In 2018       datepicker   datepicker       format   yyyy       weekStart  1      orientation   bottom       language      app request locale          keyboardNavigation  false      viewMode   years       minViewMode   years

User · Answer

use this code for jquery time picker   x000D   x000D    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      x000D   lt script src  https   code jquery com jquery-1 9 1 js  gt  lt  script gt  x000D     lt script src  https   code jquery com ui 1 9 1 jquery-ui js  gt  lt  script gt  x000D   lt link rel  stylesheet  href  http   code jquery com ui 1 9 1 themes base jquery-ui css    gt  x000D   x000D   lt input type  text  id  datepicker1   gt  x000D   x000D   x000D

User · Answer

I had the same problem and  after a day of research  I came up with this solution  http   jsfiddle net konstantc 4jkef3a1    x000D   x000D          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     -------------------------------- x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   code jquery com ui 1 12 1 jquery-ui min js  gt  lt  script gt  x000D   lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  gt  x000D   lt link rel  stylesheet  href  http   code jquery com ui 1 9 1 themes base jquery-ui css    gt  x000D   x000D   lt div class  container  gt  x000D   x000D     lt h2 class  font-weight-light text-lg-left mt-4 mb-0  gt  lt b gt jQuery UI Datepicker lt  b gt  custom select lt  h2 gt  x000D   x000D     lt hr class  mt-2 mb-3  gt  x000D     lt div class  row text-lg-left  gt  x000D       lt div class  col-12  gt  x000D   x000D         lt form gt  x000D   x000D           lt div class  form-label-group  gt  x000D           lt label for  datepicker1  gt  month and year only    lt code gt id  datepicker1  lt  code gt    lt  label gt  x000D             lt input type  text  class  form-control  id  datepicker1   x000D                   placeholder   month and year only     gt  x000D           lt  div gt  x000D   x000D           lt hr   gt  x000D   x000D           lt div class  form-label-group  gt  x000D           lt label for  datepicker2  gt  year only    lt code gt input id  datepicker2  lt  code gt    lt  label gt  x000D             lt input type  text  class  form-control  id  datepicker2   x000D                   placeholder   year only     gt  x000D           lt  div gt  x000D   x000D           lt hr   gt  x000D   x000D           lt div class  form-label-group  gt  x000D           lt label for  datepicker3  gt  year only  no controls    lt code gt input id  datepicker3  lt  code gt    lt  label gt  x000D             lt input type  text  class  form-control  id  datepicker3   x000D                   placeholder   year only  no controls     gt  x000D           lt  div gt  x000D   x000D         lt  form gt  x000D   x000D       lt  div gt  x000D     lt  div gt  x000D   x000D   lt  div gt  x000D   x000D   x000D    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

User · Answer

You can use the dateFormat attribute for that  something like       datepicker   datepicker   dateFormat   yy

[javascript] jQuery UI DatePicker to show year only

Examples related to javascript

Examples related to jquery

Examples related to jquery-ui