Datepicker用于动态生成的文本框

时间:2013-09-11 07:00:34

标签: jquery datepicker

我有这样的场景,

for( int i=0; i < 5; i++)
{
    <input type="text" id="t"+i val=""/>
}

我想要所有文本框的日期选择器......如何......?

是否可以在页面加载时使用..?

我试过这个,

并在选择日期后,应在尊重的文本框中设置

for( int i=0; i < 5; i++)
{
    <input type="text" id="t"+i val=""/>
    <input type="hidden" id="h"+i val=""/>
}



<script>
$(function () {
    var updateValue = false;
    $('input:hidden[id^=h]').datepicker({
        showOn: 'button',
        buttonText: 'Open calendar',
        buttonImageOnly: true,
        buttonImage: '/imagesOnline/calendar.png',
        dateFormat: 'dd/mm/yy',

        changeYear: atrue,
        changeMonth: true,
        onSelect: function (dateText, inst) {
            //how to set respected text field
            $('#ExpireDate').val(dateText);
        }
    });
    //Animate datepicker
    $("#AssignedPartnerOrgHidden1").datepicker("option", "showAnim", "show");

    //pointer mark on mouseover
    $(".ui-datepicker-trigger").mouseover(function () {
        $(this).css('cursor', 'pointer');
    });

});
</script>

5 个答案:

答案 0 :(得分:0)

$('input:text[id^=t]')input开始选择text类型idt的所有元素

$('input:text[id^=t]').datepicker();

attribute-contains-selector

^ attribute-starts-with-selector

在OP更新问题后更新

onSelect: function (dateText, inst) {
            var id = this.id.replace('h','');
            $('#t'+id).val(dateText);
        }

答案 1 :(得分:0)

在附加输入后再给它一个类..并且再次启动datepicker

 <input type="text" id="t"+i class="dynamicInput" val=""/>

并在附加后调用

//code for inserting the input
$('.dynamicInput').datepicker();

没有课程你可以使用属性选择器

$('input[id^=t]').datepicker();

答案 2 :(得分:0)

查看Jquery datepicker插件

请参阅http://jqueryui.com/datepicker/

这可以绑定到您正在创建的输入标记或预先存在的

一些简单的代码

<script>
    $("#datepicker").datepicker();
</script>

<html><input type="text" id="datepicker" />

答案 3 :(得分:0)

<input class="datepicker">
<input class="datepicker">
<input class="datepicker">
<input class="datepicker">
<input class="datepicker">
or 
for( int i=0; i < 5; i++)
{
    <input type="text" class = "datepicker " val=""/>
}
$('.datepicker').datepicker();

答案 4 :(得分:0)

Html:
<div class = "main_div"></div>
jQuery:
$(document).ready(function(){
for( var i=0; i < 5; i++)
{
$('.main_div').append('<input type="text"   class ="datepicker" val=""/><br/>');    
 }

$('.datepicker').each(function(i) {
    this.id = 'datepicker' + i;
}).datepicker();
});
Check this link: http://jsfiddle.net/6zfEY/51/