Vue.js的Datetimepicker组件

vuejs-datetimepicker (vuejs-datetimepicker)

datetimepicker component for Vue.js.

Vue.js的datetimepicker组件。

View Demo 查看演示 Download Source 下载源

要求 (Requirements)

• Vue.js ^2.x

  Vue.js ^2.x

安装 (Installation)

npm (npm)

$ npm install vuejs-datetimepicker

用法 (Usage)

可接受格式列表 (List of accepted formats)

日期时间格式 (DateTime formats)

12h(上午/下午) (12h (AM/PM))

YYYY-MM-DD h:i:s, DD-MM-YYYY h:i:s, MM-DD-YYYY h:i:s, YYYY/MM/DD h:i:s, DD/MM/YYYY h:i:s and MM/DD/YYYY h:i:s

YYYY-MM-DD h:i:s ， DD-MM-YYYY h:i:s ， MM-DD-YYYY h:i:s ， YYYY/MM/DD h:i:s ， DD/MM/YYYY h:i:s和MM/DD/YYYY h:i:s

24小时 (24h)

YYYY-MM-DD H:i:s, DD-MM-YYYY H:i:s, MM-DD-YYYY H:i:s, YYYY/MM/DD H:i:s, DD/MM/YYYY H:i:s and MM/DD/YYYY H:i:s

YYYY-MM-DD H:i:s ， DD-MM-YYYY H:i:s ， MM-DD-YYYY H:i:s ， YYYY/MM/DD H:i:s ， DD/MM/YYYY H:i:s和MM/DD/YYYY H:i:s

仅日期格式 (Date only formats)

YYYY-MM-DD, DD-MM-YYYY, MM-DD-YYYY, YYYY/MM/DD, DD/MM/YYYY and MM/DD/YYYY

YYYY-MM-DD ， DD-MM-YYYY ， MM-DD-YYYY ， YYYY/MM/DD ， DD/MM/YYYY和MM/DD/YYYY

仅时间格式 (Time only format)

h:i:s (12h) and H:i:s (24h)

h:i:s (12h)和H:i:s (24h)

接受日期值 (Accepting value of date)

可以采用两种方式接受选择日期的值。 (The value of picked date can be accepted in 2 ways.)

The first is in the case where you want to submit the form to a backend script without interruption from any javascript event, set the name attribute of the component to the value you want to accept, just like it is set for normal HTML inputs, e.g using dob as the name in the following example

第一种是在您希望将表单提交到后端脚本而不中断任何javascript事件的情况下，将组件的name属性设置为要接受的值，就像为普通HTML输入设置的一样，例如在以下示例中，使用dob作为名称

The second case is if the value of the picker is needed in the current component or scope, the value would automatically and reactively be binded to value assigned to v-model e.g dob in the following example, you may then make a reference to the value as this.dob at any point within the current scope. Also initializing the value of dob in the current scope initializes the value of the datetimepicker given that it is a valid date.

第二种情况是，如果当前组件或范围中需要选择器的值，则该值将自动和React性地绑定到分配给v-model值，例如下面的示例中的dob ，然后可以引用该值作为this.dob在当前范围内的任何时候。 同样，在当前范围内初始化dob的值也会初始化datetimepicker的值(假设它是有效日期)。

一周的第一天 (The first day of the week)

By default, the datetime-picker renders Sunday as the first day of each week. If you want to use Monday instead, set the firstDayOfWeek property to 1:

默认情况下，datetime-picker会将星期日渲染为每周的第一天。 如果要改为使用星期一，请将firstDayOfWeek属性设置为1 ：

翻译自: https://vuejsexamples.com/datetimepicker-component-for-vue-js/