jDatePicker

jDatePicker offers a different design approach to provide a 'fancy' way of selecting date and time.

Documentation

The initialization options and further documentation is available here:

Documentation link

The interface

Install

In order to use jDatePicker, you need to append the following files to your project:

Document's head tag

Document's body tag

---

Usage

Once your document DOM finishes loading, you may create one or more instance of jDatePicker:

The open() method is required to be called in order for the UI to be displayed to the user.

---

Options

jDatePicker provides an array of options to help you integrate it into your project. Options must be declared whenever you create a new instance of jDatePicker, as described below:

• year:number (optional)

  Pre-selects the year.

• month:number (optional)

  Pre-selects the month.

• date:number (optional)

  Pre-selects the date.

• hour:number (optional)

  Pre-selects the hour. Default: current client time.

• minute:number (optional)

  Pre-selects the minutes. Default: current client time.

• disableDates:array (optional)

  Prevent provided dates from been selected. Expects and array containing date objects, as displayed below.

  
  

  ...
  disableDates: [
    date: 25,
    month: 12,
    year: 2022
  ]
  ...
                          

• enableYearChange:boolean (optional)

  Enable or disables the controls to change year. Default: true.

• enableMonthChange:boolean (optional)

  Enable or disables the controls to change month. Default: true.

• enableTimeChange (optional)

  Enable or disables the controls to change time. Default: true.

• translation:array (optional)

  Allows the UI to be translated to any language supported by the font. Default: English.

  
  

  ...
  translation: {
      month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'Dezember'],
      week: ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']
  }
  ...                            
                          

• holidays:array (optional)

  Highlights the calendar's using the dates provided within the array.

  
  

  ...
  holidays: [
      {
          date: 25,
          month: 12,
          name: 'Christmas'
      },
      {
          date: 1,
          month: 9,
          name: 'Saint J'
      }
  ]
  ...
                          

• onDate:callback (optional)

  Callback triggered every time the date changes.

• onMonth:callback (optional)

  Callback triggered every time the month changes.

• onYear:callback (optional)

  Callback triggered every time the year changes.

• onCancel:callback (optional)

  Callback triggered when user clicks the close button within jDatePicker.

• onAccept:callback (optional)

  Callback triggered when user clicks the accept button within jDatePicker.

• Callbacks

  All available callbacks must be declared within the option payload.

  
  

  ... 
  onDate: () => {},
  onMonth: () => {},
  onYear: () => {},
  onTime: () => {},
  onCancel: () => {},
  onAccept: () => {}
  ...
                          

---

License

This software is provided to you free of charge under CC BY 4.0 license.

» Read license terms here.

---

Notice

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.