CODEWITHSUNDEEP
jquerydatepickerdatetimepicker
Andrzej Kozlowski
Andrzej Kozlowski

Reputation: 25

JQuery TimePicker does not work

I have following issue with datetimepicker. It works in first form where I have only one field for date, but it doesn't in this second form.

Java scripts:

    <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>

Form which does not work:

<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>

I use following HTML Form:

<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>

Any idea why it does not work?

Upvotes: 0

Views: 3872

Answers (2)

Morten Gustafsson
Morten Gustafsson

Reputation: 1889

Start by changing $().ready(function(){}) to $(document).ready(function(){})

$().ready(function(){}) is not recommended by jquery.com.

Do you get any errors in your console?

Also check if the jquery-ui-timepicker-addon.js is compatible with jquery-1.9.1.

Upvotes: 0

Andy
Andy

Reputation: 3012

It is not needed to define the datepicker 3 times, try to do it like this: 

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

You can add multiple classes by just using space between them so add datepicker to every input field where you want the datepicker.

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

Upvotes: 1

Related Questions