This Lightning custom datepicker for Salesforce c:customDatePicker

This datepicker is a customisable of the datepicker that fit all your projects.

See below to discover all customisable components.

Note: This component uses Javascript without third-party frameworks and libraries but it using SLDS.

API

currentDate

• The current date for example currentDate="2015-01-18"

Format

• date format displayed in datePicker for example format="MMM dd, YYYY"
• default value "MMM dd, YYYY"

Label

• set laber for datepicker

Header

• It allows or denies display of a header with a full description of the date.
• default header="true"

Color

• This attribute set the color styles as the background and color
• default bgcolor="rgb(194, 57, 52)" color="white"

Format day

• This attribute identifies the beginning of the week. Euro - starts from Monday, USA - starts from Sunday
• default formatDay="USA"

Animation

• This attribute enable or disable animation. animation = "true"
• default animation = "false"

EnablePicker

• This attribute enable or disable datePicker. enablePicker = "true"
• default enablePicker = "true"

new Version 2.0:

What's new?

• Added mobile datePicker version (custom modal window)
• improved animation
• improved code and checked mistakes in the component (fully dynamic component)
• Link Package Version Custom Datepicker Lightning Challenge, v2.0 https://login.salesforce.com/packaging/installPackage.apexp?p0=04t6F0000045VIy

Demos & Examples:

mobile version (Salesforce 1):

<c:customDatePicker aura:id="CDP04" animation="true" bgcolor="#16171529" currentDate="2019-01-05" color="#CC2EFA" header="true" formatDay="Euro"/>

<c:customDatePicker bgcolor="#2c97a7" currentDate="2019-01-01"  header="true" formatDay="Euro"/>

PC version:

<c:customDatePicker aura:id="CDP01" currentDate="2019-01-18" format="MMM dd, YYYY" header="true" label="Custom DatePicker"/>

<c:customDatePicker currentDate="2019-01-19" format="MMM dd, YYYY"  enablePicker="false" label="False enable DatePicker"/>

<c:customDatePicker bgcolor="yellow" color="green" header="true" enablePicker="true"/>

<c:customDatePicker aura:id="CDP04" animation="true" bgcolor="#16171529" currentDate="2019-01-05" color="#CC2EFA" header="true" formatDay="Euro"/>

<c:customDatePicker formatDay="Euro" bgcolor="black" color="yellow" format="YYYY/MM, DD" header="false" />

<c:customDatePicker bgcolor="#2c97a7" currentDate="2019-01-01"  header="true" formatDay="Euro"/>