jquery - Perl-CGI JQuery 日期选择器

Question

有人可以帮我在表单中添加 JQuery datepicker 小部件（类似于http://jqueryui.com/datepicker/#inline）并在表单提交时加载 gif 吗？（我不拥有以下代码，是从支持论坛获得的，我正在构建它）。一些帮助将不胜感激。

提前谢谢..

    use strict;
    use warnings;
    use CGI;
    use CGI::Carp qw(fatalsToBrowser); # Remove this in production
    use win32::OLE;

my $who;
my $runCmd;
my $retVal;
my $fileCon;
my $copyCmd;


    my $q = new CGI;
    my $statusURL;
    my $iframeCode;
    print $q->header();

    # Output stylesheet, heading etc
    output_top($q);

    if ($q->param()) {
    # Parameters are defined, therefore the form has been submitted
    display_results($q);
    output_end2($q);

    } else {
    # We're here for the first time, display the form
    output_form($q);
    output_end($q);

    }

    # Output footer and end html

    exit 0;

    #-------------------------------------------------------------

    # Outputs the start html tag, stylesheet and heading
    sub output_top {
    my ($q) = @_;
    print $q->start_html(
        -title => 'Deployment Dashboard',
        -bgcolor => 'white',
        -style => {
        -code => '
            /* Stylesheet code */
            body {
            font-family: verdana, sans-serif;
            }
            h2 {
            color: darkblue;
            border-bottom: 1pt solid;
            width: 100%;
            }
            div {
            text-align: left;
            color: steelblue;
            border-top: darkblue 1pt solid;
            margin-top: 4pt;
            }
            a {
            text-align: left;
            color: steelblue;
            }
            th {
            text-align: right;
            padding: 2pt;
            vertical-align: top;
            }
            td {
            padding: 2pt;
            vertical-align: top;
            }
            /* End Stylesheet code */
        ',
        },
    );
    print $q->h2("Deployment Dashboard");
    }

    # Outputs a footer line and end html tags
    sub output_end {
    my ($q) = @_;
    print $q->div("Gil Gbzy Ipe");
    print $q->end_html;
    }
    sub output_end2 {
    my ($q) = @_;

    print $q->end_html;
    }

    # Displays the results of the form
    sub display_results {
    my ($q) = @_;

    #print $q->param('Input_IP');

    my @values = split(' ', $q->param('Input_IP'));
    print <<END;

<table border="1">
    <tr>
    <td></td>
    <td>checkpoint 1<br></td>
    <td>checkpoint 2<br></td>
    <td>checkpoint 3<br></td>
    <td>checkpoint 4<br></td>
    <td>checkpoint 5<br></td>
    <td>checkpoint 6<br></td>
    <td>checkpoint 7<br></td>
    </tr>
END


  foreach my $val (@values) {

print "    <tr>";
print "           <td>$val</td>";
print "            <td>1</td>";
print "            <td>2</td>";
print "            <td>3</td>";
print "            <td>4</td>";
print "            <td>5</td>";
print "            <td>6</td>";
print "            <td>7</td>";
print "                </tr>";

  }
print "</table>";
    }

    # Outputs a web form
    sub output_form {
    my ($q) = @_;
    print $q->start_form(
        -name => 'main',
        -method => 'POST',
    );

    print $q->start_table;

    print $q->Tr(
      $q->td('Ip Addresses:'),
      $q->td(
        $q->textarea(-name=>'Input_IP',
            -default=>'
1.1.1.1
2.2.2.2',
            -rows=>5,
            -columns=>40,
        )
      )
    );

    print $q->Tr(
      $q->td($q->submit(-value => 'Submit')),
      $q->td('&nbsp;')
    );
    print $q->end_table;
    print $q->end_form;
    }

Answer 1

I admit this is not a comprehensive answer, but this is a Perl program that generates a page, which includes some fields with the JQuery datepicker implemented, I see you are using HEREDOC so you can just pull the scripts from google and add the datepicker() method on your script, since Perl and jQuery use the $ there might be conflicts, so when referring a jQuery object make sure you use \$ or jQuery otherwise it will print it out as 0.

use CGI; ## load the cgi module
use CGI::Carp qw(fatalsToBrowser);
use Cwd;
use File::Basename;
print "Content-Type: text/html\n\n";

use Cwd            qw( abs_path );
use File::Basename qw( dirname );

my $test = dirname(abs_path($0));

my $q = new CGI; ## create a CGI object
my($day, $month, $year)=(localtime)[3,4,5];
$year = ($year+1900);


print <<HTML;
<HTML>
<HEAD>
<TITLE>Sistema de Captura </TITLE>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" type="text/css">
<script type="text/javascript" src="js/states.js" language="javascript">  </script>
 <script>
\$(document).ready(function() {

    var d = new Date();
    var curr_date = d.getDate();
    var curr_month = d.getMonth() + 1; //Months are zero based
    var curr_year = d.getFullYear();
    \$("#dm_date").val(curr_date + "/" + curr_month + "/" + curr_year);
    \$( ".datepicker" ).datepicker({
    yearRange: "1901: $year ",
      changeMonth: true,
      changeYear: true
    });

    jQuery("#dataTable").on("change","input,textarea,select",function(){        
            if (jQuery(this).val()){
                    jQuery(this).addClass('text_com');
            }else{
                    jQuery(this).removeClass('text_com');
            }   
    }); 


    jQuery("#sendForm").button().click(function(e){

        e.preventDefault();
        var errorString="";

            jQuery("#dataTable  input, #dataTable  textarea, #dataTable  select").each(function(){      
                    if(!jQuery(this).val()){
                    errorString +=  jQuery(this).prev().text().replace(":","") + "<br />";
                    }   
            });     

                    if(errorString){

                        jQuery("#listHere").empty().html(errorString);

                        jQuery( "#dialog-confirm" ).dialog({

                                buttons: {
                                            "Aceptar": function() {
                                                    jQuery( this ).dialog( "close" );
                                            }
                                }

                        });
                    }else{

                        var data = jQuery("#dataHolder").serialize();

                        console.log(data);

                    }

        });

});
 </script>
 <style>
 .ui-widget{font-size:12px;}
 .ui-dialog .ui-dialog-titlebar {
    padding: 1px;
    position: relative;
}
.inner{
    font-size:9px;

}
.padder{
    padding: 3px;   
    margin-left:-6px;
}
 </style>
</head>
<body>

<div id="index">
<div id="departments_listing" class="ui-widget ui-widget-content ui-corner-all" >
<div class="ui-widget-header" style="font-size:12px;">Formato de captura</div>

<form id="dataHolder">
<table id="dataTable">
<tr>
<td>
<p><span class="separate" >Fecha:</span> <input type="text" name="dm_date" id="dm_date" value="" class="text text_com"  readonly /></p>
<p><span class="separate" >Nombre:</span> <input type="text" name="dm_name" id="dm_name" value="" class="text"  /></p>
<p><span class="separate" >Apellido Paterno:</span> <input type="text" name="dm_paterno" id="dm_paterno" value=""  class="text" /></p>
<p><span class="separate" >Apellido Materno:</span> <input type="text" name="dm_materno" id="dm_materno" value=""  class="text"  /></p>
<div class="ui-widget ui-widget-content ui-corner-all padder" >
<div class="ui-widget-header inner" > Datos USA</div>
<p><span class="separate" >Direccion</span>  
<textarea name="dm_address_usa" id="dm_address_usa"  class="text"  ></textarea>
</p>
<p><span class="separate" >Ciudad:</span>  <input type="text" name="dm_city" id="dm_city" value=""  class="text"  /></p>
<p><span class="separate" >Estado:</span>  <input type="text" name="dm_state" id="dm_state" value=""  class="text"  /></p>
<p><span class="separate" >CP:</span>  <input type="text" name="dm_zip" id="dm_zip" value=""  class="text"  /></p>
<p><span class="separate" >Telefono:</span>  <input type="text" name="dm_tel" id="dm_tel" value=""  class="text"  /></p>
</div>

<p><span class="separate" >Nombre del Padre:</span>  <input type="text" name="dm_father" id="dm_father" value=""  class="text"  /></p>
<p><span class="separate" >Nombre de la Madre:</span>  <input type="text" name="dm_mother" id="dm_mother" value=""  class="text"  /></p>
<p><span class="separate" >Fecha de Nacimiento:</span>  <input type="text" name="dm_dob" id="dm_dob" value=""  class="text datepicker"  /></p>
<p><span class="separate" >Lugar de Nacimiento:</span>  <input type="text" name="db_pob" id="db_pob" value=""  class="text"  /></p>     
</td>



<td class="moreleft">


<p><span class="separate" >Fecha de Registro:</span>  <input type="text" name="dm_dor" id="dm_dor" value=""  class="text datepicker"  /></p>
<p><span class="separate" >Lugar de Registro:</span>  <input type="text" name="dm_por" id="dm_por" value=""  class="text"  /></p>
<p><span class="separate" >Estado MX:</span>  <input type="text" name="dm_state_mx" id="dm_state_mx" value=""  class="text"  /></p>

<p><span class="separate" >No. de Oficialia:</span>  <input type="text" name="dm_oficialia" id="dm_oficialia" value=""  class="text"  /></p>
<p><span class="separate" >No. de Libro:</span>  <input type="text" name="dm_book" id="dm_book" value=""  class="text"  /></p>
<p><span class="separate" >No. de Foja:</span>  <input type="text" name="dm_foja" id="dm_foja" value=""  class="text"  /></p>
<p><span class="separate" >No. de Acta:</span>  <input type="text" name="dm_acta" id="dm_acta" value=""  class="text"  /></p>


<p><span class="separate" >Tipo de Documento:</span>  
<select name="dm_type" id="dm_type"    class="text" >
<option value="">Selecciona</option>
<option value="Aclaracion de Acta"> Aclaración de Acta </option>
<option value="Inscripcion en el Registro Civil"> Inscripción en el Registro Civil </option>
<option value="Acta de Matrimonio"> Acta de Matrimonio </option>
<option value="Acta de Divorcio"> Acta de Divorcio </option>
<option value="Acta de Defuncion"> Acta de Defunción </option>
<option value="Registro Extemporaneo."> Registro Extemporáneo </option>
<option value="Juicios Administrativos"> Juicios Administrativos </option>
<option value="Nulidad de Acta en el Registro Civil Mexicano"> Nulidad de Acta en el Registro Civil Mexicano </option>
<option value="Apostille"> Apostille </option>
<option value="Legalización de documentos"> Legalización de documentos</option>
</select>
</p>


<p><span class="separate" >Estatus:</span>  
<select name="dm_status" id="dm_status"    class="text" >
<option value="">Selecciona</option>
<option value="Pendiente"> Pendiente </option>
<option value="Deposito en Proceso"> Deposito en Proceso </option>
<option value="Deposito Recibido"> Deposito Recibido </option>
<option value="Cerrado"> Cerrado </option>
<option value="Cancelado"> Cancelado </option>
</select> 

</p> 
<p><span class="separate" >Email:</span>  <input type="text" name="dm_email" id="dm_email" value=""  class="text"  /></p>
<p><span class="separate" >Caso :</span>  
<select name="dm_special" id="dm_special"    class="text" >
<option value="">Selecciona</option>
<option value="Acta">Acta</option>
<option value="Especial">Caso Especial</option>
</select>
</p> 

<p><span class="separate" >Comentarios:</span>  
<textarea name="dm_comments" id="dm_comments"  class="text"  ></textarea></p>
<p><span class="separate" >Imagen:</span>  
<input type="file" name="dm_img" id="dm_img" value=""     /></p>

</td>
</tr>
</table>
</form>
<button id="sendForm"> Enviar </button>
</div>
</div>

<div id="dialog-confirm" title="Errores encontrados..">
  <p> Falta información en los siguientes campos:
  <div id="listHere"></div>
  </p>
</div>

</body>
</html>
HTML

sub trim($) {   

    my $string = shift;   
    $string =~ s/^\s+//;  
    $string =~ s/\s+$//;      
    return $string;    

}

exit(0);