Home Guide Datepicker jQuery - validazione delle date

Datepicker jQuery – validazione delle date

Volendo utilizzare dei datepicker  (qui come inserirne con jQuery) all’interno di pagine per eventi e prenotazioni, é importante fare in modo che gli intervalli selezionabili siano cronologicamente coerenti. Oggi vedremo come fare.

Quest’esempio si basa su jQuery, quindi per prima cosa, includiamone le librerie da remoto inserendo

<link rel=”stylesheet” href=”//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css”>


in testa alla pagina: nell’header, o comunque prima dello script di seguito.

<script>
jQuery(function() {
jQuery( “#event_start” ).datepicker({
defaultDate: “+1w”,d
changeMonth: true,
numberOfMonths: 2,
onClose: function( selectedDate ) {
jQuery( “#event_end” ).datepicker( “option”, “minDate”, selectedDate );
}
});
jQuery( “#event_end” ).datepicker({
defaultDate: “+1w”,
changeMonth: true,
numberOfMonths: 2,
onClose: function( selectedDate ) {
jQuery( “#event_start” ).datepicker( “option”, “maxDate”, selectedDate );
}
});
});

E’ possibile personalizzare il codice indicando i parametri che preferite per “defaultDate” e numberOfMonths.

É necessario che ci sia corrispondenza tra gli identificatori (ovvero i nomi preceduti dal cancelletto ‘#’): e gli id dei vostri campi di testo all’interno del form, pena non vedere nulla.

 

Impostazione per WordPress

Nel caso in cui vogliate sfruttare questo datepicker  all’interno di un meta box, magari in un  plugin per WorpPress, dovrete “abbracciare il tutto” con una funzione  e includere jQuery avvalendovi della funzione WP_enqueue_script.

function jq_meta_box_cb()
{
wp_enqueue_script( ‘jquery-ui-datepicker’ );
?>
<link rel=”stylesheet” href=”//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css”>

<script>
jQuery(function() {
jQuery( “#jq_event_start” ).datepicker({
defaultDate: “+1w”,
changeMonth: true,
numberOfMonths: 2,
onClose: function( selectedDate ) {
jQuery( “#jq_event_end” ).datepicker( “option”, “minDate”, selectedDate );
}
});
jQuery( “#jq_event_end” ).datepicker({
defaultDate: “+1w”,
changeMonth: true,
numberOfMonths: 2,
onClose: function( selectedDate ) {
jQuery( “#jq_event_start” ).datepicker( “option”, “maxDate”, selectedDate );
}
});
});

</script>

/**

implementazione meta_box

*/

}

Quasi pronti per il plugin

Se proprio volevate un esempio (quasi) completo, ecco la versione con i meta box per il vostro plugin.

function jq_meta_box_cb()
{
wp_enqueue_script( ‘jquery-ui-datepicker’ );
?>
<link rel=”stylesheet” href=”//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css”>

<script>
jQuery(function() {
jQuery( “#jq_event_start” ).datepicker({
defaultDate: “+1w”,
changeMonth: true,
numberOfMonths: 2,
onClose: function( selectedDate ) {
jQuery( “#jq_event_end” ).datepicker( “option”, “minDate”, selectedDate );
}
});
jQuery( “#jq_event_end” ).datepicker({
defaultDate: “+1w”,
changeMonth: true,
numberOfMonths: 2,
onClose: function( selectedDate ) {
jQuery( “#jq_event_start” ).datepicker( “option”, “maxDate”, selectedDate );
}
});
});

</script>

<?php

//$(‘#validBeforeDatepicker,#validAfterDatepicker’).datepicker();
global $post;
?>
<label for=”jq_image”>URL:</label>
<input type=”text” name=”jq_image” id=”jq_image” value=”<?php echo get_post_meta( $post->ID, ‘jq_image’, true) ?>” />
<label for=”jq_event_start”>Event Start</label>
<input type=”text” name=”jq_event_start” id=”jq_event_start” value=”<?php echo date(“d-m-Y”,get_post_meta( $post->ID, ‘jq_event_start’, true));?>” />

<label for=”jq_event_end”>Event End</label>
<input type=”text” name=”jq_event_end” id=”jq_event_end” value=”<?php echo date(“d-m-Y”,get_post_meta( $post->ID, ‘jq_event_end’, true));?>” />

<?php

wp_nonce_field( ‘jq_meta_box_nonce’, ‘meta_box_nonce’ );
}

add_action( ‘save_post’, ‘jq_meta_box_save’ );
function jq_meta_box_save( $post_id )
{
// Bail if we’re doing an auto save
if( defined( ‘DOING_AUTOSAVE’ ) && DOING_AUTOSAVE ) return;

// if our nonce isn’t there, or we can’t verify it, bail
if( !isset( $_POST[‘meta_box_nonce’] ) || !wp_verify_nonce( $_POST[‘meta_box_nonce’], ‘jq_meta_box_nonce’ ) ) return;

if( isset( $_POST[‘jq_image’] ) )
update_post_meta( $post_id, ‘jq_image’, esc_url( $_POST[‘jq_image’] ) );

if( isset( $_POST[‘jq_event_start’] ) )
update_post_meta( $post_id, ‘jq_event_start’, ( strtotime($_POST[‘jq_event_start’] )) );

if( isset( $_POST[‘jq_event_end’] ) )
update_post_meta( $post_id, ‘jq_event_end’, ( strtotime($_POST[‘jq_event_end’] ) ));

}

Non restano che le ultime cose (v.realizzare un plugin).

N.B. Nel codice ho incluso anche il trattamento dell’anteprima delle date per scriverle in formato gradito al db, ma visualizzarle “all’italiana”(nell’ordine giorno-mese-anno).

 

Luigi Lacquaniti
Web designer freelance.

LASCIA UN COMMENTO

Please enter your comment!
Please enter your name here

Ultime dal Blog

Netflix potrebbe bloccare la condivisione degli account

Uno dei punti più interessanti di Netflix è quello di poter dividere il prezzo dell'account fino a 4 utenti, fattore che sicuramente ha contribuito...

MacOS: come verificare se la propria app installata è 32 o 64 bit

Con l'avvento di Catalina, il nuovo sistema operativo Apple, tra le altre novità ce n'è una che ha frenato gli entusiasmi e le dita...

MacOS: come disattivare l’anteprima dopo lo screenshot

MacOS ha introdotto, su Mojave, una funzione ispirata dalla controparte iOS, ossia la possibilità di poter modificare lo screenshot subito dopo averlo "scattato". Difatti per...

Netflix: ufficiale l’aumento dei prezzi sui piani Standard (HD) e Premium (UHD)

Era un rumors quasi certo, ed è stato alla fine ufficializzato: Netflix ha aumentato i prezzi su due dei tre piani sottoscrivibili. I piani Standard...

Google Maps: ora visibile anche il tachimetro mentre si guida

Da qualche settimana il famoso navigatore made in Google sta (finalmente) implementando delle funzioni prese in prestito dal suo fratellino Waze. Dopo aver visto...