CT UI /

CTDateRange by CornelTEK

Showcase

Inline DateRangePicker

The demo below uses inline mode with sport theme.

PopupDateRangePicker

Date Range Button

One-line Configuration to Create Your Own Theme

@import "base";
.CTDateRangePicker.CTDateRangePicker--default {
  @include base-theme($theme-color: #337ab7, $theme-invert-color: #ffffff);
}

Features

  • jQuery plugin, jQuery compatible
  • Native JavaScript API
  • Bootstrap3 compatible
  • Zero dependency
  • 3 different modes: inline, modal, dropdown
  • Ability of creating new themes with simple configuration in SCSS
  • Ability to add navigation constraints: you can set "before" or "after" to limit the navigation and the selection.
  • Ability to switch single calendar or duo calendar.

Browser Compatibility

Safari 10.0.3+
IE 10
Edge 38
Firefox 34.0.5+
Google Chrome 30+

Architecture

CTDateRange is written in TypeScript. But don't worry, TypeScript compiles all typescript code into plain javascript files, so that it works pretty well with your ES5/ES6 JavaScript application.

If you use TypeScript, then it's perfect, TypeScript brings the benefits of strong typing, so that you don't need to worry about passing wrong type of data.

The core part of CTDateRangePicker is the Calendar class. It manages the date navigation, date range selection and the dates data generation.

And the UI components are based on jQuery, which wraps the core components up into a React-like one-way rendering component.

What You Will Get

Free Upgrades

You can get free upgrades for 1 year once you purchased the item.

The upgrades may include new features, bug fixes and doc updates.

Source code

You will get all the source files, mostly written in TypeScript.

Documentation

Documentation will also be attached in the distribution file.

You will be able to request some doc if you found something missing

Modification

You will be allowed to modify anything included in the package

Note: re-distribution is not allowed.

Support

3 month, you will get response within 3 days.

The support includes: availability of the author to answer questions, answering technical questions about item’s features, assistance with reported bugs and issues.

jQuery Plugin Synopsis

// javascript
var sel = new DateRange({
  start: new Date(2017, 2, 3),
  end: new Date(2017, 2, 8)
});
$('#rangeInput').daterangepicker({
    "calendar": {
        "firstDayOfWeek" : Weekday.Sunday,
        "date" : new Date,
        "constraint" : {
          "before" : {
            year : 2017,
            month : 5
          },
          "after" : {
            year : 2010,
            month : 0
          }
        }
    }, 
    "selection": sel,
    "triggers": [ $('#showPicker') ],
    "inputs": {
        "range": $('#rangeInput'),
        "from": $('#fromInput'),
        "to": $('#toInput'),
    },
});
$('#rangeInput')
  .on("dateRange.pick", (e, sel) => {
      console.log("dateRange.pick", sel)
  })
  .on("dateRange.select", (e, sel) => {
      console.log("dateRange.select", sel)
  })
  .on("dateRange.change", (e, sel) => {
      console.log("dateRange.change", sel)
  })
  .on("dateRange.reset", (e) => {
      console.log("dateRange.reset")
  })

Native API Synopsis

DateRangePicker

// typescript
import {DateRangePicker} from "./src/frameworks/jQuery";
const sel = new DateRange({
  start: new Date(2017, 2, 3),
  end: new Date(2017, 2, 8)
});
const inlinePicker = new DateRangePicker({
  "mode": "inline",
  "calendar": {
    "firstDayOfWeek" : Weekday.Sunday,
    "date" : new Date,
    "constraint" : {
      "before" : {
        year : 2017,
        month : 5
      },
      "after" : {
        year : 2010,
        month : 0
      }
    }
  }, 
  "selection": sel,
  "inputs": {
    "from": $("#fromDate"),
    "to": $("#toDate"),
  }
});
inlinePicker.render(document.getElementById('inlinePicker'));

Calendar

// typescript
import {Calendar} from "./src/Calendar";
import {DateRange} from "./src/DateRange";

// Create a Calendar object
const cal = new Calendar({
  firstDayOfWeek : Weekday.Sunday,
  date : new Date,
  constraint : {
    before : {
      year : 2017,
      month : 5
    },
    after : {
      year : 2010,
      month : 0
    }
  }
});
cal.nextYear();

cal.prevYear();

cal.nextMonth();

cal.prevMonth();

const sel = new DateRange({
  start: new Date(2017, 2, 3),
  end: new Date(2017, 2, 8)
});
cal.setSelection(sel);

let rows = cal.getWeekRows();

Road Map - will be included in the updates

2.0

  • React Components
  • Mobile support

Getting started

per developer

  • A well-explained tutorial
  • Future updates
  • Support for 3 months
  • An easy to use jQuery plugin
  • 4 themes
  • Typedoc genereated documentation
  • Complete TypeScript source code

Author

c9s

Yo-An Lin

Yo-An Lin has been working in the open source IT industry for more than 8 years.

He builds softwares from C libraries, Perl modules, VIM plugins, PHP packages, ORM, web frameworks, command-line tools, http servers to UX/UI design, visual design and front-end component development.

Q & A