Question

我遇到了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>

知道为什么它不起作用？

Answer 1

不需要定义datepicker 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添加到您想要datepicker的每个输入字段。

<input type="text" name="termin1" id="termin1"  class="required datepicker" 
       value="" 
       size="30" />

Answer 2

首先更改$().ready(function(){}) to $(document).ready(function(){})

jquery.com不推荐

$().ready(function(){})。

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

同时检查jquery-ui-timepicker-addon.js是否与jquery-1.9.1兼容。

JQuery TimePicker不起作用

2 个答案: