Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <div class="date-picker" data-datePiceker></div>
  
</body>
</html>
 
.date-picker table {
  border-collapse:collapse;
}
.date-picker td {
  border:1px solid silver;
  cursor:pointer;
}
.date-picker td:hover {
  color:red;
}
 
(function( $ ) {
  
  // Объявление плагина
  $.fn.datePicker = function(options)
  {
  
    var self = $(this),
        options = options || {
          year: 2012,
          month: 1,
          day: 1
        };
    var date = new Date(options.year, options.month, options.day),
        d = new Date(options.year, options.month, 1),
        table = $('<table />'),
        tr = $('<tr>');
    
    tr.appendTo(table);
    
    // Добавляем начало месяца
    for (i=0; i < d.getDay(); i++) {
      tr.append('<td />');
    }
    
    // Добавляем даты
    while (d.getMonth() == date.getMonth()) {
      if (i % 7 == 0) {
        tr = $('<tr />');
        tr.appendTo(table);
        i = 0;
      }
      
      var td = $('<td>' + d.getDate() + '</td>');
      td.data('date', d.toString());
      tr.append(td);
      
      d.setDate(d.getDate() + 1);
      i++;
    }
    
    // Добавляем конец месяца
    for (i=0; i < 7 - d.getDay(); i++) {
      tr.append('<td />');
    }
   
    table.appendTo(self);
    
    // При клике на ячейку таблицы генерируем событие 'change' для плагина
    table.find('td').on('click', function() {
      // Вторым параметром передаем дату
      self.trigger('change', $(this).data('date'));
    });
    
    return self;
    
  };
  
  
  // Инициализация плагина
  $('[data-datePiceker]').datePicker();
  
  
  // Навешивание слушателя на событие
  $('[data-datePiceker]').on('change', function(event, date) {
    alert(date);
  });
  
})( jQuery );
Output

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

Dismiss x
public
Bin info
jmaspro
0viewers