Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html lang="en">
  <head>
    <title>jQuery UI datepicker Month and Year Modification</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
​
    <style type="text/css">
      body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
      h2 { margin: 2em 0 0.5em 0; }
​
      .ui-datepicker.monthAndYear { width: 20em; }
      .ui-datepicker.monthAndYear .ui-datepicker-calendar {
        display: none;
      }
      .ui-datepicker.monthAndYear .ui-datepicker-header {
        margin-bottom: 0.2em;
      }
    </style>
  </head>
  <body>
    <h1>jQuery UI datepicker Month and Year Modification</h1>
​
    <h2>Vanilla datepicker</h2>
    <input type="text" id="vanillaDatePicker" value="03/20/2009" />
    
    <h2>Modified datepicker</h2>
    <input type="text" id="modifiedDatepickerOne" value="03/20/2009" />
​
    <h2>Modified datepicker with a dropdown to change the year</h2>
    <input type="text" id="modifiedDatepickerTwo" value="03/20/2009" />
  
    <h2>Modified datepicker with custom date format</h2>
    <input type="text" id="modifiedDatepickerThree" value="2009-03" />
  </body>
</html>
​
 
var monthAndYear = {
  /**
   * datepicker doesn't update the input field since
   * we don't actually select a date, so we have to 
   * manually determine the selected month and year
   * and update the input field ourselves.
  **/
  getMonthAndYear: function (dateText, instance) {
    if (!instance.settings.monthAndYear) {
      return;
    }
​
    var
      selectedYear = instance.selectedYear,
      selectedMonth = instance.selectedMonth,
      selectedDate = new Date(selectedYear, selectedMonth),
      dateFormat = 
        instance.settings.originalDateFormat ||
        instance.settings.dateFormat ||
        $.datepicker.regional[''].dateFormat;
​
    $(this).val($.datepicker.formatDate(dateFormat, selectedDate));
  },
​
  /**
   * If we want to use normal datepickers on the same page
   * we have to add and remove the modified styles accordingly
  **/
  styleMonthAndYear: function (input, instance) {
    var
      dpDiv = instance.dpDiv,
      className = 'monthAndYear';
    if (instance.settings.monthAndYear) {
      dpDiv.addClass(className);
    }
    else {
      dpDiv.removeClass(className);
    }
  }
}
$.datepicker.setDefaults({
  beforeShow: monthAndYear.styleMonthAndYear,
  onClose: monthAndYear.getMonthAndYear
});
​
$(function () {
  $('#vanillaDatePicker').datepicker();
​
  $('#modifiedDatepickerOne').datepicker({
    monthAndYear: true
  });
​
  $('#modifiedDatepickerTwo').datepicker({
    monthAndYear: true,
    changeYear: true
  });
​
  /**
   * We have to do a bit of trickery here, in order to use a
   * dateFormat ('yy-mm') that datepicker normally wouldn't accept.
   * We parse the date manually and clear the dateFormat setting
   * in order to force datepicker to use the defaultDate setting.
   * We also save the original dateFormat so that we can
   * use it later in getMonthAndYear.
  **/
  $('#modifiedDatepickerThree').datepicker({
    monthAndYear: true,
    changeYear: true,
    dateFormat: 'yy-mm',
    beforeShow: function (input, instance) {
      monthAndYear.styleMonthAndYear.call(this, input, instance);
​
      var 
        date = $.datepicker.parseDate('yy-mm-dd', input.value + '-01'),
        originalDateFormat =
          instance.settings.dateFormat ||
          instance.settings.originalDateFormat;
​
      return {
        originalDateFormat: originalDateFormat,
        dateFormat: '',
        defaultDate: date
      };
    }
  });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers