Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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
Sim, mas como fazer isso dinamicamente, sem criar as duas linhas, ex:
$("#datepicker_'recebe id'").datepicker();
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>Já tentou usar classes?
$(".datepickers").datepicker({
//...
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>pq cada vez q vc adiciona uma nova caixa, vc tem q instanciar o datepicker para ela.
Se não me engano é assim