first

wp-content/plugins/visual-portfolio/gutenberg/components/date-picker/index.js

@@ -0,0 +1,49 @@
+import { Button, DatePicker, Dropdown } from '@wordpress/components';
+import {
+	__experimentalGetSettings as getSettings,
+	dateI18n,
+} from '@wordpress/date';
+import { Component } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Component Class
+ */
+export default class VPDatePicker extends Component {
+	render() {
+		const { value, onChange } = this.props;
+
+		const settings = getSettings();
+		const resolvedFormat = settings.formats.datetime || 'F j, Y';
+
+		return (
+			<Dropdown
+				renderToggle={({ onToggle }) => (
+					<Button isSecondary isSmall onClick={onToggle}>
+						{value
+							? dateI18n(resolvedFormat, value)
+							: __('Select Date', 'visual-portfolio')}
+					</Button>
+				)}
+				renderContent={() => (
+					<div className="components-datetime vpf-component-date-picker">
+						<DatePicker currentDate={value} onChange={onChange} />
+						{value ? (
+							<Button
+								isSecondary
+								isSmall
+								onClick={() => {
+									onChange('');
+								}}
+							>
+								{__('Reset Date', 'visual-portfolio')}
+							</Button>
+						) : (
+							''
+						)}
+					</div>
+				)}
+			/>
+		);
+	}
+}