Question

I am trying to get the jquery plugins timpickr and multidatespicker to work on the same page. Unfortunately I’m having issues getting them to work together. They are both located here:

http://code.google.com/p/jquery-utils/wiki/UiTimepickr

http://multidatespickr.sourceforge.net/

This is my current code:

Test

<link type="text/css" href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-v1.4.4.js"></script>

<!-- Start Timepickr -->
    <link rel="Stylesheet" media="screen" href="css/ui.timepickr.css" />
    <script type="text/javascript" src="js/jquery.timepickr.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){ 
            $('#inTime').timepickr({convention: 12}); 
            $('#outTime').timepickr({convention: 12}); 
        }); 
    </script>
<!-- END Timepickr-->

<!-- POPUP CALENDAR --> 
    <!--<script type="text/javascript" src="js/jquery-v1.4.4.js"></script>-->
    <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.multidatespicker.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#date').multiDatesPicker({numberOfMonths: 2});
        });
    </script>
<!-- END POPUP CALENDAR-->

    Date:  <input type="text" name="date" id="date">    
    <br>
    Time In:  <input type="text" name="inTime" id="inTime">
    <br>
    Time Out:  <input type="text" name="outTime" id="outTime">

Currently timepickr works. If you add in “script type=”text/javascript” src=”js/jquery-v1.4.4.js”” right after where “!–Popup Calendar–” starts, the calendar will work but then timepickr does not. Does anyone have any suggestions as to what I’m doing wrong?

Thanks!
-Brandon

Answer 1

Alright, I’ve been taking a serious look at the plugins and I know what your problem is.
You’re missing a couple of scripts needed for the plugins to work.
Here is a solution where both plugins work, I tested it myself.
You can see in the source tags where I got the modules from, they actually came with the plugin packages.

<!-- Stylesheets -->
<link rel="Stylesheet" media="screen" href="/ui-timepickr/dist/themes/default/ui.core.css" />
<link rel="Stylesheet" media="screen" href="/ui-timepickr/dist/themes/default/ui.timepickr.css" />
<link rel="stylesheet" type="text/css" href="/multidates/css/mdp.css">

<!-- latest JQuery module -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<!-- JQuery UI -->
<script type="text/javascript" src="/multidates/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="/multidates/js/jquery.ui.datepicker.js"></script>
<!-- Spanish dates -->
<script type="text/javascript" src="/multidates/js/jquery.ui.datepicker-es.js"></script>

<!-- timepickr -->
<script type="text/javascript" src="/ui-timepickr/page/jquery.ui.all.js"></script>
<script type="text/javascript" src="/ui-timepickr/page/jquery.utils.js"></script>
<script type="text/javascript" src="/ui-timepickr/page/jquery.strings.js"></script>
<script type="text/javascript" src="/ui-timepickr/page/jquery.anchorHandler.js"></script>
<script type="text/javascript" src="/ui-timepickr/src/ui.dropslide.js"></script>
<script type="text/javascript" src="/ui-timepickr/src/ui.timepickr.js"></script>

<!-- datepicker -->
<script type="text/javascript" src="/multidates/jquery-ui.multidatespicker.js"></script>

<!-- execution code -->
<script type="text/javascript">
        $(document).ready(function(){
            //timepickr
            $('#inTime').timepickr();
            $('#outTime').timepickr();

            //popup calendar
            $('#date').multiDatesPicker();
        });
</script>

Date:  <input type="text" name="date" id="date">    
<br>
Time In:  <input type="text" name="inTime" id="inTime">
<br>
Time Out:  <input type="text" name="outTime" id="outTime">

I hope that solves it for you. To make it easier, put all the necessary modules under the same directory, so you don’t accidentally add a duplicate of the same script, IE, one directory for everything that has to do with JQuery, and another directory for plugins. To learn more about the plugins, I suggest you read their documentation.