2012-06-07 18 views
6

Ho un calendario jQuery UI, come di seguito e funziona su IE soltanto non su Chrome:jQuery Selezione data non funziona su Chrome

<input type="image" src="/images/caleder.jpg" id="btnCalendar" /> 

<script type="text/javascript"> 
$(function() { 
    $("#btnPeriodCal").datepicker(); 
}); 
</script> 

Se cambio type="text" sembra funzionare. Qualcuno potrebbe per favore aiutarmi con come risolvere il problema di cui sopra. Non riesco a usare type="text" perché ho bisogno di mostrare l'immagine.

Grazie.

+1

Utilizzare la proprietà 'buttonImage'. Controlla la mia risposta. :) –

risposta

0

A meno che non sia sbagliato, solo tag div, tag span, ecc. Possono essere selezionatori di date.

4

È possibile utilizzare un gestore:

<script> 
$(function() { 
    $("#datepicker").datepicker({ 
     showOn: "button", 
     buttonImage: "images/calendar.gif", 
     buttonImageOnly: true 
    }); 
}); 
</script> 

Spero che questo funziona! :)

+1

Non ha funzionato, Devo mantenere questa riga così com'è o passare a

+0

Nota I deve essere in grado di visualizzare icona del calendario per gli utenti su cui fare clic. –

+2

Sì, questo è ciò che fa. Ci sarà una casella di testo con l'icona specificata. Guarda questo esempio: http://jqueryui.com/demos/datepicker/icon-trigger.html –

0

usarlo come -

<p>Date: <input type="text" id="datepicker"></p> 

$(function() { 
    $("#datepicker").datepicker({ 
     showOn: "button", 
     buttonImage: "images/calendar.gif", 
     buttonImageOnly: true 
    }); 
}); 

Controlla in azione - http://jqueryui.com/demos/datepicker/#icon-trigger

E non dimenticate di includere questi file in <head> tag

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" /> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"> 

1

Ho avuto lo stesso problema. E ho pensato perché l'input poteva funzionare, ma il pulsante non poteva. Il trucco è che l'input diventa attivo quando si fa clic, il pulsante no. Prova questo:

$(function() { 
    $("#btnPeriodCal").datepicker().click(function() { $(this).focus(); }); 
}); 
12

Ho un problema con il selezionatore di date.

Ho utilizzato il selezionatore di date e ha funzionato bene in Firefox e IE ma non in chrome. Posso vedere il calendario quando clicco sul campo di inserimento. Ho selezionato la data ma i valori della data non stanno entrando nel campo di input.

Non ho opzione in modo ho cambiato type='text' allora funziona in cromo ..

Input type is date

Input type is text

+1

Naveen Grazie per il vostro feedback ... Per questo motivo ho controllato il lavoro del mio amico. Ha anche usato datepicker che non ha un pulsante di chiusura nel calendario. Ho cambiato i suoi codici, tipo di input fino ad oggi e controllato in chrome ... Funziona. I valori di data sono inseriti nel campo. Entrambi abbiamo scaricato il selezionatore di date da internet. Potrebbe esserci qualche differenza in questo. Ma I sto ottenendo i valori se ho impostato solo il tipo è testo. Non ho problemi con quello perché ho fatto Javascript e la convalida di PHP per i miei valori di data. –

+1

ma il post è taggato jquery ui datepicker ... :) – naveen

+0

sì, il post è jquery ui datepicker..In realtà non so di ui e tutti..ho avuto lo stesso problema, ho cercato su internet ho trovato questo post. Ma questo post e il mio problema hanno alcuni problemi comuni. Ho pensato che aiuterà gli altri se condivido la mia exp .. –

0

ho avuto un problema simile: volevo che il mio datepicker ad apparire quando un link è stato cliccato e non ha campo (o piuttosto un campo nascosto). (Il mio caso d'uso era che la data sul calendario doveva essere usata per trovare un intervallo di date fino alla selezione di datepicker compresa, quindi non ho bisogno del valore di data effettivo se non per essere passato al gestore onSelect.)

Quindi, questo funziona in Firefox:

<a ...>click for calendar: <input type="hidden" value="" /> </a> 

ma non in Chrome. Sostituzione del:

<input type="text" value="" style="display: none" /> 

non riuscito. Ho finito con questo:

<input type="text" value="" style="width: 0px; height: 0px; border: none; position: absolute; top: 0; left: 0" /> 

se io non sono fiero di esserlo!

0

Ho trascorso 3 ore cercando di capirlo e questo è il modo in cui ho risolto il problema.

utilizzare le seguenti righe come librerie.

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script> 

e questo è il javascript utilizzato per risolvere il problema:

$(function() { 
    $("#date_of_birth_date").datepicker({ 
     maxDate: '+0', changeYear: true, yearRange: "-70:+0" 
    }); 
}); 

ricordarsi di rimuovere tutte le librerie precedenti ecc

Problemi correlati