Adicionando Timepicker to jQuery UI Datepicker

[tiagocaus 1]

Estou usando esse Jquery: http://trentrichardson.com/examples/timepicker/

 

Linha: Create a datetime range with a start and end date.

 

 

Ele is interessante porque consigo colocar a data inicial e final.

 

Gostaria de saber como colocar DD/MM/YY, pois ele esta em formato americano.

 

 

Alguem sabe como fazer?

[Gabriel Jacinto 74]

Formato da data é assim, insira isso na sua função:

$(function(){
 $('#dataIni').datepicker({dateformat:"dd-mm-yy"});
});

[tiagocaus 1]

Eu tenho que fazer assim, veja se estou colocando no lugar certo.

 

$(function(){
$('#data_ini').datepicker({dateformat:"dd-mm-yy"});

$('#data_ini').datetimepicker({
   onClose: function(dateText, inst) {
       var endDateTextBox = $('#data_fim');
       if (endDateTextBox.val() != '') {
           var testStartDate = new Date(dateText);
           var testEndDate = new Date(endDateTextBox.val());
           if (testStartDate > testEndDate)
               endDateTextBox.val(dateText);
       }
       else {
           endDateTextBox.val(dateText);
       }
   },
   onSelect: function (selectedDateTime){
       var start = $(this).datetimepicker('getDate');
       $('#data_fim').datetimepicker('option', 'minDate', new Date(start.getTime()));
   }
});
$('#data_fim').datepicker({dateformat:"dd-mm-yy"});
$('#data_fim').datetimepicker({
   onClose: function(dateText, inst) {
       var startDateTextBox = $('#data_ini');
       if (startDateTextBox.val() != '') {
           var testStartDate = new Date(startDateTextBox.val());
           var testEndDate = new Date(dateText);
           if (testStartDate > testEndDate)
               startDateTextBox.val(dateText);
       }
       else {
           startDateTextBox.val(dateText);
       }
   },
   onSelect: function (selectedDateTime){
       var end = $(this).datetimepicker('getDate');
       $('#data_ini').datetimepicker('option', 'maxDate', new Date(end.getTime()) );
   }
});
});

[Vadio 13]

acredito que não tiagocaus

 

- dateformat é um parametro do datetimepicker

 

para passar mais de um parametro com json você add virgula dessa maneira

var params = {
   parametro_x: 'meuvalor X',
   parametro_y: 'meuvalor Y'
}

 

agora q sabe disso note o trecho abaixo...

function callback_onclose(dateText, inst) {
       var startDateTextBox = $('#data_ini');
       if (startDateTextBox.val() != '') {
           var testStartDate = new Date(startDateTextBox.val());
           var testEndDate = new Date(dateText);
           if (testStartDate > testEndDate)
               startDateTextBox.val(dateText);
       }
       else {
           startDateTextBox.val(dateText);
       }
   }

function callback_onselect: function (selectedDateTime){
       var end = $(this).datetimepicker('getDate');
       $('#data_ini').datetimepicker('option', 'maxDate', new Date(end.getTime()) );
   }
$('#data_ini').datetimepicker({
   dateformat: "dd-mm-yy",
   onclose: callback_onclose,
   onSelect: callback_onselect
});

[tiagocaus 1]

Desculpa, não entendi.

Esta diferente do meu que postei.

[Vadio 13]

dexa pra lá ...

 

faz assim

 

$('#data_ini').datetimepicker({
   //EDIT
   dateformat: "dd-mm-yy",
   //EDIT
   onClose: function(dateText, inst) {
       var endDateTextBox = $('#data_fim');
       if (endDateTextBox.val() != '') {
           var testStartDate = new Date(dateText);
           var testEndDate = new Date(endDateTextBox.val());
           if (testStartDate > testEndDate)
               endDateTextBox.val(dateText);
       }
       else {
           endDateTextBox.val(dateText);
       }
   },
   onSelect: function (selectedDateTime){
       var start = $(this).datetimepicker('getDate');
       $('#data_fim').datetimepicker('option', 'minDate', new Date(start.getTime()));
   }
});

[tiagocaus 1]

Continua a mostrar MM-DD-YY

[Vadio 13]

demo/api datepicker - http://jqueryui.com/demos/datepicker/

 

Clique em options no menu abaixo da demo e veja todos os atributos desse plugin.

 

Não funcionou pq a informação do parâmetro está incorreta... É dateFormat e não dateformat

[tiagocaus 1]

pesquisando descobrir que tem um arquivo que permite editar isso.

Chama: jquery-ui-timepicker-addon.js

 

function Timepicker() {
this.regional = []; // Available regional settings, indexed by language code
this.regional[''] = { // Default regional settings
	currentText: 'Agora',
	dateFormat: 'dd/mm/yy',
	closeText: 'Feito',
	ampm: false,
	amNames: ['AM', 'A'],
	pmNames: ['PM', 'P'],
	timeFormat: 'hh:mm tt',
	timeSuffix: '',
	timeOnlyTitle: 'Escolha Tempo',
	timeText: 'Tempo',
	hourText: 'Hora',
	minuteText: 'Minutos',
	secondText: 'Segundos',
	millisecText: 'Milisegundo',
	timezoneText: 'Fuso horário'
};

 

Eu uso dois campos, data_ini e data_fim. Quando coloca a data inicial 19/09 e a data final 01/10, ele muda a data inicial para a mesma que a final.

 

O que pode ser?

[Vadio 13]

provavelmente sua função onSelect ou onClose

q está sendo passada como parametro aos 2 "campos"

[tiagocaus 1]

Eu estou usando como o original:

 

Estou usando esse Jquery: http://trentrichardson.com/examples/timepicker/

 

Linha: Create a datetime range with a start and end date.

 

Não estou usando apenas uma campo, veja como é o meu.

 

 

 

$(function(){
$('#data_ini').datetimepicker({
   onClose: function(dateText, inst) {
       var endDateTextBox = $('#data_fim');
       if (endDateTextBox.val() != '') {
           var testStartDate = new Date(dateText);
           var testEndDate = new Date(endDateTextBox.val());
           if (testStartDate > testEndDate)
               endDateTextBox.val(dateText);
       }
       else {
           endDateTextBox.val(dateText);
       }
   },
   onSelect: function (selectedDateTime){
       var start = $(this).datetimepicker('getDate');
       $('#data_fim').datetimepicker('option', 'minDate', new Date(start.getTime()));
   }
});

$('#data_fim').datetimepicker({
   onClose: function(dateText, inst) {
       var startDateTextBox = $('#data_ini');
       if (startDateTextBox.val() != '') {
           var testStartDate = new Date(startDateTextBox.val());
           var testEndDate = new Date(dateText);
           if (testStartDate > testEndDate)
               startDateTextBox.val(dateText);
       }
       else {
           startDateTextBox.val(dateText);
       }
   },
   onSelect: function (selectedDateTime){
       var end = $(this).datetimepicker('getDate');
       $('#data_ini').datetimepicker('option', 'maxDate', new Date(end.getTime()) );
   }
});
});