Oracle APEX Item Plugin - DynamicDateTimePicker

DynamicDateTimePicker is an item type plugin that allows users to select date and time from a calender picker. It is based on a JS Air datePicker (https://github.com/t1m0n/air-datepicker).

Donation

Your support means a lot.

Changelog

1.1 - Validations for All Date Picker Types, Min & Max Date|Hours & Minutes, known bugs removed.

1.0 - Initial Release

Install

• Import plugin file "item_type_plugin_com_planetapex_dynamicdatetimepicker.sql" from source directory into your application
• (Optional) Deploy the CSS/JS files from "src" directory on your webserver and change the "File Prefix" to webservers folder.

Preview

Demo Application

Date Picker Application

Plugin Features

• 11 Types of Date and Time Picker to choose from.
• Multi-Languages, 16 Languages support
• Showing Inline as part of the page or On Show events like click, focus or mouse enter
• 8 Display Positions to choose from.
• Date validation Option.
• Custom Date Picker Title
• Previous and Forward Navigation Buttons Icons

Plugin Settings

Date and Time Picker Types

---

Users have many options for the Date and Time Picker types, for example:

• Single Date Picker
• Date Range Picker
• Multiple Dates Picker
• Single Month Picker
• Months Range Picker
• Multiple Months Picker
• Single Year Picker
• Years Range Picker
• Multiple Years Picker
• Time Picker Only
• Date Time Split

To Date(Time) Item This item is used to set the 2nd Value in the following Date Picker Types

• Date Range Picker
• Month Range Picker
• Year Range Picker
• Date Time Split

Time Picker Addon Options

Each of the Date and Time Picker Type option has an option to apend a time picker to it so that the user can select time as well.

Date Time Separator

Separator between date and time

Hours:Minutes Minimum Maximum

Minimum and Maximum hours value, must be between 00 and 23. You will not be able to choose value higher than this.

Minimum and Maximum minutes value, must be between 00 and 59. You will not be able to choose value higher than this.

The expression is a comma separated value between set of Minimum(Hour:Minute) and set of Maximum(Hour:Minute) as Hour:Minute,Hour:Minute

Do not leave any part.

Time from start of the day to 9:30 am then enter as following:

00:00,9:30

Restricting Time From 10:30 am to 6:45 pm is as following:

10:30,18:45

---

DatePicker Options

Multiple Dates Separator

Multiple Dates separator is used when concatenating dates to string in the following Date Picker types:

• Multiple Dates Picker
• Multiple Months Picker
• Multiple Years Picker

First Day of Week

Determine which day the week will be started from.

By default Sunday is considered as first day of the week.

Available options include:

• Sunday
• Monday
• Tuesday
• Wednesday
• Thursday
• Friday
• Saturday

Weekends

List of day's which will be considered as weekends. Class -weekend- will be added to relevant cells.

By default its Saturday and Sunday.

Available options include:

• Saturday
• Sunday
• Monday
• Tuesday
• Wednesday
• Thursday
• Friday

Minimum Date

The minimum date for date picker. All dates, running before it can't be selected.

Minimum and Maximum date usually works well with the following settings:

Disable Navigation When Out Of Range Option. So the user also can't navigate to dates with Minimum and Maximum dates set.

The date value can be:

• an absolute value in "DD/MM/YYYY" or "DD/MM/RRRR" date format mask or
• can be dynamic based on an item substituition value.

Examples

• 02/19/2017
• Item Based . To set the minimum date to the start of the month, Create a P1_MIN_DATE hidden Item and refer it in the Minimum Date attribute as &P1_MIN_DATE. Set its value to start of the Month by the following After Header PL/SQL expression computation:

to_char(trunc(sysdate, 'MM'), 'MM/DD/YYYY')

Remember to use the date 'MM/DD/YYYY' OR 'MM/DD/RRRR' format Mask.

Maximum Date

The maximum date for date picker. All dates, running after it can't be selected.

Minimum and Maximum date usually works well with the following settings:

Disable Navigation When Out Of Range Option. So the user also can't navigate to dates with Minimum and Maximum dates set.

The date value can be:

• an absolute value in "DD/MM/YYYY" or "DD/MM/RRRR" date format mask or
• can be dynamic based on an item substituition value.

Examples

• 02/19/2017
• Item Based . To set the maximum date to the end of the month. Create a P1_MAX_DATE hidden Item and refer it in the Maximum Date attribute as &P1_MAX_DATE. Set its value with the following After Header PL/SQL expression computation:

to_char(last_day(sysdate), 'MM/DD/YYYY')

Remember to use the date 'MM/DD/YYYY' OR 'MM/DD/RRRR' format Mask.

Show Method

Selects the method the date picker calendar displays.

Available options include:

On item click

The date time picker pop-up displays when the item is clicked.

**

On icon click

**

The date time picker pop-up displays when the icon is clicked.

**

On item and icon click

**

The date time picker pop-up displays when the item or icon is clicked.

**

On focus

**

The date time picker pop-up displays as soon as the item receives focus.

**

On mouse enter

**

The date time picker pop-up displays when mouse hovers over the item.

**

Inline

**

The date time picker will be always visible, inline with the item.

Display Position

Position of date picker relative to text input.

• First value is name of main axis, and
• Second value is whether the Date Picker is rendered as
• Left(Leftwards)
• Right(Rightwards)
• Up(Upwards)
• Bottom(Downwards)

Available options include:

• Bottom Left
• Bottom Right
• Right Bottom
• Right Top
• Top Left
• Top Right
• Left Top
• Left Bottom

Examples

Right Top will set date picker's position from right side upwards of text input.

DatePicker Title

Content of datepicker's title depending on current view.

There are three views in the Date Picker

• Days view i.e when selecting days,
• Months view i.e when selecting months and
• Years view i.e when selecting years.

Missing fields will be taken from default values.

This setting can contain simple text, HTML with Styling and relevant, specific format mask. check out examples

Never Hard Break i.e use keyboard return in code.

Examples

For days view:

"days":"<span style='color:red;background-color:yellow;font-size:2em'>Check In:MM, yyyy</span>" 

For months view:

"months":"<span style='color:red;background-color:yellow;font-size:2em'>Year:yyyy</span>" 

For years view:

"years":"<span style='color:red;background-color:yellow;font-size:2em'>Decade:yyyy1 - yyyy2</span>" 

All can be combined with comma as following

"days":"<span style='color:red;background-color:yellow;font-size:2em'>Check In:MM, yyyy</span>","months":"<span style='color:white;background-color:green;font-size:2em'>Year:yyyy</span>","years":"<span style='color:yellow;background-color:green;font-size:2em'>Decade:yyyy1 - yyyy2</span>"

---

Miscellaneous Options:

Available options include:

Toggle Selected

If checked, then clicking on selected cell will remove it from selection and its value from the item.

**

Autoclose

**

If checked, date picker will close after date selection.

**

Keyboard Navigation

**

If checked, then one can navigate through calendar by keyboard.

  Hot keys:
        Ctrl + → | ↑- move one month forwards
        Ctrl + ← | ↓- move one month backwards
        Shift + → | ↑- move one year forwards
        Shift + ← | ↓- move one year backwards
        Alt + → | ↑- move 10 years forwards
        Alt + ← | ↓- move 10 years backwards
        Ctrl + Shift + ↑- move to next view
        Esc- hides date picker

Today Button

If checked, "Today" button will be visible.

**

Clear Button

**

If checked, "Clear" button will be visible.

**

Show Days from Other Months[Days' View]

**

If checked, days from other months will be visible.

**

Select Days from Other Months[Days' View]

**

If checked, the user can select days form other months.

**

Transition to Selected Month[Days' View]

**

If checked, selecting days from other month, will move to that month.

**

Show other Years[Years' View]

**

If checked, years from other decades will be visible.

**

Select Other Years[Years' View]

**

If checked, user can select years from other decades

**

Transition to Selected Year[Years' View]

**

If checked, selecting year from other decade, will move to that decade.

**

Disable Navigation When Out Of Range

**

If checked, for dates less than minimum possible or more then maximum possible, navigation buttons ('forward', 'back') will be deactivated.

---

Languages

Available languages include:

• Chinese
• Czech
• Danish
• Deutsch(German)
• Dutch
• English
• Finnish
• French
• Hungarian
• Polish
• Portuguese
• Portuguese (Brazil)
• Romanian
• Russian
• Slovak
• Spanish