DatePicker JQuery в начальной загрузке

0

Я не могу заставить datepicker (jquery) работать на моей странице регистрации начальной загрузки. Я попытался щелкнуть, но ничего не случилось. я пропустил что-нибудь? Посмотрите на код ниже!

datepicker из jquery> http://jqueryui.com/datepicker/

<?php                  
    require("config.php");
    if(!empty($_POST)) 
    { 
        // Ensure that the user fills out fields 
        if(empty($_POST['username'])) 
        { die("Please enter a username."); } 
        if(empty($_POST['password'])) 
        { die("Please enter a password."); } 
        if(!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) 
        { die("Invalid E-Mail Address"); }                                                  
           if(empty($_POST['name'])) 
        { die("Please enter your name."); } 
           if(empty($_POST['gender'])) 
        { die("Please enter your gender."); } 
           if(empty($_POST['dateofbirth'])) 
        { die("Please enter your Date of Birth."); } 
           if(empty($_POST['nric'])) 
        { die("Please enter your NRIC."); } 
           if(empty($_POST['address'])) 
        { die("Please enter your address."); } 
            if(!filter_var($_POST['postalcode'], FILTER_SANITIZE_NUMBER_INT)) 
        { die("Invalid Postal Code"); } 
        if(!filter_var($_POST['mobilenumber'], FILTER_SANITIZE_NUMBER_INT)) 
        { die("Invalid Mobile Number"); } 
           if(empty($_POST['profession'])) 
        { die("Please enter your profession."); } 

       // =====================================================  

        // Check if the username is already taken
        $query = " 
            SELECT 
                1 
            FROM users 
            WHERE 
                username = :username 
        "; 
        $query_params = array( ':username' => $_POST['username'] ); 
        try { 
            $stmt = $db->prepare($query); 

            $result = $stmt->execute($query_params); 

        } 
        catch(PDOException $ex){ die("Failed to run query: " . $ex->getMessage()); } 
        $row = $stmt->fetch(); 
        if($row){ die("This username is already in use"); } 


        $query = " 
            SELECT 
                1 
            FROM users 
            WHERE 
                email = :email 
        "; 
        $query_params = array( 
            ':email' => $_POST['email'] 
        ); 
        try { 
            $stmt = $db->prepare($query);      
            $result = $stmt->execute($query_params); 
        } 
        catch(PDOException $ex){ die("Failed to run query: " . $ex->getMessage());} 
        $row = $stmt->fetch(); 
        if($row){ die("This email address is already registered"); } 



        $query = " 
            SELECT 
                1 
            FROM users 
            WHERE 
                nric = :nric 
        "; 
        $query_params = array( ':nric' => $_POST['nric'] ); 
        try { 
            $stmt = $db->prepare($query);       
            $result = $stmt->execute($query_params); 
        } 
        catch(PDOException $ex){ die("Failed to run query: " . $ex->getMessage()); } 
        $row = $stmt->fetch(); 
        if($row){ die("This NRIC is already in use"); }  


                $query = " 
            SELECT 
                1 
            FROM users 
            WHERE 
                mobilenumber = :mobilenumber 
        "; 
        $query_params = array( ':mobilenumber' => $_POST['mobilenumber'] ); 
        try { 
            $stmt = $db->prepare($query);       
            $result = $stmt->execute($query_params); 
        } 
        catch(PDOException $ex){ die("Failed to run query: " . $ex->getMessage()); } 
        $row = $stmt->fetch(); 
        if($row){ die("This Mobile Number is already in use"); }  





        //---------------------------------------------------- Add row to database 
        $query = " 
            INSERT INTO users ( 
                username, 
                password, 
                salt, 
                email,
                name,
                gender,
                dateofbirth,
                nric,
                address,
                postalcode,
                mobilenumber,
                profession



            ) VALUES ( 
                :username, 
                :password, 
                :salt, 
                :email, 
                :name,
                :gender,
                :dateofbirth,
                :nric,
                :address,
                :postalcode,
                :mobilenumber,
                :profession


            ) 
        "; 

        // Security measures
        $salt = dechex(mt_rand(0, 2147483647)) . dechex(mt_rand(0, 2147483647)); 
        $password = hash('sha256', $_POST['password'] . $salt); 
        for($round = 0; $round < 65536; $round++){ $password = hash('sha256', $password . $salt); } 
        $query_params = array( 
            ':username' => $_POST['username'], 
            ':password' => $password, 
            ':salt' => $salt, 
            ':email' => $_POST['email'], 
            ':name' => $_POST['name'], 
            ':gender' => $_POST['gender'], 
            ':dateofbirth' => $_POST['dateofbirth'], 
            ':nric' => $_POST['nric'], 
            ':address' => $_POST['address'], 
            ':postalcode' => $_POST['postalcode'], 
            ':mobilenumber' => $_POST['mobilenumber'], 
            ':profession' => $_POST['profession'], 
        ); 
        try {  
            $stmt = $db->prepare($query); 

            $result = $stmt->execute($query_params); 
        } 
        catch(PDOException $ex){ die("Failed to run query: " . $ex->getMessage()); } 
        header("Location: successful.php"); 
        die("Redirecting to successful.php"); 
    }                              

?>
<!-- Author: Michael Milstead / Mode87.com
     for Untame.net
     Bootstrap Tutorial, 2013
-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.png">

    <title>Sign Up -</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="jumbotron.css" rel="stylesheet">

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <script>
        $(function () {
            $("#datepicker").datepicker();
        });
    </script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
          <script src="../../assets/js/html5shiv.js"></script>
          <script src="../../assets/js/respond.min.js"></script>
        <![endif]-->
</head>
<body>
    <?php if (empty($_SESSION[ 'user'])) { include_once( "header.php"); } else { include_once( "header2.php"); }?>

    <div class="page-header">
        <div class="container">

            <h1> Register  </h1>

            <form action="register2.php" method="post" role="form">
                <div class="form-group">
                    <label>Username:</label>
                    <input type="text" name="username" value="" maxlength="20" />
                </div>
                <div class="form-group">
                    <label>Email: <strong style="color:darkred;">*</strong>
                    </label>
                    <input type="text" name="email" value="" maxlength="20" />
                </div>

                <div class="form-gtroup">
                    <label>Password:</label>
                    <input type="password" name="password" value="" maxlength="20" />
                    <br />
                    <br />
                </div>

                <div class="form-group">
                    <label>Name:</label>
                    <input type="text" name="name" value="" maxlength="20" />
                </div>


                <div class="form-group">
                    <label>Gender:</label>
                    <div class="radio">
                        <label>
                            <input type="radio" name="gender" id="male" value="male">Male
                        </label>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" name="gender" id="female" value="female">Female
                        </label>
                    </div>
                </div>

                <div class="form-group">
                    <label>Date of Birth:</label>
                    <input type="text" name="dateofbirth" value="" />
                </div>


                <div class="form-group">
                    <label>NRIC:</label>
                    <input type="text" name="nric" value="" maxlength="9" />
                </div>

                <div class="form-group">
                    <label>Address:</label>
                    <input type="text" name="address" value="" maxlength="50" />
                </div>

                <div class="form-group">
                    <label>Postal Code:</label>
                    <input type="text" name="postalcode" value="" maxlength="6" />
                </div>


                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon">+65</span>
                        <input type="text" name="mobilenumber" value="" class="form-control" placeholder="Mobile Number" maxlength="8">
                    </div>
                </div>

                <div class="form-group">
                    <label>Profession:</label>
                    <input type="text" name="profession" value="" maxlength="20" />
                </div>

                <div class="form-group">
                    <label>Date:</label>
                    <input type="text" name="dateofbirth" id="datepicker" value="" />
                </div>

                <input type="submit" class="btn btn-info" value="Register" />
            </form>

        </div>
    </div>

    <?php include_once( "footer.php");?>
</body>
</html>
  • 0
    Вы получаете какие-либо ошибки в вашей консоли javascript?
  • 0
    при обновлении страницы не отображалось никаких ошибок @Justin Wood
Показать ещё 3 комментария
Теги:
jquery-ui-datepicker

3 ответа

0

У вас зондирование с JQuery Conflict... вы можете сделать..

1. Declare jquery at header
2. Other Js at footer.

поэтому, когда вы инициализируете свой datepicker, он может иметь jQuery, который после инициализации перезаписывается bootsstrap jquery в нижнем колонтитуле.

Или

 You can have $.noconflict
0

Вы звоните

 $(function () {
      $("#datepicker").datepicker();
  });

У вас есть 2 поля даты, поле " Date of Birth поле " Date, только один из которых имеет идентификатор datepicker. Кроме того, если вы хотите несколько, вы должны использовать селектор классов, а не селектор идентификаторов.

Я предполагаю, что вы хотите, чтобы поля " Date Date of Birth и " Date использовали параметр datepicker.

Измените свой javascript на это:

 $(function () {
      $(".datepicker").datepicker();
  });

И добавьте класс datepicker к любым входам, которые вы хотите включить, например. Также я изменил его, так что оба поля не имеют одинакового имени dateofbirth

<div class="form-group">
    <label>Date of Birth:</label>
    <input class="datepicker" type="text" name="dateofbirth" value="" />
 </div>

и это:

<div class="form-group">
    <label>Date:</label>
    <input class="datepicker" type="text" name="date" value="" />
</div>

См. Этот рабочий скрипт JS с кодом, который я опубликовал. http://jsfiddle.net/AES54/

Вот еще одна скрипка с использованием тех же jquery ui js и css ссылок: http://jsfiddle.net/AES54/1/

  • 0
    Привет, я только что попробовал, но все равно это не работает! Для тех, кто прокомментировал сетевое подключение, я действительно так не думаю. Я протестировал исходный код datepicker с jqueryui.com/datepicker на странице нового файла, и он работает. Есть ли на этой странице регистрации что-то, что мешает выбору даты?
  • 0
    Я забыл добавить класс datepicker к первому. Просто разместил скрипку с моим кодом, все работает.
0

Попробуйте добавить скрипт внутри функции готовности документа, как показано ниже.

$(document).ready(function() {
           $(function() {
                  $( "#datepicker" ).datepicker();
           });
 });
  • 0
    $(function(){}); сокращение от $(document).ready(function(){}); ... даже если это действительно бессмысленно для меня
  • 0
    это не работает для меня! это убивает меня :(
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню