datepicker for dynamically generated textfield using javascript

StackOverflow https://stackoverflow.com/questions/15943447

Question

I have a small html file that contains a textfield where user enters the number of other textfield to be generated. for example if the user enters 3, 3 more textfield will be shown automatically. Then I use a JQuery datepicker to attach a datepicker to the generated textfield. unfortunately I could not attach the datepicker with that textfield plese advise

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery-ui-1.7.2/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.7.2/js/jquery-ui-1.7.2.min.js" type="text/javascript"></script>
<link href="jquery-ui-1.7.2/css/base/ui.core.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui-1.7.2/css/base/ui.datepicker.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui-1.7.2/css/base/ui.theme.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui-1.7.2/css/base/ui.datepicker.images.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2137022: #datepicker */

        #datepicker .ui-widget {
            font-family: inherit;
        }

        #datepicker .ui-datepicker {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        }

        #datepicker .ui-datepicker-title {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            font-size: 1.1em;
            color: #000;
            font-weight: normal;
            line-height: 1.8em;
        }


        #datepicker .ui-state-default, .ui-widget-content .ui-state-default {
            border-color: #330099;
            background-color: #330099;
            color: #330099;
        }

        #datepicker .ui-state-default, .ui-state-default a {
            color: #330099;
        }   


        #datepicker .ui-state-highlight, .ui-widget-content .ui-state-highlight {
            border-color:#66ccff;
            background-color:#66ccff;
            color:#330099;
        }       

        #datepicker .ui-state-active, .ui-widget-content .ui-state-active { 
            border-color: #ffcc00;
            background-color: #ffcc00;
            color: #330099; 
        }

        #datepicker .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus    
        {
            border-color: #ff9900;
            background-color: #ff9900;
            color: #330033;
        }

        #datepicker .ui-widget-header   
        {
            border-color: #5F5F5F;
            background-color: #808080;
            border-width: 1px;
        }

        /* Text attributes for the Days of Week Text */ 
        #datepicker .ui-datepicker table th
        {
            font-size: .8em;
            color: #000;
            font-weight: bold;
        }



/* EndOAWidget_Instance_2137022 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
  <oa:widget wid="2137022" binding="#datepicker" />
</oa:widgets>
-->
</script>
</head>

<body>
   <h3>Company Store Information</h3><br />
<input class="datepicker" name="commercial_license_issue_date" type="text"  /><br />

 <p>
  No. of Store <input type="text" onkeyup="BuildFormFields('FieldsStore',parseInt(this.value, 10), 'Store', 'store');" />
            <div id="FieldsStore" style="margin: 20px 0px;"></div>
            </p>

</body>
<script type="text/javascript">
function BuildFormFields($divName, $amount, $type1, $type2)
            {
                var
                    $container = document.getElementById($divName),
                    $item, $field, $i;

                $container.innerHTML = '';
                for ($i = 0; $i < $amount; $i++) {
                    $item = document.createElement('div');
                    $item.style.margin = '3px';

                    t = document.createElement('table');




                    $field = document.createElement('span');
                    $field.innerHTML = $type1 + ' Rent Issue Date';
                    $field.style.margin = '0px 10px';
                    $item.appendChild($field);

                    $field = document.createElement('input');
                    $field.name = $type2 + '_rent_issue_date[' + $i + ']';
                    $field.type = 'text';
                    $field.className = 'datepicker hasDatepicker';
                    //$("field").attr("class", "datepicker");
                    //$field.className = 'datepicker';
                    //$field.class = 'datepicker'
                    //$field.addClass('datepicker');
                    $item.appendChild($field);
                    var br = document.createElement("br");
                    $item.appendChild(br);

                    $field = document.createElement('span');
                    $field.innerHTML = $type1 + ' Rent Expiry Date';
                    $field.style.margin = '0px 10px';
                    $item.appendChild($field);

                    $field = document.createElement('input');
                    $field.className = 'datepicker hasDatepicker';
                    $field.ID = $type2 + '_rent_expiry_date[' + $i + ']';
                    $field.name = $type2 + '_rent_expiry_date[' + $i + ']';
                    $field.type = 'text';

                    $item.appendChild($field);
                    var br = document.createElement("br");
                    $item.appendChild(br);





                    var br = document.createElement("br");
                    $item.appendChild(br);
                    var br = document.createElement("br");
                    $item.appendChild(br);

                    $container.appendChild($item);
                }
            }

                    // BeginOAWidget_Instance_2137022: #datepicker
$('.datepick').each(function(){
    $(this).datepicker();
});
$(function() {
                    $(".datepicker").datepicker({ 
                    showOtherMonths: false, 
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: 'yy-mm-dd',
                    showOn: "button",
                    buttonImage: "/hrss/calendar.gif",
                    buttonImageOnly: true
                     });
                });

            </script>
</html>
Was it helpful?

Solution

After:

    $field = document.createElement('input');
    $field.className = 'datepicker hasDatepicker';
    $field.ID = $type2 + '_rent_expiry_date[' + $i + ']';
    $field.name = $type2 + '_rent_expiry_date[' + $i + ']';
    $field.type = 'text';

    $item.appendChild($field);

add:

    $($field).datepicker();

Also, I don't think you need to add the hasDatepicker class to the field, the datepicker widget adds that when it initializes it.

OTHER TIPS

This should do the job for you:

http://jsfiddle.net/urdLx/

<input type="text" id="numFields" />
<button id="makeFields">Make new fields</button>
<div id="FieldsStore" style="margin: 20px 0px;"></div>

<script>

(function ($) {
    $("#makeFields").bind("click", function () {
        for (var i = 0; i < parseInt($('#numFields').val()); i++) {
            $("#FieldsStore").append('<p><input class="datepicker" name="commercial_license_issue_date" type="text" /></p>');
            makeDatepickers();
        }

    })

    var makeDatepickers = function () {
        $(".datepicker").datepicker({
            showOtherMonths: false,
            changeMonth: true,
            changeYear: true,
            dateFormat: 'yy-mm-dd',
            showOn: "button",
            buttonImage: "/hrss/calendar.gif",
            buttonImageOnly: true
        });
    }
})(jQuery);

</script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top