0

我对 datetimepicker 有以下问题。它适用于第一种形式，我只有一个日期字段，但它不适用于第二种形式。

Java 脚本：

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/redmond/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 src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/localization/messages_de.js"></script>
    <script src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>

不起作用的表格：

<script>

// register_form geburtsdatum date   

$().ready(function(){

    $.validator.addMethod("dateTime", function (value, element) {
        var stamp = value.split(" ");
        var validDate = !/Invalid|NaN/.test(new Date(stamp[0]).toString());
        var validTime = /^(([0-1]?[0-9])|([2][0-3])):([0-5]?[0-9])(:([0-5]?[0-9]))?$/i.test(stamp[1]);
        return this.optional(element) || (validDate && validTime);
    }, "Please enter a valid date and time.");

    $( "#termin1" ).datetimepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "-0:+1",
        dateFormat: 'yy-mm-dd'
    });
    $( "#termin2" ).datetimepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "-0:+1",
        dateFormat: 'yy-mm-dd'
    });
    $( "#termin3" ).datetimepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "-0:+1",
        dateFormat: 'yy-mm-dd'
    });            
});

$().ready(function(){
    $("#send_termin").validate({
        rules: {
            termin1: {
                required: true,
                dateTime: true
            },
            termin2: {
                required: true,
                dateTime: true
            },
            termin3: {
                required: true,
                dateTime: true
            },                
        },
        errorElement: "span",   
        errorPlacement: function(error, element) {
            error.insertAfter(element);
        }                
    });
});  

</script>

我使用以下 HTML 表单：

<form action="" id="send_termin" method="post">
    <input type="hidden" name="action" value="view_message_add" />     
    <input type="hidden" name="sid" value="<?=$sid?>" />        

    <label for="termin1">Erste Termin:</label>
    <input type="text" name="termin1" id="termin1"  class="required"
           value="" 
           size="30" />
    <span></span>
    <br />      

    <label for="termin2">Zweite Termin:</label>
    <input type="text" name="termin2" id="termin2"  class="required"
           value="" 
           size="30" />
    <span></span>
    <br /> 

    <label for="termin3">Dritte Termin:</label>
    <input type="text" name="termin3" id="termin3"  class="required"
           value="" 
           size="30" />
    <span></span>
    <br /> 

    <label for="message">Nachricht:</label>        
    <textarea rows="4" cols="50" maxlength="1000" id="Nachricht" name="Nachricht">Schreib hier kurze Nachricht für ihren Gegner. (Max 1000 Zeichen)
    </textarea> 
    <br />         

    <input type="submit" value="Senden" />
</form>

知道为什么它不起作用吗？

4

2 回答 2

1

不需要定义日期选择器 3 次，尝试这样做：

$( ".datepicker" ).datetimepicker({// will apply to every input field wich has the class 'datepicker'
    changeMonth: true,
    changeYear: true,
    yearRange: "-0:+1",
    dateFormat: 'yy-mm-dd'
});

您可以通过在它们之间使用空格来添加多个类，因此添加datepicker到您想要日期选择器的每个输入字段中。

<input type="text" name="termin1" id="termin1"  class="required datepicker" 
       value="" 
       size="30" />
于 2013-09-02T20:08:04.923 回答
0

从改变开始$().ready(function(){}) to $(document).ready(function(){})

$().ready(function(){})jquery.com 不推荐。

您的控制台中是否有任何错误？

还要检查是否jquery-ui-timepicker-addon.js与jquery-1.9.1.

于 2013-09-02T20:01:42.247 回答