datepicker-api-doc.md

Hijri/Gregorian Datepicker API Documentation

 

Constructor

Syntax

new Datepicker([isHijriMode[, fullYear[, monthIndex[, firstDay[, language[, colorTheme[, width]]]]]]]);

Parameters

• isHijriMode (optional)
  Boolean value representing the dates mode
  true: Hijri dates
  false: Gregorian dates
  Default: false

• fullYear (optional)
  Integer value representing the full year. Allow value below 1 (0 or negative value) that indicates before Hijra/Gregorian era. Value 0 for 1 BH/BE, -1 for 2 BH/BE, and so forth.
  Default: current year

• monthIndex (optional)
  Integer value representing the month, beginning with 0 for Muharram/January to 11 for Dhul-Hijja/December.
  Default: index of current month

• firstDay (optional)
  Integer value representing the first day of week (0-6).
  Default: 1 (Monday)

• language (optional)
  String value representing the language used by the widget. Currently three languages are supported.
  "ar": Arabic
  "en": English
  "id": Indonesian
  Default: "en"

• colorTheme (optional)
  Integer value representing the color index (0-22) or string value representing the color theme used by the widget.
   0 or "amber"
 1 or "aqua"
 2 or "black"
 3 or "blue"
 4 or "blue-grey""
   5 or "brown"
 6 or "cyan"
 7 or "dark-grey"
 8 or "deep-orange"
 9 or "deep-purple"
10 or "green"
11 or "grey"
12 or "indigo"
13 or "khaki"
14 or "light-blue"
15 or "light-green"
16 or "lime"
17 or "orange"
18 or "pink"
19 or "purple"
20 or "red"
21 or "teal"
22 or "yellow"
  Default: random color theme

• width (optional)
  Numeric value representing the width of the widget (280-600) in pixel.
  Default: 300 pixel

Datepicker Instance Methods

• .attachTo(parentElement)
  Attach this widget element into a parent HTML element designated by parentElement.

• .getElement()
  Returns this widget element.

• .getOppositePickedDate()
  Returns an opposite date instance of current dates mode. If the current dates mode is Gregorian then this method will return a HijriDate instance, whereas if the current dates mode is Hijri then a Date instance will be returned.

• .getPickedDate()
  Returns an instance of Date or HijriDate depend on widget current dates mode. To conserve the memory, it's important to note that each instance returned by a call to this method, all of them are the same instance and only differs from the moment it represents.

• .hide()
  Hides this widget.

• .pick()
  Shows this widget. This is the same with .show() method.

• .resetDate(fullYear, monthIndex)
  Resets the dates with an integer value pointed by fullYear and an integer value pointed by monthIndex.

• .setFirstDayOfWeek(firstDay)
  Sets the first day of week with an integer value (0-6) pointed by firstDay.

• .setFullYear(fullYear)
  Sets the full year with an integer value pointed by fullYear.

• .setHijriMode(hijriMode)
  Sets the dates mode with a boolean value pointed by hijriMode.
  true: Hijri dates
  false: Gregorian dates

• .setLanguage(language)
  Sets the language used by this widget with a string value pointed by languge.
  "ar": Arabic
  "en": English
  "id": Indonesian

• .setMonth(monthIndex)
  Sets the month index with an integer value (0-11) pointed by monthIndex.

• .setTheme([colorTheme])
  Sets the widget color theme with an integer value (0-22) as color index or a string value as color name pointed by colorTheme. If this colorTheme isn't specified then a random color theme will be applied.
   0 or "amber"
 1 or "aqua"
 2 or "black"
 3 or "blue"
 4 or "blue-grey""
   5 or "brown"
 6 or "cyan"
 7 or "dark-grey"
 8 or "deep-orange"
 9 or "deep-purple"
10 or "green"
11 or "grey"
12 or "indigo"
13 or "khaki"
14 or "light-blue"
15 or "light-green"
16 or "lime"
17 or "orange"
18 or "pink"
19 or "purple"
20 or "red"
21 or "teal"
22 or "yellow"

• .setTime(time)
  Sets the dates to an integer value pointed by time as the time represented by number of milliseconds.

• .setWidth(width)
  Sets the widget width in pixel with a numeric value (280-600) pointed by width.

• .show()
  Shows the widget. This is the same with .pick() method.

• .today()
  Sets the dates to current year and month.

Datepicker Instance Properties

• .onPicked
  Assign this property to a function that do some processes when a date was picked. Please note that every time a date is picked, the .hide() method always called afterwards.
  For example:

  let datepicker = new Datepicker();
  datepicker.onPicked = function() {
      // do stuff
  };

Date.prototype and HijriDate.prototype Instance Extended Methods

By using this library, the following methods will be added to both Date.prototype and HijriDate.prototype instances.

• .getDateString() Returns the picked dates as a human readable string in accordance with predetemined dates mode (Gregorian or Hijri). For example "Friday, 4 January 2019 AD" for the Gregorian dates mode or "Jumu'ah, 27 Rabi'ul-Akhir 1440 H" for the Hijri dates mode.

• .getMonthName([monthIndex]) Returns the name of desired month index (0-11) that pointed by monthIndex as a human readable string ("January"-"December" or "Muharram"-"Dhul-Hijja"). If monthIndex is omitted, instead the current month's name will be returned.

• .getWeekdayName([day]) Returns the name of desired day of week (0-6) that pointed by day as a human readable string ("Sunday"-"Saturday" or "Ahad"-"Sabt"). If day is omitted, instead the name of current day of week will be returned.

• .getWeekdayShortName([day]) Returns the short name of desired day of week (0-6) that pointed by day as a human readable string ("Sun"-"Sat" or "Ahd"-"Sab"). If day is omitted, instead the short name of current day of week will be returned.

• .getYearString([fullYear]) Returns the desired full year in integer value that pointed by fullYear followed by era suffix as a human readable string. If fullYear is omitted, instead the string of current full year will be returned.

 

 

 

---

Designed By ZulNs

@Gorontalo, 8 January 2019

---