jQuery UI基础:如何使用日期选择器小部件?

时间:2017-09-18 20:48:00

标签: javascript jquery html jquery-ui jquery-ui-datepicker

这是我第一次使用html和JS,所以请保持温和。

我想使用jQuery UI中的Datepicker小部件,如Getting Started页面所示。​​

我认为我在链接我的html和JS文件时犯了一些错误。这就是我所拥有的:

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <script src="index.js"></script>
</head>
<body>
    <input type="text" name="date" id="date">
</body>
</html>

(我已按照指示在本地下载了jquery文件。)

index.js

$( "#date" ).datepicker();

但是当我在网络浏览器中打开index.html并单击文本框时,我看不到日历日期选择器弹出窗口,如“入门”页面所示。

请告诉我我做错了什么。这是我第一次尝试Html / JS的东西,我真的很沮丧。

1 个答案:

答案 0 :(得分:0)

你的datepicker代码应该如下所示

function extract_remote_zip($new_file_loc, $tmp_file_loc, $zip_url) {
    
    echo 'Copying Zip to local....<br>';
    
    //copy file to local
    if (!copy($zip_url, $tmp_file_loc)) {
        echo "failed to copy zip from".$zip_url."...";
    }
    
    //unzip 
    $zip = new ZipArchive;
    $res = $zip->open($tmp_file_loc);
    
    if ($res === TRUE) {
        echo 'Extracting Zip....<br>';
        if(! $zip->extractTo($new_file_loc)){
            echo 'Couldnt extract!<br>';
        } 
        $zip->close(); 
        echo 'Deleting local copy....<br>';
        unlink($tmp_file_loc);
        return 1;
        
        
    } else {
        echo 'Failed to open tmp zip!<br>';
        return 0;
    }
}

您必须将此代码放在index.js文件中。如果你的其他文件位置是正确的那么它应该可以工作。总是建议把所有使用DOM元素的jquery相关代码放到$(document).ready(function(){ $( "#date" ).datepicker(); }); 里面,这样一旦DOM准备好就会执行代码元素可用。