QingDatepicker

QingDatepicker is a simple ui component for selecting date on web page.

Usage

<script type="text/javascript" src="node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="node_modules/moment/moment.js"></script>
<script type="text/javascript" src="node_modules/qing-module/dist/qing-module.js"></script>
<script type="text/javascript" src="node_modules/qing-datepicker/dist/qing-datepicker.js"></script>
 
<input type="date" class="date-field">

var qingDatepicker = new QingDatepicker({
  el: '.date-field'
});
 
qingDatepicker.on('change', function(e) {
  // do something
});

Options

el

Selector/Element/jQuery Object, required, specify the html date element.

placeholder

String, specify placeholder for input text field.

format

String, 'YYYY-MM-DD' by default, specify date format for date field value, please check momentjs docs for available formats.

displayFormat

String, 'LL' by default, specify date format for display, please check momentjs docs for available formats.

inputFormats

Array, default formats are:

['YYYY-M-D', 'M/D/YY', 'YYYY年M月D日', 'YYYY.M.D', 'YYYY/M/D']

When user directly input date string in text field, QingDatepicker will try to parse the string with these inputFormats.

prevArrow

String, '<' by default, specify string for left arrow in popover. Html string is allowed.

nextArrow

String, '>' by default, specify string for right arrow in popover. Html string is allowed.

locales

Hash, specify locale config, default config is:

{
  selectYear: 'Select Year'
}

Methods

setDate (date)

Set value for datepicker, only momentjs object is accepted as param.

getDate ()

get current selected date as momentjs object.

destroy ()

Destroy component, restore element to original state.

Events

change (date)

Triggered when current selected date is changed.

Installation

Install via npm:

npm install --save qing-datepicker

Development

Clone repository from github:

git clone https://github.com/mycolorway/qing-datepicker.git

Install npm dependencies:

npm install

Run default gulp task to build project, which will compile source files, run test and watch file changes for you:

gulp

Now, you are ready to go.

Publish

When you want to publish new version to npm and bower, please make sure all tests have passed, and you need to do these preparations:

• Add release information in CHANGELOG.md. The format of markdown contents will matter, because build scripts will get version and release content from the markdown file by regular expression. You can follow the format of the older releases.

• Put your personal API tokens in /.token.json(listed in .gitignore), which is required by the build scripts to request Github API for creating new release:

{
  "github": "[your github personal access token]"
}

Now you can run gulp publish task, which will do these work for you:

• Get version number from CHANGELOG.md and bump it into package.json and bower.json.
• Get release information from CHANGELOG.md and request Github API to create new release.

If everything goes fine, you can see your release at https://github.com/mycolorway/qing-module/releases. At the End you can publish new version to npm with the command:

npm publish

Please be careful with the last step, because you cannot delete or republish a version on npm.