Giter VIP home page Giter VIP logo

timeframe's Introduction

Timeframe

Click-draggable. Range-makeable. A better calendar.

The code:

new Timeframe(element, options);

Options available:

  • months: The number of calendar months showing at once (default: 2).

  • format: The strftime format for the dates in the input fields (default: %b %d, %Y). (With Datejs, it takes Datejs formatting.)

  • weekOffset: Override the localization's default weekday start with this option (e.g., 1 will force the rows to start on Monday; use 0 for Sunday).

  • startField, endField: Declare the range start and end input tags (by default, these are generated with the Timeframe). When the value attribute is pre-populated, the Timeframe will load with this range.

  • previousButton, todayButton, nextButton, resetButton: Declare the navigational buttons (these are also generated by default with the Timeframe).

  • earliest, latest: The earliest and latest selectable dates (accepts either a Date object or a String that can be parsed with Date.parse()).

  • minRange, maxRange: Limit the minimum and maximum possible range length (set maxRange to 1 to turn Timeframe into a regular old date picker).

Localization:

Drop in a localized version of Datejs, and it should just work. An added bonus is that the text fields will live-parse more nicely! Just try "next tues."

An example:

var timeframe = new Timeframe();
timeframe.initialize(window.calendars, {
  earliest: new Date(),
  resetButton: $('#reset'),
  startField: $('#start'),
  endField: $('#end')
});

See it in action here.

Change Events

Date change events are available by subscribing to the timeframe.didRefreshField on input element.

$("#start").on('timeframe.didRefreshField', function(event, fieldName, date, formatedDate) {
  // handle date change event
});

Dependencies:

Timeframe requires jQuery. It was built using 1.8, but older versions should work too.

Contributors:

  • Stephen Celis ("stephencelis") - original developer of Timeframe (using Prototype)
  • Justin Palmer ("Caged")
  • Nik Wakelin ("codetocustomer")
  • Sebastien Grosjean ("ZenCocoon")
  • Will Bryant ("willbryant")

Download:

Find the latest version of Timeframe on Github.

More information can be found here.

Copyright (c) 2008-2011 Kyle Konrad, released under the MIT license.

timeframe's People

Contributors

stephencelis avatar zencocoon avatar willbryant avatar nerdyworm avatar eimermusic avatar nikz avatar

Watchers

James Cloos avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.