Criar vários datepickers

[bcs_ptx 0]

Eai pessoal, o problema que encontrei foi que cada campo que usar esta função tem que ter um id diferente, mas como faço isso a partir da função no jquery?

$(function() {
	$("#datepicker").datepicker({
		dateFormat: 'dd/mm/yy',
		dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
		dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
		dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
		monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
		monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
		currentText: 'Hoje',
		nextText: 'Próximo',
		prevText: 'Anterior'
	});
});

<input type="text" id="datepicker_1" name="data[]">

<input type="text" id="datepicker_2" name="data[]">

 

como eu faço para funcionar nos dois campos? abraços

[Douglas Julião 34]

$("#datepicker_1").datepicker();
$("#datepicker_2").datepicker();

Se não me engano é assim

[bcs_ptx 0]

Sim, mas como fazer isso dinamicamente, sem criar as duas linhas, ex:

 

$("#datepicker_'recebe id'").datepicker();

[rdpacato 2]

tente algo como

 

var variável = "texto";

 

$('#dataFin' + variavel).datepicker

 

Aqui está um que uso um inicial e final.. ela está parametrizada para limitar em 30 dias... e tal.. mas vai mudando ai do jeito que quer.. .:

$(function() {
    $.datepicker.setDefaults({
    	dateFormat: 'dd/mm/yy',
	    dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','---ta','Sábado'],
	    dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
	    dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','---','Sáb','Dom'],
	    monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
	    monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
	    nextText: 'Próximo',
	    prevText: 'Anterior',
	    required: true,
		showOtherMonths:true,
        selectOtherMonths: false,
		changeMonth:true,
        changeYear:true, 
    	firstDay: 0
    	
/*     	showOn:"button",
		buttonImage: "./img/calendar_icon.png",
		buttonImageOnly: true */
    });
    
	$('#dataIni').datepicker({onSelect: function(date) {
		date = $(this).datepicker('getDate');
		var maxDate = new Date(date.getTime());
		maxDate.setDate(maxDate.getDate() + 31);
		$('#dataFin').datepicker('option', {minDate: date, maxDate: maxDate});           
	}});
    
    $('#dataFin').datepicker({minDate: 0, numberOfMonths: 2});
});





					<table cellspacing="2" cellpadding="2" align="center">
						<tr>	
							<td>	
								<div title="Data Inicial">Dt. Ini.: <input type="text" size="6" maxlength="10" id="dataIni" name="dataIni"/></div>
							</td>
							<td align="right">									
								<div title="Data Final">Dt. Fin.: <input type="text" size="6" maxlength="10" id="dataFin" name="dataFin"/></div>
							</td>	
						</tr></table>

[William Bruno 1501]

Já tentou usar classes?

 

$(".datepickers").datepicker({
//...

[bcs_ptx 0]

Não deu certo desta forma William e rdcapato não era bem assim, bom segue meu código, é simples a ideia, tenho uma caixa de texto padrão, e um botão de adicionar as caixas, então todas as caixas novas que adicionar deveriam usar a mesma função datepicker, mas só funciona na primeira, por que será?

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	criacalendario('#datepicker_1');
	$(".adicionarCampo").click(function () {
		
		var numdate = parseInt($('input[id^=datepicker_]').size());			
		
		numdate = numdate + 1;				
		novoCampo = $("tr.linhas2:first").clone();
		novoCampo.find("input").val("");
		novoCampo.find("input[id^=datepicker_]").attr('id','datepicker_'+numdate);
		novoCampo.insertAfter("tr.linhas2:last");			
		
		$('input:text, select').blur(function(){
			$(this).css({'background-color' : '#FFFFFF'});
		});		
		$('input:text, select').focus(function(){
			$(this).css({'background-color' : '#DFD8D1'});
		});	
		
		removeCampo();	 
		criacalendario('#datepicker_'+numdate);
	});  
	
	function criacalendario(id)
	{
		var teste='';
		
		$('input[id^=datepicker_]').each(function(index, element) {
			teste += '#'+$(this).attr('id')+',';
		});
		
		teste = teste.substring(0,(teste.length-1));
		
		$(teste).datepicker({
			dateFormat: 'dd/mm/yy',
			dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
			dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
			dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
			monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
			monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
			currentText: 'Hoje',
			nextText: 'Próximo',
			prevText: 'Anterior'
		}); 
	}
});
</script>

<a href='#' class='adicionarCampo'>botao adiciona</a>

<table>
	<tr class="linhas2">
    	<td><input type="text" id="datepicker_1" name="data[]" class="campotexto" required></td>
    </tr>
</table>

[William Bruno 1501]

pq cada vez q vc adiciona uma nova caixa, vc tem q instanciar o datepicker para ela.