Blog Ajouter un Filtre de Plage de Dates dans l’Administration des Posts Types

Ajouter un Filtre de Plage de Dates dans l’Administration des Posts Types

8 May 2018

Affichage du formulaire

<?php
// Admin Filter Date Range: Enqueue
add_action('admin_enqueue_scripts', 'hwk_filter_date_range_enqueue');
function hwk_filter_date_range_enqueue(){
    global $pagenow;
    if($pagenow != 'edit.php' && $pagenow != 'upload.php')
        return;
    
    wp_enqueue_script('momentjs', '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.0/moment.min.js', array(), null);
    wp_enqueue_script('jquery-ui-datepicker', array(), null);
    wp_enqueue_script('jquery-ui-datepicker-filter', get_template_directory_uri() . '/assets/js/datepicker-filter.js', array('jquery'), null);
    
    wp_enqueue_style('jquery-ui', '//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css', array(), null);
    wp_enqueue_style('datepicker-styles', get_template_directory_uri() . '/assets/css/datepicker-styles.css', array(), null);
    wp_enqueue_style('datepicker-fitler', get_template_directory_uri() . '/assets/css/datepicker-filter.css', array(), null);
}
// Admin Filter Date Range: Form
add_action('restrict_manage_posts', 'hwk_filter_date_range_form');
function hwk_filter_date_range_form(){
    $filter_date_start = $filter_date_end = '';
    if(isset($_GET['filter_date_start']) && ($date = strtotime($_GET['filter_date_start'])))
        $filter_date_start = date('d/m/Y', $date);
    
    if(isset($_GET['filter_date_end']) && ($date = strtotime($_GET['filter_date_end'])))
        $filter_date_end = date('d/m/Y', $date);
    
    ?>
    <div class="filter_date_range_wrapper <?php echo ($filter_date_start) ? 'active': ''; ?>">
        <input type="text" placeholder="<?php _e('From'); ?>" class="filter_datepicker filter_datepicker_from" value="<?php echo $filter_date_start; ?>" />
        <span></span>
    </div>
    <div class="filter_date_range_wrapper <?php echo ($filter_date_end) ? 'active': ''; ?>">
        <input type="text" placeholder="<?php _e('To'); ?>" class="filter_datepicker filter_datepicker_to" value="<?php echo $filter_date_end; ?>" />
        <span></span>
    </div>
    <input type="hidden" name="filter_date_start" id="filter_datepicker_from" value="<?php echo $filter_date_start; ?>" />
    <input type="hidden" name="filter_date_end" id="filter_datepicker_to" value="<?php echo $filter_date_start; ?>" />
    <?php 
}
// Admin Filter Date Range: Query
add_action('pre_get_posts', 'hwk_filter_date_range_query');
function hwk_filter_date_range_query($query){
    global $pagenow;
    if(!is_admin() || !$query->is_main_query() || ($pagenow != 'edit.php' && $pagenow != 'upload.php') || (empty($_GET['filter_date_start']) && empty($_GET['filter_date_end'])))
        return;
    
    $date_query = array();
    $date_query['inclusive'] = true;
    
    if(isset($_GET['filter_date_start']) && !empty($_GET['filter_date_start']) && strtotime($_GET['filter_date_start']))
        $date_query['after'] = $_GET['filter_date_start'];
    
    if(isset($_GET['filter_date_end']) && !empty($_GET['filter_date_end']) && strtotime($_GET['filter_date_end']))
        $date_query['before'] = $_GET['filter_date_end'];
    $query->set('date_query', $date_query);
}

Les actions Javascript

jQuery(function($){
    var filter_date_start = $('.filter_datepicker.filter_datepicker_from'),
        filter_date_end = $('.filter_datepicker.filter_datepicker_to'),
        filter_native = $('#filter-by-date');
    $('.filter_datepicker').datepicker({
        altFormat:  'yy-mm-dd',
        dateFormat: 'dd/mm/yy',
    });
    filter_date_start.datepicker('option', 'altField', '#filter_datepicker_from');
    filter_date_end.datepicker('option', 'altField', '#filter_datepicker_to');
    $('.filter_date_range_wrapper > span').on('click', function(){
        $(this).closest('.filter_date_range_wrapper').find('> input').datepicker('setDate', null);
        $(this).closest('.filter_date_range_wrapper').removeClass('active');
        filter_date_start.datepicker('option', 'maxDate', null);
        filter_date_end.datepicker('option', 'minDate', null);
    });
    $('.filter_datepicker').on('change', function(){
        $('#filter_datepicker_from').val((!filter_date_start.val().length) ? '' : moment(filter_date_start.val(), 'DD/MM/YYYY').format('YYYY-MM-DD'));
        $('#filter_datepicker_to').val((!filter_date_end.val().length) ? '' : moment(filter_date_end.val(), 'DD/MM/YYYY').format('YYYY-MM-DD'));
        $(this).closest('.filter_date_range_wrapper').addClass('active');
    });
    filter_date_start.on('change', function(){
        filter_date_end.datepicker('option', 'minDate', filter_date_start.val());
    });
    filter_date_end.on('change', function(){
        filter_date_start.datepicker('option', 'maxDate', filter_date_end.val());
    });
    if(filter_date_start.val().length)
        filter_date_end.datepicker('option', 'minDate', filter_date_start.val());
    if(filter_date_end.val().length)
        filter_date_start.datepicker('option', 'maxDate', filter_date_end.val());
    filter_native.on('change', function(){
        filter_date_start.val(moment(filter_native.val(), 'YYYYMM').format('DD/MM/YYYY'));
        filter_date_end.val(moment(filter_native.val(), 'YYYYMM').endOf('month').format('DD/MM/YYYY'));
        $('.filter_datepicker').trigger('change');
        $(this).val('0');
    });
});

L’affichage CSS

.filter_date_range_wrapper{
    position:relative;
    display:inline-block;
    vertical-align:bottom;
}
.filter_date_range_wrapper > span{
    position:absolute;
    top:8px;
    right:6px;
    color:#ccc;
}
.filter_date_range_wrapper > span:after{
    content: "\f145";
    font-size: 16px;
    line-height: 1;
    font-family: dashicons;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}
.filter_date_range_wrapper.active > span{
    cursor:pointer;
}
.filter_date_range_wrapper.active > span:after{
    content: "\f158";
}
.filter_date_range_wrapper.active > span:hover{
    color:#555;
}

Le Style Datepicker

/**
 * Date Picker Default Styles
 * https://github.com/xwp/wp-jquery-ui-datepicker-skins
 */
.ui-datepicker {
    padding: 0;
    border: 1px solid #ddd;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.ui-datepicker * {
    padding: 0;
    font-family: "Open Sans", sans-serif;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.ui-datepicker table {
    font-size: 13px;
    margin: 0;
}
.ui-datepicker .ui-datepicker-header {
    border: none;
    background: #222;
    color: #fff;
    font-weight: normal;
}
.ui-datepicker .ui-datepicker-header .ui-state-hover {
    background: #222;
    border-color: transparent;
    cursor: pointer;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.ui-datepicker thead {
    background: #222;
    color: #fff;
}
.ui-datepicker .ui-datepicker-title {
    margin-top: .4em;
    margin-bottom: .3em;
    color: #fff;
    font-size: 14px;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover,
.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev {
    height: 1em;
    top: .9em;
    border: none;
}
.ui-datepicker .ui-datepicker-prev-hover {
    left: 2px;
}
.ui-datepicker .ui-datepicker-next-hover {
    right: 2px;
}
.ui-datepicker .ui-datepicker-next span,
.ui-datepicker .ui-datepicker-prev span {
    background-image: url('data:image/png;base64,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');
    background-position: -32px 0;
    margin-top: 0;
    top: 0;
    font-weight: normal;
}
.ui-datepicker .ui-datepicker-prev span {
    background-position: -96px 0;
}
.ui-datepicker th {
    padding: 0.75em 0;
    color: #fff;
    font-weight: normal;
    border: none;
    border-top: 1px solid #333;
}
.ui-datepicker td {
    background: #f1f1f1;
    border: none;
    padding: 0;
}
.ui-datepicker td .ui-state-default {
    background: transparent;
    border: none;
    text-align: center;
    padding: .5em;
    margin: 0;
    font-weight: normal;
    color: #333;
}
.ui-datepicker td .ui-state-active,
.ui-datepicker td .ui-state-hover {
    background: #0074a2;
    color: #fff;
}
.ui-datepicker td.ui-state-disabled,
.ui-datepicker td.ui-state-disabled .ui-state-default {
    opacity: 1;
    color: #999;
}
/* Other Datepicker Color Schemes */
/* Blue */
.admin-color-blue .ui-datepicker .ui-datepicker-header,
.admin-color-blue .ui-datepicker .ui-datepicker-header .ui-state-hover,
.admin-color-blue .ui-datepicker thead {
    background: #4796b3;
}
.admin-color-blue .ui-datepicker th {
    border-color: #52accc;
}
.admin-color-blue .ui-datepicker td .ui-state-active,
.admin-color-blue .ui-datepicker td .ui-state-hover {
    background: #096484;
}
/* Coffee */
.admin-color-coffee .ui-datepicker .ui-datepicker-header,
.admin-color-coffee .ui-datepicker .ui-datepicker-header .ui-state-hover,
.admin-color-coffee .ui-datepicker thead {
    background: #46403c;
}
.admin-color-coffee .ui-datepicker th {
    border-color: #59524c;
}
.admin-color-coffee .ui-datepicker td .ui-state-active,
.admin-color-coffee .ui-datepicker td .ui-state-hover {
    background: #c7a589;
}
/* Ectoplasm */
.admin-color-ectoplasm .ui-datepicker .ui-datepicker-header,
.admin-color-ectoplasm .ui-datepicker .ui-datepicker-header .ui-state-hover,
.admin-color-ectoplasm .ui-datepicker thead {
    background: #413256;
}
.admin-color-ectoplasm .ui-datepicker th {
    border-color: #523f6d;
}
.admin-color-ectoplasm .ui-datepicker td .ui-state-active,
.admin-color-ectoplasm .ui-datepicker td .ui-state-hover {
    background: #a3b745;
}
/* Midnight */
.admin-color-midnight .ui-datepicker .ui-datepicker-header,
.admin-color-midnight .ui-datepicker .ui-datepicker-header .ui-state-hover,
.admin-color-midnight .ui-datepicker thead {
    background: #26292c;
}
.admin-color-midnight .ui-datepicker th {
    border-color: #363b3f;
}
.admin-color-midnight .ui-datepicker td .ui-state-active,
.admin-color-midnight .ui-datepicker td .ui-state-hover {
    background: #e14d43;
}
/* Ocean */
.admin-color-ocean .ui-datepicker .ui-datepicker-header,
.admin-color-ocean .ui-datepicker .ui-datepicker-header .ui-state-hover,
.admin-color-ocean .ui-datepicker thead {
    background: #627c83;
}
.admin-color-ocean .ui-datepicker th {
    border-color: #738e96;
}
.admin-color-ocean .ui-datepicker td .ui-state-active,
.admin-color-ocean .ui-datepicker td .ui-state-hover {
    background: #9ebaa0;
}
/* Sunrise */
.admin-color-sunrise .ui-datepicker .ui-datepicker-header,
.admin-color-sunrise .ui-datepicker .ui-datepicker-header .ui-state-hover,
.admin-color-sunrise .ui-datepicker thead {
    background: #be3631;
}
.admin-color-sunrise .ui-datepicker th {
    border-color: #cf4944;
}
.admin-color-sunrise .ui-datepicker td .ui-state-active,
.admin-color-sunrise .ui-datepicker td .ui-state-hover {
    background: #dd823b;
}
/* Light */
.admin-color-light .ui-datepicker .ui-datepicker-header,
.admin-color-light .ui-datepicker .ui-datepicker-header .ui-state-hover,
.admin-color-light .ui-datepicker thead {
    background: #e5e5e5;
}
.admin-color-light .ui-datepicker td {
    background: #fff;
}
.admin-color-light .ui-datepicker .ui-datepicker-next span,
.admin-color-light .ui-datepicker .ui-datepicker-prev span {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAADwCAYAAADvl7rLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxMUIxRjI2RjhCODYxMUUzQTEyNERCMDU1QzdBQ0EyMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxMUIxRjI3MDhCODYxMUUzQTEyNERCMDU1QzdBQ0EyMCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjExQjFGMjZEOEI4NjExRTNBMTI0REIwNTVDN0FDQTIwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjExQjFGMjZFOEI4NjExRTNBMTI0REIwNTVDN0FDQTIwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+kKfR4AAAHcRJREFUeNrsXWuM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');
}
.admin-color-light .ui-datepicker th {
    border-color: #fff;
}
.admin-color-light .ui-datepicker .ui-datepicker-title,
.admin-color-light .ui-datepicker td .ui-state-default,
.admin-color-light .ui-datepicker th {
    color: #555;
}
.admin-color-light .ui-datepicker td .ui-state-active,
.admin-color-light .ui-datepicker td .ui-state-hover {
    color: #fff;
    background: #888;
}
.admin-color-light .ui-datepicker td.ui-state-disabled,
.admin-color-light .ui-datepicker td.ui-state-disabled .ui-state-default {
    color: #ccc;
}
input[name="mishaDateFrom"], input[name="mishaDateTo"]{
    line-height: 28px;
    height: 28px;
    margin: 0;
    width:125px;
}

Konrad Chmielewski

Evangeliste WordPress & Full Stack Developer depuis 10 années.

WORDPRESS
Plus d'articles

Gérer Dynamiquement les Queries & Templates des Post Types / Taxonomies

10 May 2018

Accélérer le Traitement des Reqûetes Ajax WordPress grâce à Shortinit

22 April 2018

ACF: Ajouter des Options au Champ Google Map avec Markers, Zoom & Style Personnalisé

14 April 2018

Ajouter un Filtre de Plage de Dates dans l’Administration des Posts Types

Affichage du formulaire

Les actions Javascript

L’affichage CSS

Le Style Datepicker

Accès rapide

Documentation

WORDPRESS
Plus d'articles

Gérer Dynamiquement les Queries & Templates des Post Types / Taxonomies

Accélérer le Traitement des Reqûetes Ajax WordPress grâce à Shortinit

ACF: Ajouter des Options au Champ Google Map avec Markers, Zoom & Style Personnalisé

	<?php

	// Admin Filter Date Range: Enqueue
	add_action('admin_enqueue_scripts', 'hwk_filter_date_range_enqueue');
	function hwk_filter_date_range_enqueue(){
	global $pagenow;
	if($pagenow != 'edit.php' && $pagenow != 'upload.php')
	return;

	wp_enqueue_script('momentjs', '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.0/moment.min.js', array(), null);
	wp_enqueue_script('jquery-ui-datepicker', array(), null);
	wp_enqueue_script('jquery-ui-datepicker-filter', get_template_directory_uri() . '/assets/js/datepicker-filter.js', array('jquery'), null);

	wp_enqueue_style('jquery-ui', '//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css', array(), null);
	wp_enqueue_style('datepicker-styles', get_template_directory_uri() . '/assets/css/datepicker-styles.css', array(), null);
	wp_enqueue_style('datepicker-fitler', get_template_directory_uri() . '/assets/css/datepicker-filter.css', array(), null);
	}

	// Admin Filter Date Range: Form
	add_action('restrict_manage_posts', 'hwk_filter_date_range_form');
	function hwk_filter_date_range_form(){
	$filter_date_start = $filter_date_end = '';
	if(isset($_GET['filter_date_start']) && ($date = strtotime($_GET['filter_date_start'])))
	$filter_date_start = date('d/m/Y', $date);

	if(isset($_GET['filter_date_end']) && ($date = strtotime($_GET['filter_date_end'])))
	$filter_date_end = date('d/m/Y', $date);

	?>
	<div class="filter_date_range_wrapper <?php echo ($filter_date_start) ? 'active': ''; ?>">
	<input type="text" placeholder="<?php _e('From'); ?>" class="filter_datepicker filter_datepicker_from" value="<?php echo $filter_date_start; ?>" />
	<span></span>
	</div>

	<div class="filter_date_range_wrapper <?php echo ($filter_date_end) ? 'active': ''; ?>">
	<input type="text" placeholder="<?php _e('To'); ?>" class="filter_datepicker filter_datepicker_to" value="<?php echo $filter_date_end; ?>" />
	<span></span>
	</div>

	<input type="hidden" name="filter_date_start" id="filter_datepicker_from" value="<?php echo $filter_date_start; ?>" />
	<input type="hidden" name="filter_date_end" id="filter_datepicker_to" value="<?php echo $filter_date_start; ?>" />
	<?php
	}

	// Admin Filter Date Range: Query
	add_action('pre_get_posts', 'hwk_filter_date_range_query');
	function hwk_filter_date_range_query($query){
	global $pagenow;
	if(!is_admin() \|\| !$query->is_main_query() \|\| ($pagenow != 'edit.php' && $pagenow != 'upload.php') \|\| (empty($_GET['filter_date_start']) && empty($_GET['filter_date_end'])))
	return;

	$date_query = array();
	$date_query['inclusive'] = true;

	if(isset($_GET['filter_date_start']) && !empty($_GET['filter_date_start']) && strtotime($_GET['filter_date_start']))
	$date_query['after'] = $_GET['filter_date_start'];

	if(isset($_GET['filter_date_end']) && !empty($_GET['filter_date_end']) && strtotime($_GET['filter_date_end']))
	$date_query['before'] = $_GET['filter_date_end'];

	$query->set('date_query', $date_query);
	}

	jQuery(function($){

	var filter_date_start = $('.filter_datepicker.filter_datepicker_from'),
	filter_date_end = $('.filter_datepicker.filter_datepicker_to'),
	filter_native = $('#filter-by-date');

	$('.filter_datepicker').datepicker({
	altFormat: 'yy-mm-dd',
	dateFormat: 'dd/mm/yy',
	});

	filter_date_start.datepicker('option', 'altField', '#filter_datepicker_from');
	filter_date_end.datepicker('option', 'altField', '#filter_datepicker_to');

	$('.filter_date_range_wrapper > span').on('click', function(){
	$(this).closest('.filter_date_range_wrapper').find('> input').datepicker('setDate', null);
	$(this).closest('.filter_date_range_wrapper').removeClass('active');

	filter_date_start.datepicker('option', 'maxDate', null);
	filter_date_end.datepicker('option', 'minDate', null);
	});

	$('.filter_datepicker').on('change', function(){
	$('#filter_datepicker_from').val((!filter_date_start.val().length) ? '' : moment(filter_date_start.val(), 'DD/MM/YYYY').format('YYYY-MM-DD'));
	$('#filter_datepicker_to').val((!filter_date_end.val().length) ? '' : moment(filter_date_end.val(), 'DD/MM/YYYY').format('YYYY-MM-DD'));

	$(this).closest('.filter_date_range_wrapper').addClass('active');
	});

	filter_date_start.on('change', function(){
	filter_date_end.datepicker('option', 'minDate', filter_date_start.val());
	});

	filter_date_end.on('change', function(){
	filter_date_start.datepicker('option', 'maxDate', filter_date_end.val());
	});

	if(filter_date_start.val().length)
	filter_date_end.datepicker('option', 'minDate', filter_date_start.val());

	if(filter_date_end.val().length)
	filter_date_start.datepicker('option', 'maxDate', filter_date_end.val());

	filter_native.on('change', function(){
	filter_date_start.val(moment(filter_native.val(), 'YYYYMM').format('DD/MM/YYYY'));
	filter_date_end.val(moment(filter_native.val(), 'YYYYMM').endOf('month').format('DD/MM/YYYY'));
	$('.filter_datepicker').trigger('change');
	$(this).val('0');
	});

	});

	.filter_date_range_wrapper{
	position:relative;
	display:inline-block;
	vertical-align:bottom;
	}
	.filter_date_range_wrapper > span{
	position:absolute;
	top:8px;
	right:6px;
	color:#ccc;
	}
	.filter_date_range_wrapper > span:after{
	content: "\f145";
	font-size: 16px;
	line-height: 1;
	font-family: dashicons;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	}

	.filter_date_range_wrapper.active > span{
	cursor:pointer;
	}

	.filter_date_range_wrapper.active > span:after{
	content: "\f158";
	}

	.filter_date_range_wrapper.active > span:hover{
	color:#555;
	}

Ajouter un Filtre de Plage de Dates dans l’Administration des Posts Types

Affichage du formulaire

Les actions Javascript

L’affichage CSS

Le Style Datepicker

Accès rapide

Documentation

WORDPRESSPlus d'articles

Gérer Dynamiquement les Queries & Templates des Post Types / Taxonomies

Accélérer le Traitement des Reqûetes Ajax WordPress grâce à Shortinit

ACF: Ajouter des Options au Champ Google Map avec Markers, Zoom & Style Personnalisé

WORDPRESS
Plus d'articles