Permalink
Browse files

Initial commit

  • Loading branch information...
0 parents commit 4551dfd87b6e477dded57c975a8954b2bba21df1 unknown committed Nov 1, 2011
Showing with 1,171 additions and 0 deletions.
  1. +29 −0 README
  2. BIN images/calendar.png
  3. +72 −0 index.html
  4. +1,070 −0 jquery.ui.monthpicker.js
29 README
@@ -0,0 +1,29 @@
+A Month Picker for [jQuery UI](http://jqueryui.com/)
+================================
+
+Why using it?
+---
+
+You may be already using [JQuery UI Datepicker](http://jqueryui.com/demos/datepicker/) and are now looking for a Monthpicker. Unfortunately, this is not part of the functionalities of JQuery UI Datepicker.
+After some Googling, you will realize two things: you are not alone having a need for a Monthpicker, and most solutions only are relying on dirty hacks on the original JQuery UI Datepicker widget.
+
+Be relieved, you have now found dedicated working and customizable Monthpicker implementation. In the background, it is largely based on JQuery UI Datepicker, which is why it is working so great and looking so nice!
+You will notice that the design is very similar to JQuery UI Datepicker, as it uses the same CSS. Hence it is fully compatible with your usual JQuery UI theme!
+
+Demo
+---
+
+[Here!](http://ec2-46-137-53-243.eu-west-1.compute.amazonaws.com/jquery-ui-monthpicker/)
+
+Alternatives
+---
+
+[Luciano Costa](https://github.com/lucianocosta/jquery.mtz.monthpicker) has developed his own implementation from scratch of a Monthpicker.
+It is far better than most JQuery UI Datepicker hacks you will find on the internet but it has some severe limitations: it has very limited settings, settings are shared by all instances on the same page...
+
+Ending text
+---
+
+Don't hesitate to contribute!
+
+ git clone git://github.com/thebrowser/jquery.ui.monthpicker
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<!--
+The source code of this widget lives updated at: https://github.com/thebrowser/jquery.ui.monthpicker
+Happy coding!
+-->
+<html lang='en'>
+ <head>
+ <meta charset='utf-8'>
+ <meta http-equiv='X-UA-Compatible' content='chrome=1'>
+ <meta name='description' content='Monthpicker, the missing JQuery widget. It allows you to pick up only month and year, without any ugly hack on Datepicker.' />
+ <meta name='keywords' content='jquery, ui, monthpicker, year-month, plugin' />
+ <meta name='author' content='Julien Poumailloux - http://github.com/thebrowser/jquery.ui.monthpicker' />
+ <title>Monthpicker, the missing JQueryUI widget.</title>
+ <link rel='stylesheet' href='http://jqueryui.com/themes/base/jquery.ui.all.css'>
+ <style type="text/css">
+ body {
+ margin-top: 1.0em;
+ background-color: #fff;
+ font-family: Helvetica, Arial, FreeSans, san-serif;
+ color: #000000;
+ }
+ #container {
+ margin: 0 auto;
+ width: 700px;
+ }
+ .ui-datepicker {
+ font-size:62.5%;
+ }
+ h1 { font-size: 3.3em; color: #2B3856; margin-bottom: 3px; }
+ h2 { font-size: 1.5em; color: #2B60DE; }
+ a { color: #8467D7; }
+ pre { background: #000; color: #fff; padding: 15px;}
+ </style>
+ </head>
+ <body>
+ <div id="container">
+ <h1>jquery-ui-monthpicker</h1>
+ <h2>Monthpicker #1</h2><input type='text' id='month1'><br />
+ <h2>Monthpicker #2 (with callbacks)</h2><input type='text' id='month2'>
+ <h2>Standard JQuery UI Datepicker</h2><input type='text' id='date1'>
+ <h2>Contribute!</h2>
+ <pre>$ git clone <a href='http://github.com/thebrowser/jquery.ui.monthpicker'>http://github.com/thebrowser/jquery.ui.monthpicker</a></pre>
+ <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
+ <script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js'></script>
+ <script src='./jquery.ui.monthpicker.js'></script>
+ <script type="text/javascript">
+ jQuery(document).ready(function() {
+ jQuery("#month1").monthpicker({
+ 'monthNamesShort' : ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
+ showOn: "both",
+ buttonImage: "images/calendar.png",
+ buttonImageOnly: true
+ });
+ jQuery("#month2").monthpicker({
+ showOn: "both",
+ buttonImage: "images/calendar.png",
+ buttonImageOnly: true,
+ beforeShow: function() { alert('beforeShow'); },
+ onSelect: function() { alert('onSelect'); },
+ onChangeYear: function() { alert('onChangeYear'); },
+ onClose: function() { alert('onClose'); }
+ });
+ jQuery("#date1").datepicker({
+ showOn: "both",
+ buttonImage: "images/calendar.png",
+ buttonImageOnly: true
+ });
+ });
+ </script>
+ </div>
+ </body>
+</html>
Oops, something went wrong.

0 comments on commit 4551dfd

Please sign in to comment.