Giter Club home page Giter Club logo

redbadger-datepicker's Introduction

This repository is a mirror of the component module redbadger/datepicker. It has been modified to work with NPM+Browserify. You can install it using the command npm install npmcomponent/redbadger-datepicker. Please do not open issues or send pull requests against this repo. If you have issues with this repo, report it to npmcomponent.

datepicker

A date picker UI component built on component/calendar. Forked from component/datepicker.

screen shot 2013-06-17 at 13 31 47

How to use

This is a component component. You can easily plug it into your site or web app. Check the example of usage in test/index.html. To get things working, follow these easy steps (assuming you already have Node.js and npm installed):

  • npm install -g component
  • Clone this repository and navigate into the component folder
  • Run component install to fetch dependencies
  • Run component build
  • Now you can open test/index.html and if everything is fine you should be able to see the component in action

If your app already uses components, you can simply run component install redbadger/datepicker - this will fetch and install all dependencies into /components folder of your project.

Features

  • Takes and returns a value of type Date
  • Hide on click outside
  • Manual date change support
  • Keyboard interaction
  • Fully configurable date format with custom divider symbols

Example

var Datepicker = require('datepicker');

var picker = Datepicker(document.getElementById('date'), "DD/MM/YYYY")

picker.value(new Date());
picker.value() // => currently selected date as a Date instance

Custom date format

You can specify the format of the date you expect it to produce. Format is a string, which can be something like this:

  • "DD/MM/YYYY"
  • "YYYY-MM-DD"
  • "mm.dd.yy"

Order of month, day and year will be recognized by the component, divider symbol will also be honored. You can ask for 2 digit year or 4 with "YY" or "YYYY" respectably.

API

.value(value)

Get or set current value. value argument is optional.

.show()

Show the date picker popover.

###ย .hide()

Hide the date picker popover.

License

MIT

redbadger-datepicker's People

Contributors

charypar avatar tj avatar asavin avatar anttikissa avatar dominicbarnes avatar mhubig avatar micky2be avatar oost avatar paulmillr avatar airportyh avatar

Watchers

James Cloos avatar npm <3 component 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.