Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
7 lines (7 sloc) 3.84 KB
---
timestamp: "Sat Oct 13 00: 00: 01 -0700 2007"
title: timely plugin
id: 76
content: " <p>One of the things I've needed to do at work is provide a\n date/time picker for events. The datetime select stuff that's\n built-in to Rails is pretty pathetic in terms of UI. It gets the job\n done, but it definitely gives the impression of scaffolding rather\n than the kind of polish that belongs in a final product.</p>\n\n <p>There's a neat-looking javascript calendar entry widget\n called <a href=\"http://datebocks.inimit.com/\">Datebocks</a> that\n provides a nicer interface. It\n was <a\n href=\"http://atmos.org/2007/2/1/datebocks-as-a-plugin\">packaged into\n a Rails plugin</a> by Corey Donohoe, but his plugin was for dates\n only rather than dates and time. I made some modifications to it so\n it works with datetime as well. You should be able to just use it as\n a drop-in replacement after installing the plugin and\n running <kbd>rake calendar:assets:install</kbd>.</p>\n\n <p>Note that by default Datebocks allows you to choose from a number\n of date formats popular in different locales. The default is ISO\n format: <i>yyyy-mm-dd HH: MM</i>, but if you poke at the javascript, \n you can adjust this. There is currently no way to adjust this on the\n Ruby side of things, and my time additions only affect the default\n date format. There is some really ugly logic in the JS that\n discouraged me from doing a complete fix, but it's really not much\n work to adjust if you need another date format. But really: ISO date\n format should keep everyone happy; it's something fairly easy to\n agree upon.</p>\n\n <p>And because it always helps to have a sample: </p>\n\n <script src=\"http://technomancy.us/javascripts/prototype.js\" type=\"text/javascript\"></script>\n <script src=\"http://technomancy.us/javascripts/datebocks_engine.js\" type=\"text/javascript\"></script>\n <script src=\"http://technomancy.us/javascripts/calendar.js\" type=\"text/javascript\"></script>\n <script src=\"http://technomancy.us/javascripts/calendar-setup.js\" type=\"text/javascript\"></script>\n <script src=\"http://technomancy.us/javascripts/calendar-en.js\" type=\"text/javascript\"></script>\n <link href=\"http://technomancy.us/stylesheets/datebocks_engine.css\" media=\"screen\" rel=\"Stylesheet\" type=\"text/css\" />\n <link href=\"http://technomancy.us/stylesheets/calendar.css\" media=\"screen\" rel=\"Stylesheet\" type=\"text/css\" />\n\n <div id=\"dateBockstimer_dt\" class=\"dateBocks\">\n <ul>\n <li><input id=\"timer_dt\" name=\"timer[dt]\" onChange=\"magicDate('timer_dt');\" onClick=\"this.select();\" onKeyPress=\"magicDateOnlyOnSubmit('timer_dt', event); return dateBocksKeyListener(event);\" size=\"17\" type=\"text\" /></li>\n <li><img src='/i/icon-calendar.gif' alt='Calendar' id='timer_dtButton' style='cursor: pointer; border: 0;' /></li>\n <li style='display: none;'><img src='/i/icon-help.gif' alt='Help' id='timer_dtHelp' /></li>\n </ul>\n <div id=\"dateBocksMessagetimer_dt\"><div id=\"timer_dtMsg\"></div></div>\n <script type=\"text/javascript\">\n $('timer_dtMsg').innerHTML = calendarFormatString;\n Calendar.setup({\n inputField : \"timer_dt\", // id of the input field\n ifFormat : calendarIfFormatTime, // format of the input field\n button : \"timer_dtButton\", // trigger for the calendar (button ID)\n help : \"timer_dtHelp\", // trigger for the help menu\n align : \"Br\", // alignment (defaults to \"Bl\")\n singleClick : true, \n showsTime : true\n });\n </script>\n </div>\n\n\
<p>In closing, I link to <a href=\"http://www.beigerecords.com/cory/pizza_party/\">Pizza Party</a>, a unix tool for ordering pizza.</p>\n\n"
tags: rails, javascript