SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How use calendar with a dynamic generated textbox

    Hi Peers,
    i am creating dynamic textboxes where the user has to choose a date.
    I have my calendar.js file that i usually call to popup a calendar when using static textboxes...my question is how can use it with dynamic textboxes ?

    Below is a portion of my code that create my dynamic textbox

    thanks

    newStartDate = document.createElement( 'INPUT' );
    newStartDate.setAttribute('id','id1');
    newStartDate.setAttribute('name','StartDateName');

  2. #2
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The answer has to be Yes but the current information given is not enough to tell you how.

    Normally the popup calendar would be trigger by some event.

    For example shifting focus to the text box or clicking a calendar icon beside the text box.

    In the first case, shifting focus, the text box has an event listener for "focus" which causes the pop up the calendar. There is no reason why the dynamically created textbox should not have a similar event listener.

    In the second case, icon, when the text box is created the icon must also be created.

  3. #3
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Phillip,

    Thanks for the reply.. Here is an example where i am using it on a static ( regular( textbox) and i am aslo using in this example, the calendar img:

    ==========================================
    static textbox
    ==========================================

    <cfinput name="PROJECT_LAUNCH_DATE" type="text" size = "10" maxlength="10" style="background-color:##FFFFD4"
    message="- Launch Date is Required" validate="date" validateat="onsubmit" required="yes"/>
    <script language='javascript'>
    if (!document.layers) {
    document.write("<img src=../media/forms/cal.gif height=16 width=16 onclick='popUpCalendar(this, form1.PROJECT_LAUNCH_DATE, \"mm/dd/yyyy\")' alt='click here to choose date'>")
    }
    </script>
    <img src="../media/images/asterix.jpg" />


    ==========================================
    Dynamic Textbox
    ==========================================

    newStartDate = document.createElement( 'INPUT' );
    newStartDate.setAttribute('id','id1');
    newStartDate.setAttribute('name','StartDateName');

  4. #4
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I notice you have <cfinput . Is this just a typo or am I missing something?

    I also notice your have the code "(!document.layers)" which just the long gone days of Netscape. It makes me worry about the calendar code you are using.

    Essentially the code you presented

    Code JavaScript:
    <input name="PROJECT_LAUNCH_DATE" type="text" size = "10" maxlength="10" style="background-color:##FFFFD4" 
    message="- Launch Date is Required" validate="date" validateat="onsubmit" required="yes"/>
    <script language='javascript'>
    if (!document.layers) {
    document.write("<img src=../media/forms/cal.gif height=16 width=16 onclick='popUpCalendar(this, form1.PROJECT_LAUNCH_DATE, \"mm/dd/yyyy\")' alt='click here to choose date'>")
    }

    This uses javascript to present an image after the input box and assign it a onclick event which calls a function popUpCalendar. This function has two arguments, "this" (the image - presumably for positioning) and the name of the input box to which it relates.

    The javascript you are using to create the dynamic input box must mirror this.

    Now there are a lot of browser independent considerations here and life would be a lot easier if you used jquery. Have you thought of doing so.

    The jquery UI has a very nice datepicker utility.

  5. #5
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Phillip ,
    I used the code below with dymnamic generated textbox name but it does not work.

    For the <cfinput .., it is normal as i am using Coldfusiuon which has same tags as html except the cf in the begining ..

    For your suggestion of using Jquery i do not have any problem to learn about it..is it going to work with dynamic stuff ...and can you point me to a simple calendar picker example please ?

    thanks a lot

  6. #6
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did surmise that it was coldfusion but it is not a piece of software with which I am familiar.

    Demo and documentation on the jquery ui datepicker can be found at jQuery UI - Datepicker Demos & Documentation

  7. #7
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Phillip ,
    thanks i got that already and testing.. but i can not make working with my code ..

  8. #8
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What problem are you experiencing;

  9. #9
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can not find the logic how to link my created textbox with the calendar .
    here is my code that genearte the textbox :
    i need just that part that calls the calendar (of course i am including the relateds calendar_us.js and css one in the heade)

    newStartDate = document.createElement( 'INPUT' );
    newStartDate.setAttribute('id1','id'+ elementid+elementrow);
    newStartDate.setAttribute('name','StartDateName'+ elementid+elementrow);
    newStartDate.size=8;
    newStartDate.style.backgroundColor= bgc;


    and here is how Jquery iscreating new dynamic element with calendar


    <script language="JavaScript">
    var N_CALNUM = 1;
    function f_createContent() {
    var e_div = f_getElement('container');
    e_div.innerHTML += N_CALNUM
    + '. <input type="text" name="testinput' + N_CALNUM + '" value="" />'
    + '<img title="Open Calendar" class="tcalIcon" onclick="A_TCALS[\'myCalID' + N_CALNUM + '\'].f_toggle()" id="tcalico_myCalID' + N_CALNUM + '" src="img/cal.gif"/><br />';

    new tcal ({
    // form name
    'formname': 'testform',
    // input name
    'controlname': 'testinput' + N_CALNUM,
    // set unique ID to identify the elements
    'id': 'myCalID' + N_CALNUM
    });

    N_CALNUM++;
    }
    function f_removeContent() {
    var e_div = f_getElement('container');
    e_div.innerHTML = '';
    window.A_TCALS = null;
    window.A_TCALSIDX = null;
    N_CALNUM = 1;
    }
    </script>


    ??


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
  •