I have the following function that produces numbered input fields with ids and names of the current timestamp they're were created. I'm trying to attach a datepicker to each one created, hence the unique/timestamp id's.

Can anybody suggest a way for me to go about doing this?

I believe the datepicker function needs to be produced under each input field created but I don't know how to produce a JavaScript function with JavaScript. I'm thinking maybe I can use jQuery's load() function and call a PHP script that produces a unique function and loads it into a div. Is that the best way to tackle this? Thanks!

<script>
    var number = 0;
    var num;
    $('#add_date').click(function(event) {
    number++;
    var d=new Date();
    var year = d.getFullYear();
    var day = d.getDate();
    var month = d.getMonth() + 1;
    if (month<10){var month = "0"+month;}
    if (day<10){var day = "0"+day;} 
    var fullyear = month+"/"+day+"/"+year;
    num = event.timeStamp
    $('#box').append( number+". <input type='text' id='" + num + "' name='" + num + "' value='"+ fullyear + "' size='10'/><br><br>");
    var idtag = "#"+num;
});
</script>

I have the following function that produces numbered input fields with ids and names of the current timestamp they're were created. I'm trying to attach a datepicker to each one created, hence the unique/timestamp id's.

Can anybody suggest a way for me to go about doing this?

I believe the datepicker function needs to be produced under each input field created but I don't know how to produce a JavaScript function with JavaScript. I'm thinking maybe I can use jQuery's load() function and call a PHP script that produces a unique function and loads it into a div. Is that the best way to tackle this? Thanks!

<script>
    var number = 0;
    var num;
    $('#add_date').click(function(event) {
    number++;
    var d=new Date();
    var year = d.getFullYear();
    var day = d.getDate();
    var month = d.getMonth() + 1;
    if (month<10){var month = "0"+month;}
    if (day<10){var day = "0"+day;} 
    var fullyear = month+"/"+day+"/"+year;
    num = event.timeStamp
    $('#box').append( number+". <input type='text' id='" + num + "' name='" + num + "' value='"+ fullyear + "' size='10'/><br><br>");
    var idtag = "#"+num;
});
</script>

• javascript
• jquery
• jquery-ui
• datepicker

4 Answers 4

Why not just set up the datepicker when you create the input?

var picker = $("<input/>", {
  type: 'text',
  id: num,
  name: num,
  value: fullyear
}).datepicker();

$('#box').append(number).append(picker);

Also you should make "id" values that look like valid identifiers instead of plain numbers.

Look at @Pointy's answer for an actual solution, he was quicker than me, my answer will not actually solve your problem, I just would like to mention a few points to note.

Try to indent your code properly, so it's easy to read for you after looking at it in a month's time. You might know now what it does exactly, but it will be a pain to figure it out in the long term.

As unlikely as it is, it can't be guaranteed that the same event won't fire twice in the same millisecond, I would avoid using event.timeStamp for generating unique IDs. It's just a personal preference though, it will probably never happen, I just don't like to rely on timers for uniqueness. You have your incrementing number variable already, you should use that, that will definitely be unique.

When writing HTML into a string, I would rather use the proper standard markup. Use ' as your string boundaries and " for your HTML attributes.

Lastly, inside your if(month<10){...} condition, don't redefine the variable you have already defined within your function. It would probably not throw an error or have any negative effect, but we can only thank the current forgiving javascript implementation for that, redefinition should not be allowed in the same scope.

Finally make sure you put all your jQuery initialisation code into the jQuery ready function to make sure the DOM and jQuery itself has fully loaded.

And sorry for the rant... ;)

$(function(){
    var number = 0;

    $('#add_date').click(function(event) {
        number++;

        var d=new Date();
        var year = d.getFullYear();
        var day = d.getDate();
        var month = d.getMonth() + 1;

        if (month<10) month = "0"+month;
        if (day<10) day = "0"+day;
        var fullyear = month+"/"+day+"/"+year;

        // Insert @Pointy's solution in here...
    });
});

You can add a fict

<input type='text' id='" + num + "' name='" + num + "' value='"+ fullyear + "' size='10' class='fake-class'/>

And then, you can load the datepicker object like this:

$('.fake-class').each(function(){
    $(this).datepicker();
});

Hope it helps

Just a little correction about the variable num and number, @Pointy was using num and @DarthJDG was using number. Here is the plete code that worked for me

In Script:

   var num = 0;
   $('#btn').click(function(event) {
        <!-- Set the default date to be todays date, can be removed for blank-->
        num++;  
        var d=new Date();
        var year = d.getFullYear();
        var day = d.getDate();
        var month = d.getMonth() + 1;

        if (month<10) month = "0"+month;
        if (day<10) day = "0"+day;
        var fullyear = month+"/"+day+"/"+year;
        <!-- End -->

        var picker = $("<input/>", {
          type: 'text',
          id: num,
          name: num,
          value: fullyear
        }).datepicker();
        $('#holder').append(num).append(picker);
    }

And in the HTML:

<input type="button" id="btn" value="button">
<div id="holder">
</div>