Jquery datepiker different format (dd/mm/yy OR Year only OR Month Only Or Year and Month only etc)

CSS and JS included  

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <link rel="stylesheet" href="/resources/demos/style.css">

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

DatePicker Day, Month and Year

HTML

  Date: <input type="text" id="datepicker">

CSS

No Change

Script

 <script>

  $(function () {

  $("#datepicker").datepicker(

  {

  changeYear: true,

  changeMonth: true,

  dateFormat: 'dd/mm/yy',

  });

  });

  </script>

Note [ mm/dd/yy like 15/10/2016, MM/dd/yy like October/20/2016]

DatePicker Month and Year Only

HTML

 <p>Date: <input type="text" id="datepicker"></p>

Css

-----

  .ui-datepicker-calendar {

  display: none;

  }

Script

--------

 <script>

  $(function () {

  $("#datepicker").datepicker(

  {

  changeMonth: true,

  changeYear: 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));

  }

  });

  });

  </script>

DatePicker Only Year

======================

HTML

-----

  <p>Date: <input type="text" class="class=" date-picker-year"" id="datepicker"></p>

css

----

 .ui-datepicker-calendar {

  display: none;

  }

  .ui-datepicker-month {

  display: none;

  }

  .ui-datepicker-prev {

  display: none;

  }

  .ui-datepicker-next {

  display: none;

  }

script

------

 <script>

  $(function () {

  $("#datepicker").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>

Datepicker Only Month

======================

HTML

---------

 <p>Date: <input type="text" id="datepicker"></p>

CSS

-----

  <style>

  .MonthDatePicker .ui-datepicker-year {

  display: none;

  }

  .HideTodayButton .ui-datepicker-buttonpane .ui-datepicker-current {

  visibility: hidden;

  }

  .hide-calendar .ui-datepicker-calendar {

  display: none !important;

  visibility: hidden !important;

  }

  </style>

Script

-------

 <script>

  $(function () {

  $("#datepicker").datepicker({

  changeMonth: true,

  showButtonPanel: true,

  dateFormat: "M",

  beforeShow: function (e, t) {

  $(this).datepicker("hide");

  $("#ui-datepicker-div").addClass("hide-calendar");

  $("#ui-datepicker-div").addClass('MonthDatePicker');

  $("#ui-datepicker-div").addClass('HideTodayButton');

  },

  onClose: function(dateText, inst){

  var n = Math.abs($("#ui-datepicker-div .ui-datepicker-month :selected").val() - 1) + 2;

  $(this).datepicker("setDate", new Date(null, n, null));

  }

  });

  });

  </script>