Skip to content

Instantly share code, notes, and snippets.

@yoavf

yoavf/nepali-date-block.js

Last active Mar 20, 2019
Embed
What would you like to do?
// Nepali calendarFunctions() made available by loading the latest version of https://github.com/leapfrogtechnology/Nepali-Date-Picker
( function() {
const { __ } = wp.i18n;
const el = wp.element.createElement
const blockStyle = {
backgroundColor: '#DC143C',
color: '#fff',
padding: '20px',
};
wp.blocks.registerBlockType( 'wcktm/nepali-date-block', {
title: __( 'Nepali Date', 'gutenberg-examples' ),
icon: 'calendar-alt',
category: 'widgets',
attributes: {
nepaliDate: {
type: 'string'
},
englishDate: {
type: 'string'
}
},
edit: function( { isSelected, attributes, setAttributes } ) {
const saveDate = function( englishDate ) {
const englishDateObject = new Date( englishDate );
const nepaliDate = calendarFunctions.getBsDateByAdDate(
englishDateObject.getFullYear(),
englishDateObject.getMonth() + 1,
englishDateObject.getDay()
);
setAttributes( {
'englishDate': englishDate,
'nepaliDate' : calendarFunctions.bsDateFormat(
"%y-%m-%d",
nepaliDate.bsYear,
nepaliDate.bsMonth,
nepaliDate.bsDate
),
} );
}
if ( isSelected ) {
return el(
wp.components.DatePicker, {
onChange: saveDate,
currentDate: typeof attributes.englishDate !== 'undefined' ?
new Date( attributes.englishDate ) : new Date()
});
} else {
const text = typeof attributes.nepaliDate !== 'undefined' ?
attributes.nepaliDate :
__( 'Click to select a date' );
return el(
'p',
{ style: blockStyle },
text
);
}
},
save: function( props ) {
if ( props.attributes.nepaliDate !== undefined ) {
return el(
'p',
{ style: blockStyle },
props.attributes.nepaliDate
);
}
},
} );
} )();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.