Resumo de IA
Você gostaria de personalizar as opções de data do campo Data e Hora no WPForms? O campo Data/Hora inclui duas opções de formato para o seletor de data: Seletor de Data, que oferece ao usuário um calendário, ou Lista Suspensa de Data.
Com o lançamento da versão 1.6.3, o WPForms oferece opções dentro do construtor de formulários para Limitar Dias e até Desativar Datas Passadas, bem como Limitar Horas. Se é só isso que você precisa fazer, revise esta documentação.
Este tutorial se concentrará mais na personalização do campo Lista Suspensa de Data e no cálculo de blocos de datas para o Seletor de Data.
É importante lembrar que, se você estiver usando qualquer um dos trechos de código neste documento, as opções do construtor de formulários para limitação devem estar desativadas. Para saber mais sobre as opções integradas para limitar datas, consulte esta documentação.
Criando o formulário
Antes de adicionar quaisquer trechos, você precisará criar seu formulário e adicionar seus campos. Como este tutorial é baseado no campo Lista Suspensa de Data, você precisará adicionar pelo menos um campo de Data.
Se precisar de ajuda para criar seu formulário, consulte este tutorial.
Depois de adicionar seus campos de data, certifique-se de ter selecionado o Tipo como Lista Suspensa de Data. Você pode definir o Tipo de Data clicando nas opções Avançadas do campo do formulário.
Personalizando o campo de Data
Para personalizar o campo de Data, você precisará adicionar um dos trechos de código abaixo ao seu site.
Se precisar de ajuda para aprender como adicionar trechos de código ao seu site, revise este tutorial.
Alguns dos trechos de código abaixo exigirão o uso de informações específicas de ID do formulário e ID do campo.
Usando trechos na Lista Suspensa de Data
Limitando o número de dias na lista suspensa para corresponder ao mês
Para que o campo Dias coincida com a quantidade de dias disponíveis para aquele mês em particular, você usaria este trecho.
/**
* Limit the days dropdown to match how many days are available for the selected month.
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_days_dropdown_match_month( ) {
?>
<script type="text/javascript">
var date = new Date();
var month = date.getMonth();
var year = date.getFullYear();
var totalDays = 31; // Default day amount
jQuery(function($){
$( 'select[id$="-month"]' ).on( 'change', function(){
month = $(this).val();
totalDays = daysInMonth(month, year);
$(this).parent().find( 'select[id$="-day"] option:not(:first-child)').each(function(){
$(this).remove();
});
for (var i = 1; i <= totalDays; i++) {
$(this).parent().find( 'select[id$="-day"]' ).append($( "<option></option>" ).attr( "value", i).text(i));
}
});
$( 'select[id$="-year"]' ).on( 'change', function(){
year = $(this).val();
totalDays = daysInMonth(month, year);
$(this).parent().find( 'select[id$="-day"] option:not(:first-child)').each(function(){
$(this).remove();
});
for (var i = 1; i <= totalDays; i++) {
$(this).parent().find('select[id$="-day"]').append($( "<option></option>" ).attr( "value", i).text(i));
}
});
});
function daysInMonth (month, year) {
return new Date(year, month, 0).getDate();
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_days_dropdown_match_month', 30 );
Limitando meses, dias e anos na lista suspensa de datas
Os trechos abaixo atualizarão os campos de lista suspensa para exibir apenas 5-12 (Maio-Dezembro) para os meses disponíveis, 20-31 para os dias disponíveis e 2020-2021 para os anos disponíveis. Você pode modificar os campos conforme necessário.
Existem duas maneiras diferentes de aplicar isso:
- Todos os campos de lista suspensa de data dentro de um formulário específico
- Uma lista suspensa de data específica dentro de um formulário específico.
Todos os campos de lista suspensa de data dentro de um formulário específico
O trecho abaixo se aplicará apenas ao formulário com ID 10.
/**
* Filters labels and options within the date field’s dropdown format.
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_datetime_date_dropdowns( $args, $form_id, $field ) {
$form_id = (int) $form_id;
// Only apply if the form's ID is 10
if ( $form_id === 10 ) {
// Set the lower and upper limits for each date dropdown
$args[ 'months' ] = range( 5, 12 );
$args[ 'days' ] = range( 20, 31 );
$args[ 'years' ] = range( 2024, 2025 );
}
return $args;
}
add_filter( 'wpforms_datetime_date_dropdowns', 'wpf_dev_datetime_date_dropdowns', 10, 3 );
Segmentando uma lista suspensa de data específica dentro de um formulário específico
Abaixo se aplicará à lista suspensa de data com ID de campo 3 dentro do formulário com ID 10.
/**
* Filters labels and options within the date field’s dropdown format.
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_datetime_date_dropdowns( $args, $form_id, $field ) {
$form_id = (int) $form_id;
// Only apply if the form's ID is 10 and field ID 3
if ( $form_id === 10 && $field['id'] == 3) {
// Set the lower and upper limits for each date dropdown
$args[ 'months' ] = range( 5, 12 );
$args[ 'days' ] = range( 20, 31 );
$args[ 'years' ] = range( 2024, 2025 );
}
return $args;
}
add_filter( 'wpforms_datetime_date_dropdowns', 'wpf_dev_datetime_date_dropdowns', 10, 3 );
Iniciando a lista suspensa de datas a partir de 'hoje'
No seu Dropdown de Data, você pode fazer com que o Mês, o Dia e o Ano sejam preenchidos automaticamente com o mês, dia e ano de hoje usando este trecho de código.
/**
* Select from today's date going forward within the range limit specified below
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_datetime_date_dropdowns( $args, $form_id, $field ) {
if( $form_id != 143 ) {
return $args;
}
// Set the lower and upper limits for each date dropdown
$args[ 'months' ] = range( date('m'), 12 );
$args[ 'days' ] = range( date('d'), 31 );
$args[ 'years' ] = range( date('Y'), 2030 );
return $args;
}
add_filter( 'wpforms_datetime_date_dropdowns', 'wpf_dev_datetime_date_dropdowns', 10, 3 );
Usando trechos de código no Seletor de Data
Desabilitando datas passadas e exibindo apenas os próximos 31 dias
Neste trecho de código, desabilitaremos qualquer data passada e permitiremos a seleção apenas até 31 dias a partir da data atual para o ID do formulário 1137 e o ID do campo 14. Lembre-se de alterar esses IDs para corresponderem ao seu próprio formulário e ID de campo. Se você não tem certeza de onde encontrar esses IDs, por favor, revise este tutorial.
/**
* Disable past dates, allow for selection for today + the next 31 days
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_limit_date_picker() {
?>
<script type="text/javascript">
var d = new Date();
window.wpforms_1137_14 = window.wpforms_1137_14 || {};
window.wpforms_1137_14.datepicker = {
disableMobile: true,
// Don't allow users to pick dates less than 1 days out
minDate: d.setDate(d.getDate()),
maxDate: d.setDate(d.getDate() + 31),
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_limit_date_picker', 10 );
Mostrar datas de ontem, hoje e amanhã
Usando new Date().fp_incr(-1) você pode facilmente controlar quantos dias minDate e maxDate exibem apenas aumentando o número. Usar o símbolo negativo (-) na frente do número significa que serão dias passados.
Como queremos que nosso formulário comece apenas a partir de ontem, começaremos com o minDate permitindo apenas o (-1) e terminaremos com o (1) (para incluir hoje e amanhã) para o maxDate
/**
* Allow date picker yesterday, today, and tomorrow
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
disableMobile: true,
// Don't allow users to pick past dates
minDate: new Date().fp_incr(-1), // 1 day in the past
// Don't allow users to pick any more than today
maxDate: new Date().fp_incr(1) // 1 day in the future
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Mostrar datas a partir do dia seguinte em diante para o seletor de data
Você pode facilmente usar este trecho de código que excluirá todos os dias passados (incluindo hoje).
Simplesmente altere o +1), para quantos dias você desejar restringir o seletor.
/**
* Show dates from the next day and onwards
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_limit_date_picker() {
?>
<script type="text/javascript">
var d = new Date();
window.wpforms_datepicker = {
disableMobile: true,
// Don't allow users to pick dates less than 1 days out
minDate: d.setDate(d.getDate() + 1),
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_limit_date_picker', 10 );
Bloquear intervalos de datas específicos para o seletor de data
Para bloquear intervalos de datas específicos dentro do seletor de data, use este trecho de código.
/**
* Limit the dates available in the Date Time date picker: Block out certain date ranges
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_limit_date_picker() {
?>
<script type="text/javascript">
var d = new Date();
window.wpforms_datepicker = {
disableMobile: true,
// Don't allow users to pick specific range of dates
disable: [
{
from: "2024-12-24",
to: "2024-12-26"
},
{
from: "2024-12-31",
to: "2025-01-01"
}
]
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_limit_date_picker', 10 );
Permitir apenas datas específicas do mês
Se você deseja que os usuários selecionem apenas certos dias do mês no Seletor de Data, você pode usar o trecho de código abaixo. Neste exemplo, apenas os dias 5 e 20 de cada mês permanecem selecionáveis e todas as outras datas são desabilitadas.
Para alterar quais dias são permitidos, substitua os números dos dias na linha 23 (a condição que verifica o valor do dia) pelos dias que você deseja usar.
Você pode substituir 5 e 20 na linha 16 por quaisquer outros números de data para corresponder aos seus próprios requisitos.
Limitar o quão longe os usuários podem selecionar datas dentro do seletor de data
Se você deseja limitar a data futura que os usuários podem selecionar dentro do seletor de data, use este trecho de código.
/**
* Don't allow date to be selected after maxDate
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
disableMobile: true,
// Don't allow users to pick past dates
minDate: new Date(),
// Don't allow users to pick dates after Dec 31, 2025
maxDate: new Date( '2025-12-31' )
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Excluir todos os dias passados e segundas-feiras no seletor de data
Para limitar todos os dias passados e segundas-feiras futuras, use este trecho de código.
/**
* Don't allow users to pick Mondays
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
disableMobile: true,
// Don't allow users to pick past dates
minDate: new Date(),
// Don't allow users to pick Mondays
enable: [
function(dateObj){
return dateObj.getDay() !== 1;
}
]
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Exibir mensagem quando a data atual é selecionada
Para este exemplo, exibiremos uma mensagem pop-up quando a data atual for selecionada.
/**
* Display pop up message when current date is selected
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_check_date() {
?>
<script type="text/javascript">
// Only display the message if the form ID is 323 and the field ID is 4
window.wpforms_323_4 = window.wpforms_323_4 || {};
window.wpforms_323_4.datepicker = {
mode: "single",
onClose: function(selectedDates, dateStr, instance) {
var today = new Date();
if (selectedDates[0].toLocaleDateString("en-US") == today.toLocaleDateString("en-US")) {
alert( 'Custom Message: You have selected todays date' );
this.clear();
}
}
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_check_date', 10 );
Desabilitar um dia específico da semana
Para este exemplo, queremos desabilitar completamente os domingos do nosso seletor de data usando este trecho de código.
/**
* Disable a specific day of the week
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_limit_date_picker_disable_specific_weekday() {
?>
<script type="text/javascript">
var d = new Date();
// Only apply to the form ID 420 and the field ID 1
window.wpforms_420_1 = window.wpforms_420_1 || {};
window.wpforms_420_1.datepicker = {
disableMobile: true,
// Don't allow users to pick specific day of the week
disable: [
function(date) {
// return true to disable
// 1 = Monday; 2 = Tuesday; 3 = Wednesday; 4 = Thursday; 5 = Friday; 6 = Saturday; 0 = Sunday
return (date.getDay() === 0);
}
]
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_limit_date_picker_disable_specific_weekday', 10 );
No trecho de código, o return (date.getDay() === 0); desabilita apenas os domingos. Cada dia é representado por um número específico.
- 1 = Segunda-feira
- 2 = Terça-feira
- 3 = Quarta-feira
- 4 = Quinta-feira
- 5 = Sexta-feira
- 6 = Sábado
- 7 = Domingo
Basta encontrar a representação numérica do seu dia específico e atualizar o snippet para corresponder ao dia desejado.
O window.wpforms_420_1 representa o ID do formulário (420) e o ID do campo para o nosso Seletor de Data (_1). Você precisará atualizar esses dois IDs para corresponder ao seu próprio ID de formulário e ID de campo.
Para obter ajuda para encontrar seus números de ID de formulário e campo, consulte este tutorial.
Alterar o dia de início do calendário
Para alterar o dia do seletor de data para mostrar que inicia a semana, você usará este snippet. Lembre-se que segunda-feira representa o número um e os dias da semana continuam em ordem numérica.
/**
* Change the start day of the week
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_set_start_day() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
disableMobile: true,
"locale": {
// Enter the number for the day you want the week to start
// 1 = Monday; 2 = Tuesday; 3 = Wednesday; 4 = Thursday; 5 = Friday; 6 = Saturday; 7 = Sunday
"firstDayOfWeek": 1 // start week on Monday
}
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_set_start_day', 10 );
Desabilitando datas futuras
Usar este snippet definirá a data máxima como a data de hoje (atual), para que os usuários não possam selecionar datas futuras.
/**
* Disable future dates
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
disableMobile: true,
// Don't allow users to pick past dates
maxDate: new Date(),
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Segmentar ID de formulário e ID de campo específicos dentro do seletor de data
Ao usar o Seletor de Data, você pode segmentar um único formulário ou um campo de Data específico dentro de um formulário específico.
Nos snippets de exemplo abaixo, você verá window.wpforms_21_1. Onde _21 representa o ID do formulário e _1 representa o ID do campo.
Se precisar de ajuda para encontrar seus números de ID de formulário e campo, consulte este tutorial.
Aqui estão alguns snippets de código. O primeiro permitirá a seleção apenas dos últimos 30 dias:
/**
* Only allow for a selection of only the past 30 days
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_21_1 = window.wpforms_21_1 || {};
window.wpforms_21_1.datepicker = {
disableMobile: true,
// Don't allow users to pick more than 30 days in the past and exclude future dates
minDate: new Date().fp_incr(-30)
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
O próximo snippet de código permitirá a seleção dos últimos 30 dias e "hoje":
/**
* Only allow for a selection of the past 30 days and "today"
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_21_1 = window.wpforms_21_1 || {};
window.wpforms_21_1.datepicker = {
disableMobile: true,
// Don't allow users to pick more than 30 days in the past
minDate: new Date().fp_incr(-30),
maxDate: "today"
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Limitar a um único dia para o mês atual apenas
Neste exemplo, aceitaremos apenas agendamentos para um único dia no mês atual.
/**
* Limit to 1 single day for the current month only.
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_one_day_current_month( ) {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
disableMobile: true,
disable: [
function(date) {
var currentDate = new Date();
var currentMonth = currentDate.getMonth();
var currentYear = currentDate.getFullYear();
var selectedMonth = date.getMonth();
var selectedYear = date.getFullYear();
if (selectedMonth !== currentMonth || selectedYear !== currentYear) {
return false;
}
var day = date.getDay();
var firstDayOfMonth = new Date(selectedYear, selectedMonth, 1).getDay();
var offset = (day >= firstDayOfMonth) ? (day - firstDayOfMonth) : (day + 7 - firstDayOfMonth);
var secondThursday = new Date(selectedYear, selectedMonth, offset + 8);
if (date.getDate() === secondThursday.getDate() && day === 4) {
return false;
}
return true;
}
]
};
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_one_day_current_month', 30 );
Neste exemplo, estamos definindo dinamicamente uma data mínima para um segundo campo de seleção de data, garantindo que seja pelo menos 21 dias após a primeira data selecionada.
/**
* Add 21 days to the first date selection to block these days from the second selection
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_block_days_date_selection( ) {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$( "#wpforms-1277-field_19" ).flatpickr({
dateFormat: "m/d/Y",
onClose: function( selectedDates, dateStr, instance ) {
if ( selectedDates.length > 0 ) {
var minSecondDate = new Date( selectedDates[0] );
// Adding 21 days to the selected 1st date
minSecondDate.setDate( minSecondDate.getDate() + 21 );
$( "#wpforms-1277-field_20" ).flatpickr({
minDate: minSecondDate,
dateFormat: "m/d/Y"
});
}
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_block_days_date_selection', 30 );
Traduzindo Subrótulos de Data e Hora
Para traduzir os subrótulos "Data" e "Hora" no campo Data/Hora, você pode usar este snippet de código:
``/**
* Translate Date and Time sublabels in the Date/Time field
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options
*/
function custom_translate_date_time_sublabels( $properties, $field, $form_data ) {
// Check if the field is of type 'date-time'
if ( 'date-time' === $field['type'] ) {
// Change the sublabel for the date field
if ( isset( $properties['inputs']['date']['sublabel']['value'] ) ) {
$properties['inputs']['date']['sublabel']['value'] = __( 'Your Translated Date Label');
}
// Change the sublabel for the time field
if ( isset( $properties['inputs']['time']['sublabel']['value'] ) ) {
$properties['inputs']['time']['sublabel']['value'] = __( 'Your Translated Time Label');
}
}
return $properties;
}
add_filter( 'wpforms_field_properties', 'custom_translate_date_time_sublabels', 10, 3 );
Para usar este snippet:
- Substitua 'Seu Rótulo de Data Traduzido' pela sua tradução desejada para "Data"
- Substitua 'Seu Rótulo de Hora Traduzido' pela sua tradução desejada para "Hora"
Por exemplo, para traduzir os rótulos para espanhol:
$properties['inputs']['date']['sublabel']['value'] = __( 'Fecha');
$properties['inputs']['time']['sublabel']['value'] = __( 'Tiempo');
Um último lembrete, por favor, lembre-se que se você estiver usando qualquer um dos snippets de código neste documento, as opções do construtor de formulários para limitação devem estar desativadas. Para saber mais sobre as opções integradas para limitar datas, consulte esta documentação.
E é tudo o que você precisa para personalizar o Dropdown de Data ou o Seletor de Data! Gostaria de personalizar o seletor de data para permitir um intervalo de datas ou várias datas? Experimente nosso tutorial sobre Como Permitir Intervalo de Datas ou Múltiplas Datas no Seletor de Data.