如何在Gutenberg编辑器中使用@WordPress/Date块?

时间:2018-09-25 作者:Raphael Rafatpanah

Wordpress似乎提供了一个现成的日期块:https://wordpress.org/gutenberg/handbook/packages/packages-date/

如何在古腾堡编辑器中启用/使用此块或另一个日期选择器块?

1 个回复
最合适的回答,由SO网友:Ashiquzzaman Kiron 整理而成

WordPress默认不提供日期选择器块,但在核心中有日期组件。您需要调用相关组件才能使日期选择器工作。下面是core的代码Date Component

import { DateTimePicker } from \'@wordpress/components\';
import { getSettings } from \'@wordpress/date\';
import { withState } from \'@wordpress/compose\';


const MyDateTimePicker = withState( {
    date: new Date(),
} )( ( { date, setState } ) => {
    const settings = getSettings();

    // To know if the current timezone is a 12 hour time with look for "a" in the time format.
    // We also make sure this a is not escaped by a "/".
    const is12HourTime = /a(?!\\\\)/i.test(
        settings.formats.time
            .toLowerCase() // Test only the lower case a
            .replace( /\\\\\\\\/g, \'\' ) // Replace "//" with empty strings
            .split( \'\' ).reverse().join( \'\' ) // Reverse the string and test for "a" not followed by a slash
    );

    return (
        <DateTimePicker
            currentDate={ date }
            onChange={ ( date ) => setState( { date } ) }
            locale={ settings.l10n.locale }
            is12Hour={ is12HourTime }
            />
    );

} );

结束

相关推荐