SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Implementing J-Query DatePicker

    Hi,

    I am looking to implement a date picker to allow users to select a start and date. I have been recommended to use the jquery date picker however I am struggling to see how I implement into PHP.

    Do I need to wrap the code into an input box or do I use the existing input box?

    http://jqueryui.com/datepicker/#multiple-calendars

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    51
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Date picker is related to UI so it's not related to PHP but to jQuery. You can existing input box and call jQuery datepicker() on it to turn it to jQ date picker.

  3. #3
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks,

    Not totally sure what you mean. Do I set up a PHP input box and insert the jQuery code into it?

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    51
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    There is no such thing as PHP input box (at least not that I know of). You just place ordinary HTML input and call jQuery UI datepicker on it, if you want chosen date to be filled in that input box.

    See example: http://jsfiddle.net/7dQLH/1/

  5. #5
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Cheers,

    So do I set that code into a form with a submit button?

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    51
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, you can place it into form and pass it to PHP script using regular POST or GET form submit.

  7. #7
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Brillant thanks,

    It was actually much easier than I thought it was, however I am having problems creating two datepickers on the same page. I am trying to use datepicker and datepicker1 for the start and end date. However what configuration I try doesn't seem to work.

    Can you advise how to use two functions on the same page?

    Code:
    <script>
    $(function() {
    $( "#datepicker" ).datepicker();
    });
    $(function() {
    $( "#datepicker1" ).datepicker1();
    });
    </script>

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    51
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script type="text/javascript">
    $(document).ready(function() {
      $( "#datepicker, #datepicker1" ).datepicker();
    });
    </script>

  9. #9
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Brilliant thanks,

    I can insert the dates into the table as a text format. However understandably I cant use it as value to calcuate with.

    I have tried changing the 5 different date and times available in MyAdmin but I couldn't get that to work.

    Do I need to transfer the date value into a number and treat it as an excel calculation or does MySQL treat dates as valuables which can be calculated.

    I did find this but it states it is an eglish date but JQuery provides the US date format.

    http://php.net/manual/en/function.strtotime.php

  10. #10
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    51
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You can either use unix timestamp or mysql's date format. I personally tend to use unix timestamp.

    Take a look at this: http://api.jqueryui.com/datepicker/#method-getDate

    That will give you selected date in form of JS Date object. To convert Date object to unix timestamp see this: http://www.w3schools.com/jsref/jsref_gettime.asp

    Note that JS uses milliseconds for unix timestamp while PHP uses seconds, so you'd need to divide this number with 1000 either in JS or in PHP before working with this number later.


    Or, you can make input box read-only (so it must be filled using the date picker) and then construct unix timestamp later in PHP. Check this: http://php.net/manual/en/function.mktime.php


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •