• Stars
    star
    343
  • Rank 123,371 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 9 years ago
  • Updated almost 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A Vue.js component implementing the datetime picker control using the Eonasdan's bootstrap datetime picker plugin.

vue-datetime-picker

Build Status Coverage Status bitHound Score Dependency Status devDependency Status

A Vue.js component implementing the datetime picker control using the Eonasdan's bootstrap datetime picker plugin.

Demo

The demo page is HERE.

Screenshot

Requirements

Installation

npm

$ npm install --save vue-datetime-picker

bower

$ bower install vue-datetime-picker

Usage

The HTML snippets are as follows:

<div class="form-horizontal">
  <div class="form-group">
    <label for="picker1" class="col-sm-3 control-label">
      A default datetime picker:
    </label>
    <div class="col-sm-5">
      <vue-datetime-picker class="vue-picker1" name="picker1"
                           :model.sync="result1">
      </vue-datetime-picker>
    </div>
    <div class="col-sm-4">
      <p class="form-control-static">
        Selected Datetime: <span class="vue-result1">{{formatDatetime(result1)}}</span>
      </p>
    </div>
  </div>
  <div class="form-group">
    <label for="picker2" class="col-sm-3 control-label">
      A datetime picker with customized datetime format:
    </label>
    <div class="col-sm-5">
      <vue-datetime-picker class="vue-picker2" name="picker2"
                           :model.sync="result2"
                           type="datetime"
                           language="en"
                           datetime-format="LLL">
      </vue-datetime-picker>
    </div>
    <div class="col-sm-4">
      <p class="form-control-static">
        Selected Datetime: <span class="vue-result2">{{formatDatetime(result2)}}</span>
      </p>
    </div>
  </div>
  <div class="form-group">
    <label for="picker3" class="col-sm-3 control-label">
      A date picker with customized date format:
    </label>
    <div class="col-sm-5">
      <vue-datetime-picker class="vue-picker3" name="picker3"
                           :model.sync="result3"
                           type="date"
                           language="en-US"
                           date-format="L">
      </vue-datetime-picker>
    </div>
    <div class="col-sm-4">
      <p class="form-control-static">
        Selected Date: <span class="vue-result3">{{formatDate(result3)}}</span>
      </p>
    </div>
  </div>
  <div class="form-group">
    <label for="picker4" class="col-sm-3 control-label">
      A time picker with customized time format:
    </label>
    <div class="col-sm-5">
      <vue-datetime-picker class="vue-picker4" name="picker4"
                           :model.sync="result4"
                           type="time"
                           language="zh-CN"
                           time-format="LT">
      </vue-datetime-picker>
    </div>
    <div class="col-sm-4">
      <p class="form-control-static">
        Selected Time: <span class="vue-result4">{{formatTime(result4)}}</span>
      </p>
    </div>
  </div>
  <div class="form-group">
    <p class="form-control-static col-sm-12">
      Demonstration of the range of datetime. Note how the minimum/maximum
      selectable datetime of the start/end datetime picker was changed
      according to the selection of another picker.
    </p>
  </div>
  <div class="form-group">
    <label for="start-picker" class="col-sm-3 control-label">
      Start Datetime:
    </label>
    <div class="col-sm-3">
      <vue-datetime-picker class="vue-start-picker" name="start-picker"
                           v-ref:start-picker
                           :model.sync="startDatetime"
                           :on-change="onStartDatetimeChanged">
      </vue-datetime-picker>
    </div>
    <label for="end-picker" class="col-sm-3 control-label">
      End Datetime:
    </label>
    <div class="col-sm-3">
      <vue-datetime-picker class="vue-end-picker" name="end-picker"
                           v-ref:end-picker
                           :model.sync="endDatetime"
                           :on-change="onEndDatetimeChanged">
      </vue-datetime-picker>
    </div>
  </div>
</div>

The Javascript snippets are as follows:

var Vue = require("vue");

var vm = new Vue({
  el: "#app",
  components: {
    "vue-datetime-picker": require("vue-datetime-picker")
  },
  data: {
    result1: null,
    result2: null,
    result3: null,
    startDatetime: moment(),
    endDatetime: null
  },
  methods: {
    formatDatetime: function(datetime) {
      if (datetime === null) {
        return "[null]";
      } else {
        return datetime.format("YYYY-MM-DD HH:mm:ss");
      }
    },
    formatDate: function(date) {
      if (date === null) {
        return "[null]";
      } else {
        return date.format("YYYY-MM-DD");
      }
    },
    formatTime: function(time) {
      if (time === null) {
        return "[null]";
      } else {
        return time.format("HH:mm:ss");
      }
    },
    onStartDatetimeChanged: function(newStart) {
      var endPicker = this.$.endPicker.control;
      endPicker.minDate(newStart);
    },
    onEndDatetimeChanged: function(newEnd) {
      var startPicker = this.$.startPicker.control;
      startPicker.maxDate(newEnd);
    }
  }
});

Component Properties

model

The model bind to the control, which must be a two way binding variable.

Note that the value of the model must be either a null value, or a moment object. If the model is set to null, the input box of the datetime picker control will set to empty, indicating no datetime was selected; also, if the input box of the datetime picker control is set to empty (that is, the user delete the text in the input box of the datetime picker control), the value of the model will be set to null instead of an empty string; if the user does select a datetime, the value of the model will be set to the moment object representing the date, without any timezone information.

type

The optional type of the datetime picker control. Available values are

  • "datetime": Indicating that the control is a datetime picker,
  • "date": Indicating that the control is a date picker (without time picker),
  • "time": Indicating that the control is a time picker (without date picker).

The default value of this property is "datetime".

language

The optional code of language used by the moment library.

If it is not set, and the vue-i18n plugin is used, the component will use the language code $language provided by the vue-i18n plugin; otherwise, the component will use the default value "en-US".

The supported languages are exactly the same as the supported languages of the moment library. In order to use the supported language, you must also include the corresponding i18n js file of the moment library in your HTML file. A convenient way is to include the moment-with-locales.min.js.

Note that the language code passed to this property could be a locale code consists of a language code and a country code, e.g., "en-US". The component will automatically convert the locale code to the language code supported by the moment library. Since some languages have different variants in different country or region, e.g., "zh-CN" for the simplified Chinese and "zh-TW" for the traditional Chinese, it's recommended to use the locale code in the form of "[language]-[country]".

datetimeFormat

The optional format of the datetime this component should display, which must be a valid datetime format of the moment library.

This property only works when the type property is set to "datetime". Default value of this property is "YYYY-MM-DD HH:mm:ss".

dateFormat

The optional format of the date this component should display, which must be a valid date format of the moment library.

This property only works when the type property is set to "date". Default value of this property is "YYYY-MM-DD".

timeFormat

The optional format of the time this component should display, which must be a valid time format of the moment library.

This property only works when the type property is set to "time". Default value of this property is "HH:mm:ss".

name

The optional name of the selection control.

onChange

The optional event handler triggered when the value of the datetime picker was changed. If this parameter is presented and is not null, it must be a function which accept one argument: the new date time selected by the picker, which is a moment object.

API

control

This property is a reference to the JQuery selection of datetime control. It could be used to call the APIs of the Eonasdan's bootstrap datetime picker. For example, picker.control.minDate(val) will set the minimum allowed datetime of the picker to the specified value, where picker is the reference to the vue-datetime-picker component.

Localization

This component could use the vue-i18n plugin to localize the tooltips of the datetime picker control.

In order to localize this component, the localization files provided to the vue-i18n plugin must provide the following localization messages:

{
  "datetime_picker": {
    "today": "Go to today",
    "clear": "Clear selection",
    "close": "Close the picker",
    "selectMonth": "Select Month",
    "prevMonth": "Previous Month",
    "nextMonth": "Next Month",
    "selectYear": "Select Year",
    "prevYear": "Previous Year",
    "nextYear": "Next Year",
    "selectDecade": "Select Decade",
    "prevDecade": "Previous Decade",
    "nextDecade": "Next Decade",
    "prevCentury": "Previous Century",
    "nextCentury": "Next Century",
    "pickHour": "Pick Hour",
    "incrementHour": "Increment Hour",
    "decrementHour": "Decrement Hour",
    "pickMinute": "Pick Minute",
    "incrementMinute": "Increment Minute",
    "decrementMinute": "Decrement Minute",
    "pickSecond": "Pick Second",
    "incrementSecond": "Increment Second",
    "decrementSecond": "Decrement Second",
    "togglePeriod": "Toggle Period",
    "selectTime": "Select Time"
  }
}

If no vue-i18n is used, or the localization file of the plugin does not provide the above localization messages, the default English messages will be used.

Some localization files could be found in the src/i18n directory.

Contributing

  • Fork it !
  • Create your top branch from dev: git branch my-new-topic origin/dev
  • Commit your changes: git commit -am 'Add some topic'
  • Push to the branch: git push origin my-new-topic
  • Submit a pull request to dev branch of Haixing-Hu/vue-datetime-picker repository !

Building and Testing

First you should install all depended NPM packages. The NPM packages are used for building and testing this package.

$ npm install

Then install all depended bower packages. The bower packages are depended by this packages.

$ bower install

Now you can build the project.

$ gulp build

The following command will test the project.

$ gulp test

The following command will perform the test and generate a coverage report.

$ gulp test:coverage

The following command will perform the test, generate a coverage report, and upload the coverage report to coveralls.io.

$ gulp test:coveralls

You can also run bower install and gulp build together with the following command:

npm run build

Or run bower install and gulp test:coveralls together with the following command:

npm run test

License

The MIT License

More Repositories

1

typesetting-standard

中文排版所需遵循的标准和规范
626
star
2

nju-thesis

南京大学学位论文XeLaTeX模板
TeX
406
star
3

vue-html-editor

A Vue.js component implementing the HTML editor with the jQuery summernote plugin.
JavaScript
389
star
4

GBT7714-2005-BibTeX-Style

A GB/T 7714-2005 national standard compliant BibTeX style.
TeX
326
star
5

latex-chinese-fonts

Simplified Chinese fonts for the LaTeX typesetting.
180
star
6

vue-select

A Vue.js component implementing the select control with the jQuery select2 plugin.
JavaScript
134
star
7

vue-i18n

Internationalization plugin of Vue.js
JavaScript
62
star
8

vue-country-select

A Vue.js component implementing the select control used to select countries.
JavaScript
49
star
9

gift-to-lover

A personal gift to my lover.
JavaScript
33
star
10

xelatex-zh-book

An XeLaTeX document style for typesetting Simplified Chinese books.
TeX
24
star
11

vue-format

A Vue.js plugin for formatting messages.
JavaScript
19
star
12

bootstrap3-ie10-viewport-bug-workaround

The official workaround of the viewport bug of IE 10.0 for the bootstrap 3.
JavaScript
16
star
13

javafx-widgets

The useful widgets for JavaFX
Java
14
star
14

swt-widgets

Collect some useful SWT widgets for my applications.
Java
12
star
15

vue-titlecase

A Vue.js filter used to make a string titlecased.
JavaScript
12
star
16

nju-report

南京大学科技报告XeLaTeX模板
Shell
8
star
17

HanZi-Learning-ANKI-Cards

供儿童学习认识汉字的ANKI卡片模板及其生成器
Python
6
star
18

datatables-i18n

The i18n files of the datatables, renamed with the standard language identifiers, and registered in the bower.
5
star
19

animated-header.js

A fixed header that will animate its size on scroll.
HTML
3
star
20

vue3-class-component

The new vue-class-component for Vue3.
JavaScript
3
star
21

dqwl

Simulation of Discrete Quantum Walk on a Line using the Matlab.
MATLAB
3
star
22

beamer-chinese-translation

Translation of the LaTeX beamer package into Simplified/Traditional Chinese
Shell
3
star
23

qwViz

Visualisation of quantum walks on graphs
C
2
star
24

quantum-walk

The matlab simulator of quantum walks
MATLAB
2
star
25

commons

The common utilities used in Java programming.
Java
2
star
26

Haixing-Hu.github.io

The homepage of Haixing Hu.
Ruby
2
star
27

criteria

A collection of classes used to representing filtering/searching criteria.
Java
2
star
28

iLibrary

A multi-platform personal digit library software.
Java
1
star