Você gostaria de personalizar as opções de data do campo de data e hora no WPForms? O campo Data/Hora inclui duas opções de formato para o seletor de data: Date Picker, que fornece ao usuário um calendário, ou Date Dropdown.
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é mesmo desativar datas passadas, bem como limitar horas. Se isso for tudo o que você precisa fazer, consulte esta documentação.
Este tutorial se concentrará mais na personalização do campo Date Dropdown e no cálculo de blocos de datas para o Date Picker.
É importante lembrar que, se você estiver usando qualquer um dos trechos de código deste documento, as opções de limitação do construtor de formulários deverão ser desativadas. Para saber mais sobre as opções incorporadas para limitar as datas, consulte esta documentação.
Criando o formulário
Antes de adicionarmos quaisquer snippets, você precisará criar o formulário e adicionar os campos. Como este tutorial é baseado no campo Date Dropdown, você precisará adicionar pelo menos um campo Date.
Se precisar de ajuda para criar seu formulário, consulte este tutorial.
Depois de adicionar os campos de data, certifique-se de ter selecionado o menu suspenso Type to Date. Você pode definir o tipo de data clicando nas opções avançadas do campo de formulário.
Personalização do campo Data
Para personalizar o campo Date, você precisará adicionar um dos trechos de código abaixo ao seu site.
Se precisar de ajuda para aprender a adicionar trechos de código ao seu site, consulte este tutorial.
Alguns dos trechos de código abaixo exigirão o uso de informações específicas de ID de formulário e ID de campo.
Uso de snippets no menu suspenso Data
Limitar o número de dias no menu suspenso para corresponder ao mês
Para que o campo Days (Dias ) coincida com a quantidade de dias disponíveis para aquele mês específico, você usaria este snippet.
/**
* 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 );
Limitação de meses, dias e anos no menu suspenso de datas
Os snippets abaixo atualizarão os campos suspensos 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.
Há duas maneiras diferentes de aplicar isso:
- Todos os campos suspensos de data em um formulário específico
- Um menu suspenso de data específica em um formulário específico.
Todos os campos suspensos de data em um formulário específico
O snippet abaixo será aplicado somente ao formulário 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 );
Direcionamento de um menu suspenso de data específica em um formulário específico
O item abaixo será aplicado ao menu suspenso de data com o campo ID 3 dentro do formulário 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 o menu suspenso de data a partir de "hoje
Em seu menu suspenso de data, você pode fazer com que o mês, o dia e o ano sejam automaticamente padronizados para começar com o mês, o dia e o ano de hoje usando este snippet.
/**
* 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 );
Uso de snippets no selecionador de datas
Desativar datas passadas e exibir apenas os próximos 31 dias
Neste snippet, vamos desativar qualquer data passada e permitir a seleção de até 31 dias a partir da data atual para o ID do formulário 1137 e a ID do campo 14. Lembre-se de alterar essas IDs para que correspondam às IDs de seu próprio formulário e campo. Se não tiver certeza de onde encontrar essas IDs, Leia 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 o novo Date().fp_incr(-1), você pode controlar facilmente quantos dias minDate e maxDate são exibidos apenas aumentando o número. O uso do símbolo negativo (-) na frente do número significa que serão dias no passado.
Como queremos que nosso formulário comece 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 para o selecionador de datas
Você pode usar facilmente esse trecho de código que excluirá todos os dias anteriores (inclusive hoje).
Basta alterar o +1), para que seja o número de dias que você deseja 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 );
Bloqueio de intervalos de datas específicos para o seletor de datas
Para bloquear intervalos de datas específicos dentro do seletor de datas, use este snippet.
/**
* 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 );
Limitar a distância em que os usuários podem escolher as datas dentro do selecionador de datas
Se quiser limitar a data futura que os usuários podem selecionar dentro do selecionador 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 anteriores e segundas-feiras no seletor de datas
Para limitar todos os dias anteriores e as segundas-feiras futuras, use este snippet.
/**
* 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 for selecionada
Neste exemplo, vamos exibir 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 );
Desativar um dia específico da semana
Para este exemplo, queremos desativar completamente os domingos do nosso seletor de datas usando este snippet.
/**
* 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 snippet, o retorno (date.getDay() === 0); desativa 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 de seu dia específico e atualizar o snippet para que corresponda ao dia desejado.
O window.wpforms_420_1 representa o ID do formulário(420) e o ID do campo do nosso Date Picker(_1). Você precisará atualizar esses dois IDs para que correspondam ao seu próprio ID de formulário e ID de campo.
Para obter ajuda sobre como encontrar os números de ID do formulário e do campo, consulte este tutorial.
Alterar o dia de início do calendário
Para alterar o dia do selecionador de data para mostrar o dia que inicia a semana, você usará este snippet. Lembre-se de que segunda-feira representa o número um e que 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 );
Desativação de datas futuras
O uso desse snippet definirá a maxDate como a data de hoje (atual), de modo que os usuários não poderão 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 );
Direcionar o ID do formulário e o ID do campo específicos dentro do selecionador de data
Ao usar o Date Picker, você pode direcionar 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 os números de identificação do formulário e do campo, consulte este tutorial.
Aqui estão alguns trechos de código. O primeiro permitirá uma 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 trecho de código permitirá a seleção dos últimos 30 dias e de "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 );
Limite para um único dia apenas no mês atual
Neste exemplo, só aceitaremos agendamentos para um único dia do 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 ela 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 );
Tradução de subrótulos de data e hora
Para traduzir os subtítulos "Date" e "Time" no campo Date/Time, você pode usar este trecho 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 esse snippet:
- Substitua 'Your Translated Date Label' (Seu rótulo de data traduzido) pela tradução desejada para "Date" (Data)
- Substitua 'Your Translated Time Label' (Seu rótulo de tempo traduzido) pela tradução desejada para "Time" (Tempo)
Por exemplo, para traduzir os rótulos para o espanhol:
$properties['inputs']['date']['sublabel']['value'] = __( 'Fecha');
$properties['inputs']['time']['sublabel']['value'] = __( 'Tiempo');
Um último lembrete: se estiver usando qualquer um dos trechos de código deste documento, as opções de limitação do construtor de formulários devem ser desativadas. Para saber mais sobre as opções incorporadas para limitar as datas, consulte esta documentação.
E isso é tudo o que você precisa para personalizar o Date Dropdown ou o Date Picker! Você gostaria de personalizar o seletor de datas para permitir um intervalo de datas ou várias datas? Experimente nosso tutorial sobre Como permitir intervalo de datas ou várias datas no selecionador de datas.