SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,096
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post Problem in selecting this

    Hi, sitepoint masters, I need some help on the datepicker, Is it possible to put an event on the datepicker date?... I mean just like this example in this date 12/12/12, how can i put an event like "press con meeting", and this will be displayed in the date of the datepicker,if i will navigate to the specified date i can see the text "press con meeting"..is this possible to the datepicker?please help me on this.

    Thank you in advance and i am hoping for your positive response.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Hi jemz,

    Can you provide some example code that I can run on my computer, so that I can better understand what you are trying to achieve.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jemz View Post
    Hi, sitepoint masters, I need some help on the datepicker, Is it possible to put an event on the datepicker date?
    No it's not. The datepicker is for picking dates. It's not for providing a system of calendar entries.
    You can instead use the FullCalendar for placing entries on certain dates.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,096
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    No it's not. The datepicker is for picking dates. It's not for providing a system of calendar entries.
    You can instead use the FullCalendar for placing entries on certain dates.

    Hi paul,yes this is what i mean,..so this is what we call full calendar,I am new to this...i give a try on this,i will write back to you..if i get in trouble.

  5. #5
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,096
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi jemz,

    Can you provide some example code that I can run on my computer, so that I can better understand what you are trying to achieve.

    Hi pullo, thank you for the quick reply, I apologize for my bad english. ...I thought datepicker can handle what i am trying to achieve but as what paul_wilkins said it is FullCalendar should be used,that's what i mean providing a system of calendar entries. for placing entries on certain dates... I will write back to you again,thank you so much for the quick reply.

  6. #6
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,096
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    @paul_wilkins, Is datepicker can also have the abilities to store entries,example if i click on May 2, 2013, in the datepicker it will alert "Go to dentist",but it's not the same as the full calendar,because the full calendar we can see the entries in the date.Also in the datepicker in the date May 2,2013 it will highlight the date to determine, that date has event or entries.

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    No problem. It sounded like you were after some kind of calendar functionality, but I wanted to be sure

  8. #8
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,096
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi jemz,

    Can you provide some example code that I can run on my computer, so that I can better understand what you are trying to achieve.
    Here is my code pullo, I want that if i click on the date april 01 2013,it should alert "I have a meeting".but i am confuse or i really dont know how to use the method beforeShowDay. I know that datepicker cannot do placing entries on certain date as what full calendar looks like as what paul_wilkins says...



    HTML Code:
    
    
    <!DOCTYPE html>
    
        <html>
            <head>
                <script type="text/javascript" src ="./js/jquery-1.9.1.min.js"></script>
                <script type="text/javascript" src ="./js/jquery-ui.js"></script>
                <link rel="stylesheet" href="css/jquery-ui.css">
    
                <script type="text/javascript">
    
                    $(function (){
                       var opt = {
                          appendText: "MM/DD/YY",
                          showOn: "button",
                           onSelect: function(date){
                               if(date==("04/01/2013")){
                                  // alert("hello");
                               }
                           },
                           beforeShowDay: function(date){
                               date = new Date();
                               var date  =  [true,null,"I have a meeting"];
                           }
    
                       };
    
                       $('#mydate').datepicker(opt);
    
                    });
                </script>
            </head>
        <body>
           <input type="text" id="mydate">
        </body>
        </html>

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Hi jemz,

    The problem with your code is that the function beforeShowDay() must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name or "" for the default presentation, and [2] an optional popup tooltip for this date.

    This will work and should hopefully give you something to go on:

    HTML Code:
    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title>jQuery UI Datepicker - beforeShowDay example</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <script>
        $(function() {
          $("#datepicker" ).datepicker({
            beforeShowDay: function(date) {
              dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
              if (dmy == "1-4-2013" || dmy == "15-4-2013"){
                return [false,"","Unavailable"]
              }else{
                return [true, ""];
              } 
            }
          });
        });
        </script>
      </head>
      <body>
        <p>Date: <input type="text" id="datepicker" /></p>
      </body>
    </html>
    Hope that helps.

  10. #10
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,096
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo, Thank you for this,but why is it will not alert unavailable or pop-up unavailable ?
    how can i alert this,by using onSelect ?

  11. #11
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,096
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi jemz,

    The problem with your code is that the function beforeShowDay() must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name or "" for the default presentation, and [2] an optional popup tooltip for this date.

    This will work and should hopefully give you something to go on:

    HTML Code:
    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title>jQuery UI Datepicker - beforeShowDay example</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <script>
        $(function() {
          $("#datepicker" ).datepicker({
            beforeShowDay: function(date) {
              dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
              if (dmy == "1-4-2013" || dmy == "15-4-2013"){
                return [false,"","Unavailable"]
              }else{
                return [true, ""];
              } 
            }
          });
        });
        </script>
      </head>
      <body>
        <p>Date: <input type="text" id="datepicker" /></p>
      </body>
    </html>
    Hope that helps.


    Hi pullo, is it possible to have different tooltip example this date 1-4-2013 "Unavailable" and in 15-4-2013 i want this tooltip to "Meeting" and etc..

    Thank you.

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by jemz View Post
    Hi pullo, Thank you for this,but why is it will not alert unavailable or pop-up unavailable ?
    how can i alert this,by using onSelect ?
    beforeShowDay() is called for each day in the datepicker before it is displayed.
    It must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name or "" for the default presentation.

    Other than that you can do what you like before te return.

    E.g.:

    Code JavaScript:
    beforeShowDay: function(date) {
      dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
      if (dmy == "1-4-2013" || dmy == "15-4-2013"){
        alert("Unavailable");
        return [false,""]
      }else{
        return [true, ""];
      } 
    }

    But that would be almost unusable.

    When you run my code as per post 9, the HTML generated on unselectable days looks like this:

    HTML Code:
    <td class=" ui-datepicker-unselectable ui-state-disabled " title="Unavailable"><span class="ui-state-default">15</span></td>
    It wouldn't take much to write a bit of code to get a reference to the title attribute of any <td> elelements with a class of "ui-state-disabled" and turn these into tool tips or popups or whatever.

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,892
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by jemz View Post
    Hi pullo, is it possible to have different tooltip example this date 1-4-2013 "Unavailable" and in 15-4-2013 i want this tooltip to "Meeting" and etc..
    Sure it's possible, but at some at point it stops being a good idea and you'll be better off using the calendar plugin that Paul linked to.

    To do this just use:

    Code JavaScript:
    if (){
      ...
    } else if (){
      ...
    }

    etc.

    Or use a switch statement.

  14. #14
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,096
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Sure it's possible, but at some at point it stops being a good idea and you'll be better off using the calendar plugin that Paul linked to.

    To do this just use:

    Code JavaScript:
    if (){
      ...
    } else if (){
      ...
    }

    etc.

    Or use a switch statement.

    Hi pullo, Thank you so much for helping me and for the quick reply


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
  •