exemplo jQuery UI - o selecionador de data (Datepicker)
Na caixa de pop-up ou calendário em linha para selecionar uma data.
Para mais detalhes sobre os componentes de datepicker, consulte a documentação da API membro do selecionador de data (a Datepicker o Widget) .
A função padrão
Selecionador de data (Datepicker) está ligado a um formulário padrão no campo de entrada. Mover o foco na entrada (ou use a tecla tab para clicar) para abrir um calendário interativo em uma pequena sobreposição. Escolha uma data, clique em qualquer lugar da página (caixa de entrada perde o foco), ou pressione a tecla Esc para fechar. Se você selecionar uma data, o feedback é exibido como o valor da entrada.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI data picker (Datepicker) - A função padrão </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ();
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
animação
Use diferentes animações quando você abre ou fecha o datepicker. Escolha um filme a partir da caixa drop-down, e clique na caixa para ver seu efeito. Você pode usar qualquer um dos três animação padrão, efeitos especiais, ou usar qualquer um de uma UI.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI data picker (Datepicker) - Anime </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ();
$ ( "#anim") .change (Function () {
$ ( "#datepicker") .datepicker ( "Opção", "showAnim", $ (this) .val ());
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker" size = "30"> </ p>
<P> Animação: <br>
<Id = "anim">
<Option value = "show"> Show (padrão) </ option>
<Option value = "slideDown"> slides </ option>
<Option value = "fadeIn"> Atenuar </ option>
<Option value = "cegos"> Cegos (estores UI efeitos) </ option>
<Opção value = "salto"> Bounce (efeito rebote UI) </ option>
<Option value = "grampo"> Clip (efeitos de edição UI) </ option>
<Option value = "drop"> Drop (UI efeitos desembarcou) </ option>
<Option value = "dobrar"> Fold (efeitos UI dobrado) </ option>
<Option value = "slides"> Slide (UI efeitos deslizante) </ option>
<Option value = ""> Não </ option>
</ Select>
</ P>
</ Body>
</ Html>
Outros meses a contar da data
datepicker pode mostrar a data adicional mês, essas datas podem ser definidas para opcional.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI data picker (Datepicker) - em outros meses a contar da data </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
showOtherMonths: verdadeiro,
selectOtherMonths: true
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
barra de botões de exibição
Por boolean showButtonPanel para a seleção de exibição de data de hoje um botão "Today" para desligar o calendário exibe uma opção botão "Concluído". Por padrão, quando um display barra de botões permitirá que cada botão, mas o botão pode ser desligado através das outras opções. texto do botão pode ser personalizado.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI data picker (Datepicker) - Exibição barra de botões </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
showButtonPanel: true
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
a apresentação incorporada
datepicker está aninhado na exibição da página, em vez de uma camada de cobertura. Basta ligar para o .datepicker div () pode ser, em vez de chamar a entrada.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI selecionador de data (Datepicker) - a apresentação incorporada </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ();
});
</ Script>
</ Head>
<Body>
Data: <div id = "datepicker"> </ div>
</ Body>
</ Html>
Exibir o menu Mês e Ano
caixa drop-down exibe o mês e ano, em vez de uma exposição estática do título mês / ano, é fácil para abranger uma ampla gama de tempo na navegação. Adicionar um valor booleano changeMonth e changeYear opção.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI data picker (Datepicker) - Exibição mês & amp; menu de Ano </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
changeMonth: true,
changeYear: true
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
Exibir vários meses
Definindo numberOfMonths opção é um número inteiro 2 ou um número inteiro maior do que 2, para ser exibida num datepicker vários meses.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI data picker (Datepicker) - exibir vários meses </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
NUMBEROFMONTHS: 3,
showButtonPanel: true
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
Formato de data
Em uma variedade de maneiras de mostrar o feedback data. Escolha um formato de data a partir da caixa drop-down, clique em e selecione uma data na caixa de entrada, ver o formato de data da apresentação seleccionada.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI data picker (Datepicker) - Formato de data </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ();
$ ( "#format") .change (Function () {
$ ( "#datepicker") .datepicker ( "Opção", "dateFormat", $ (this) .val ());
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker" size = "30"> </ p>
<P> Opções de formato: <br>
<Id = "formato">
<Opção value = "mm / dd / aa"> Padrão - mm / dd / aa </ option>
<Opção value = "aa-mm-dd"> ISO 8601 - aa-mm-dd </ option>
<Option value = "d M, y"> Short - d M, y </ option>
<Option value = "d MM, y"> Medium - d MM, y </ option>
<Option value = "DD, d MM, YY"> Inteiro - DD, d MM, YY </ option>
<Option value = "& apos; dia & apos; d & apos; de & apos; MM & apos; no ano & apos; aa"> Com texto - 'dia' d 'de' MM 'no ano de' aa </ option>
</ Select>
</ P>
</ Body>
</ Html>
ícone de trigger
Clique no ícone ao lado da caixa de entrada para exibir o datepicker. Definir datepicker abre (comportamento padrão) no foco, ou clique no ícone para abrir ou abrir / receber foco quando clicar no ícone.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI data picker (Datepicker) - ícone do gatilho </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
showOn: "button",
buttonImage: "images / calendar.gif",
buttonImageOnly: true
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
calendário localizada
Localização datepicker linguagem de calendário e formato (o padrão é o Inglês / formato Ocidental). datepicker contém built-in suporte para linguagens de leitura da direita para a esquerda, como árabe e hebraico.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI data picker (Datepicker) - calendário localizada </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-ar.js"> </ script>
<Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-fr.js"> </ script>
<Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-he.js"> </ script>
<Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-zh-TW.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ($ .datepicker.regional [ "Fr"]);
$ ( "#locale") .change (Function () {
$ ( "#datepicker") .datepicker ( "Opção",
$ .datepicker.regional [$ (Este) .val ()]);
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> & nbsp;
<Id = "locale">
<Option value = "ar"> Árabe (& # 8235; (& # 1575; & # 1604; & # 1593; & # 1585; & # 1576; & # 1610; & # 1577; </ option>
<Option value = "zh-TW"> Tradicional Chinesa (& # 32321; & # 39636; & # 20013; & # 25991;) </ option>
<Option value = ""> Inglês </ option>
<Opção value = "fr" selected = "selected"> Francês (Fran & ccedil; ais) </ option>
<Option value = "ele"> Hebrew (& # 8235; (& # 1506; & # 1489; & # 1512; & # 1497; & # 1514; </ option>
</ Select> </ p>
</ Body>
</ Html>
Preencher uma outra caixa de entrada
Use altField e altFormat opções sempre que selecionar uma data, a data será preenchido com um determinado formato em outra caixa de entrada. Quando esta função até à data sobre o processamento adicional de fácil utilização, o usuário é apresentado com uma data user-friendly.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI data picker (Datepicker) - cresceu outra caixa de entrada </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
altField: "#alternate",
altFormat: "DD, d MM, YY"
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> & nbsp; <input type = "text" id = tamanho "alternativo" = "30"> </ p>
</ Body>
</ Html>
Limitar o intervalo de datas
Por minDate e maxDate opção limita o intervalo de datas seleccionável. Definir as datas de início e término da data real (new Date (2009, 1-1, 26)), ou uma cadeia de valor de deslocamento de hoje (-20), ou como um ciclo e unidades ( '+ 1M + 10D '). Se definido como uma string, utilize o 'D' para os dias, usando um 'w' representa semanas, usando 'M' para o mês, usando o 'Y' é o ano.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI data picker (Datepicker) - limitar o intervalo de data </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({MinDate: -20, MaxDate: "+ 1M + 10D"});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
Selecione um intervalo de datas
Selecione um intervalo de datas para pesquisar.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI data picker (Datepicker) - Selecione um intervalo de data </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#from") .datepicker ({
DefaultDate: "+ 1s",
changeMonth: true,
NUMBEROFMONTHS: 3,
onClose: function (SelectedDate) {
$ ( "# Para") .datepicker ( "Opção", "minDate", SelectedDate);
}
});
$ ( "# Para") .datepicker ({
DefaultDate: "+ 1s",
changeMonth: true,
NUMBEROFMONTHS: 3,
onClose: function (SelectedDate) {
$ ( "#from") .datepicker ( "Opção", "MaxDate", SelectedDate);
}
});
});
</ Script>
</ Head>
<Body>
<Label for = "de"> de </ label>
<Input type = "text" id = "de" name = "de">
<Label for = "para"> para </ label>
<Input type = "text" id = "para" name = "para">
</ Body>
</ Html>
A Semana de ano mostram
datepicker pode exibir as primeiras semanas do ano. O padrão é calculado de acordo com a norma ISO 8601 Definição: semana a partir de segunda-feira, a primeira semana do ano que contém a primeira quinta-feira. Isto significa que em um ano e pode ser um outro par de dias na semana.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI data picker (Datepicker) - exibir primeiras semanas do ano </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
showWeek: true,
FirstDay: 1
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>