use strict;
use warnings;
use CGI qw( header start_html end_html h1 script link );
my $jquery = "http://code.jquery.com/jquery-latest.js";
my $datepicker = "http://dev.jquery.com/view/tags/ui/latest/ui/ui.date
+picker.js";
my $css = "http://dev.jquery.com/view/tags/ui/latest/themes/flora/flor
+a.datepicker.css";
print
header("text/html"),
start_html(-title => "Pick me! Pick me!",
-head => [ script({ -type => 'text/javascript',
-src => $jquery }, " "),
script({ -type => 'text/javascript',
-src => $datepicker }, " "),
link({-rel => "stylesheet", # Update! See th
+e info in follow-ups
-href => $css,
-type => "text/css",
-media => "screen",
-title => "Flora (Default)"}),
],
),
h1("Oh, hai! I can pix datez?");
print <<'SomeWebpadje';
<a href="http://docs.jquery.com/UI/Datepicker">UI Datepicker
v1.5.2 Documentation</a>.
<form>
<fieldset>
<legend>
Pick a date!
</legend>
<input type="text" name="specific_date" class="any_date"/>
</fieldset>
</form>
<script type="text/javascript"><!--//--><![CDATA[//><!--
$(document).ready(function(){
$("input.any_date").datepicker();
});
//--><!]]> </script>
SomeWebpadje
print end_html();
There are caveats. First: don't keep those URIs. They're included for convenience to test. Never bite bandwidth; get the scripts installed locally or use Google's API or whatever. Next, there are some tricky CGI calls in there. Note the scripts in the head have a body of " " -- that's necessary or you don't get _end tags. Last: templating is the way to go. I actually do CGIs like this sometimes, especially just for myself, but anything meant for real production or that might grow should have its concerns split (view, controlling code, and data/model; MVC).
Have fun. (Update: edited a functional but really weird jQuery selector.)
|