You owe me a Coke.

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();

[download]

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.)

In reply to Re: add date picker in cgi page by Your Mother
in thread add date picker in cgi page by shan_emails

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.