Calendar

Single Datepicker

The Shared UI Library supports styling for the calendar, but to make it work you will need to include jQuery UI Datepicker.

For using monochrome for date picker add class .sui-elements-accessible in body wrapper.

Set an expiration date for your module.

HTML Markup

<div class="sui-form-field">

	<label for="unique-id" id="unique-id--label" class="sui-label">Label</label>

	<div class="sui-date">
		<input
			type="text"
			placeholder="Placeholder"
			id="unique-id"
			class="sui-form-control"
			aria-labelledby="unique-id--label"
			aria-describedby="unique-id--message unique-id--error"
		/>
		<span class="sui-icon-calendar" aria-hidden="true"></span>
	</div>

	<!-- NOTE: Print error message when error occurs and display message -->
	<span id="unique-id--error" class="sui-error-message" style="display: none;"></span>

	<span id="unique-id--message" class="sui-description">Field message goes here.</span>

</div>

Sample JS

$( '#unique-id' ).attr( 'aria-live', 'polite' );
$( '#unique-id' ).datepicker({
	beforeShow: function( input, inst ) {
		$( '#ui-datepicker-div' ).addClass( 'sui-calendar' );
	},
	'dateFormat': 'd MM yy'
});