CODEWITHSUNDEEP
jquerydatetimepickercountdowntimepicker
Codemagnet
Codemagnet

Reputation: 43

Using jquery datepicker with countdown plugin

I'm creating a product and one of the options that a customer will have is to choose their launch date using Trent Richardson's Timepicker. Their chosen launch date would be displayed on the front end using jQuery Countdown.

I have both plugins working, however I can't figure out how to connect the 2 i.e how to make the timepicker output data that is understandable by the countdown picker. Can these plugins work in this manner? I'm more used to working in a php environment so im struggling with the syntax involved here.

Any help would be most appreciated. Thanks

It's worth mentioning that the script to initialise the countdown ( i.e ) is called in a php file so I can use php to edit the data if necessary. Additionally, the date itself is saved as a php variable which I am now trying to call within the countdown function.

Upvotes: 1

Views: 996

Answers (1)

Codemagnet
Codemagnet

Reputation: 43

After much head bashing against the wall and deconstruction of other people's code, I managed to get it working. For those that may need help with this, here's how I did it:

Countdown takes the date in in this format: "February 01, 2012 00:00:00". To get this output from Trent's datetimepicker, you have to pass this into the function: 

                $("#countdowndate").datetimepicker({
                    showSecond: true,
                    dateFormat: 'MM dd, yy',
                    timeFormat: 'hh:mm:ss'
                });

I then passed my saved date into countdown like so:

    $(function () {
    var austDay = new Date("<?php echo $options['countdown_date']; ?>");
        $('#defaultCountdown').countdown({
            until: austDay,
            onExpiry: liftOff
        });
        $('#year').text(austDay.getFullYear());
        function liftOff() { 
            alert('We have lift off!'); 
        }
    });

In my case "$options['countdown_date']" is giving me my saved date as I am using Wordpress. You may have to tweak that to match your implementation

Sorry if that doesnt come out right, still new to stackoverflow. The key for me was to use capital "MM" for the date format to give the full name of the month.

Upvotes: 2

Related Questions