【4858美高梅】时刻接纳器,datetimepicker日期插件超详细使用情势介绍

By admin in 4858美高梅 on 2019年6月8日

一、下载bootstrap-datetimepicker时间接选举拔器js,css文件。

1、下载bootstrap-datetimepicker时间接选举拔器js,css文件。

正文实例为大家享用了bootstrap
datetimepicker日期插件的简短利用,供我们参照他事他说加以侦察,具体内容如下

近日项目中运用了bootstrap-datetimepicker日期接纳器这几个插件,格式需求规范到秒呈现。虽说很轻松,但照旧特别把遇到的题目和消除格局记录一下:

1.
github地址:bootstrap-datetimepicker

1. github地址:bootstrap-datetimepicker

第3在文件底部引进须要的公文:

  • 1bootstrap-datetimepicker下载地址:https://github.com/Eonasdan/bootstrap-datetimepicker
  • 2moment-with-locales.js下载地址:http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js

二.
官方网站地址:官网bootstrap-datetimepicker地址,有实际的事例与解释

2. 官网地址:官网bootstrap-datetimepicker地址【4858美高梅】时刻接纳器,datetimepicker日期插件超详细使用情势介绍。,有切实可行的例子与解释

<link rel="stylesheet" href="Css/bootstrap-datetimepicker.min.css" rel="external nofollow" >
<script src="Js/bootstrap-datetimepicker.js"></script>

2、在vue项目文件中引进

2、在vue项目文件中引进

import './assets/css/bootstrap.min.css'
import "./assets/css/bootstrap-datetimepicker.min.css"
import './assets/js/bootstrap.min'
import './assets/js/bootstrap-datetimepicker.min.js'

想用汉语突显,加入bootstrap-datetimepicker.zh-CN.js文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>bootstrap-datetimepicker的使用方法</title>
  <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="libs/bootstrap-datetimepicker.min.css">
  <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="libs/moment-with-locales.js" charset="utf-8"></script>
  <script src="libs/bootstrap-datetimepicker.js" charset="utf-8"></script>
  <script src="http://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>
  <style media="screen">
    body {
      background: #f4f4f4;
      font-family: -apple-system, "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    }
    h4 {
      margin: 20px;
      text-align: center;
    }
    .title {
      padding: 20px;
      font-size: 20px;
      text-align: center;
    }
    .main {
      width: 800px;
      height: 600px;
      margin: 100px auto;
      background: #fff;
      clear: both;
    }
    .actions {
      text-align: center;
      padding: 0 40px;
    }
    .actions span {
      display: inline-block;
      width: 120px;
      padding: 8px 15px;
      background: #23d160;
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
      text-align: center;
    }
    .tips_wrap {
      position: fixed;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      padding: 10px 15px;
      border-radius: 4px;
      background: #ff3860;
      color: #fff;
      z-index: 9999
    }
  </style>
</head>
<body>
  <div class="main" id="app">
    <div class="title">
      bootstrap-datetimepicker的中文显示到时分秒
    </div>
    <div class="form-group col-lg-12">
      <label class="control-label col-lg-2">开始时间:</label>
      <div class="col-lg-4">
        <div class='input-group date' id='purchase__start_date'>
          <input type='text' class="form-control purchase__start_date_ipt" />



        </div>
      </div>
    </div>
    <div class="form-group col-lg-12">
      <label class="control-label col-lg-2">结束时间:</label>
      <div class="col-lg-4">
        <div class='input-group date' id='purchase__end_date'>
          <input type='text' class="form-control purchase__end_date_ipt"/>



        </div>
      </div>
    </div>
    <div class="actions">
      提交
    </div>
    <div class="tips_wrap" v-show="showTips">{{tipText}}</div>
  </div>

  <script type="text/javascript">
    $(function() {
      $('#purchase__start_date').datetimepicker({
        format: 'YYYY-MM-DD HH:mm:ss',
        locale: 'zh-cn'
      })
      $('#purchase__end_date').datetimepicker({
        format: 'YYYY-MM-DD HH:mm:ss',
        locale: 'zh-cn'
      })
    })
    var vm = new Vue({
      el: '#app',
      data: {
        tipText: '',
        showTips: false,
        timer: null
      },
      mounted: function () {
      },
      methods: {
        triggerSub: function () {
          var start = $('#purchase__start_date_ipt').val();
          var end = $('#purchase__end_date_ipt').val();
          if (!start) {
            this.tips('开始日期不能为空')
            return false
          }
          if (!end) {
            this.tips('结束日期不能为空')
            return false
          }
          if (start > end) {
            this.tips('开始日期不能大于结束日期')
            return false
          }
          this.tips('提交成功')
        },
        tips: function (content) {
          var self = this
          if (self.timer) {
            clearTimeout(self.timer)
          }
          self.tipText = content
          self.showTips = true
          self.timer = setTimeout(function () {
            self.showTips = false
            self.tipText = ''
          }, 2000)
        }
      }
    })
  </script>
</body>
</html>
import './assets/css/bootstrap.min.css'
import "./assets/css/bootstrap-datetimepicker.min.css"
import './assets/js/bootstrap.min'
import './assets/js/bootstrap-datetimepicker.min.js'

3、具体代码如下:

<template>
<div class="container">
    <form action="" class="form-horizontal"  role="form">
        <fieldset>
            <legend>Test</legend>
            <div class="form-group">
                <label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
                <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
                    <input class="form-control" size="16" type="text" value="" readonly>


                </div>
                <input type="hidden" id="dtp_input1" value="" /><br/>
            </div>
        </fieldset>
    </form>
</div>
</template>

<script>

  export default {
    name: 'time',
    data () {
      return {
        time: ''
      }
    },
    methods: {
        dateDefault(){
            var d, s;
            var self = this;        
            d = new Date();
            s = d.getFullYear() + "-";             //取年份
            s = s + (d.getMonth() + 1) + "-";      //取月份,date生成的月份为0-11
            s += d.getDate() + " ";                //取日期
            s += d.getHours() + ":";               //取小时
            s += d.getMinutes() + ":";             //取分
            s += d.getSeconds();                   //取秒
            self.time = s;
            $('.form_datetime').datetimepicker({
                language: 'zh-CN',
               format: 'yyyy-mm-dd hh:ii:ss',
               //startDate: s,       默认开始时间
                weekStart: 0,        //一周从那一天开始,默认值为:0,范围:0-6
                todayBtn:  1,        //默认值:false,为true时,底部显示today,不选中,为linked时当天日期被选中
                autoclose: 1,        //选择一个日期后是否立即关闭此选择框
                todayHighlight: 1,   //高亮当前日期
                startView: 2,         // 日期时间选择器打开之后首先显示的视图,默认值为:2,0:hour,1:day,2:mouth,3:year,4:decade
                forceParse: 0,        //强制解析文本框的值
                showMeridian: 1
             });
            $('#form_datetime').datetimepicker()
                 .on('hide', function (ev) {
                  var value = $("#form_datetime").val();
                 self.time = value;
               });

        }
    },
    mounted() {
        //必须在组件渲染之后调用
        this.dateDefault();
    }
  }
</script>
<script src="Js/bootstrap-datetimepicker.zh-CN.js"></script>

多少个注意点:
一 代码中的vue.js的用法纯粹是为着学习,能够绝不考虑
二 也是有的同学会在jquery
插件库中探究到bootstrap-datetimepicker这一个插件,在此提醒,那个本子依赖的是jquery二.0
多的本子,如果jQuery版本大于三,会突显如下错误:

3、具体代码如下:

接下来调用起先化日期插件方法:

error:   size() is not a function
<template>
<div class="container">
  <form action="" class="form-horizontal" role="form">
    <fieldset>
      <legend>Test</legend>
      <div class="form-group">
        <label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
        <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
          <input class="form-control" size="16" type="text" value="" readonly>


        </div>
        <input type="hidden" id="dtp_input1" value="" /><br/>
      </div>
    </fieldset>
  </form>
</div>
</template>

<script>

 export default {
  name: 'time',
  data () {
   return {
    time: ''
   }
  },
  methods: {
    dateDefault(){
      var d, s;
      var self = this;    
      d = new Date();
      s = d.getFullYear() + "-";       //取年份
      s = s + (d.getMonth() + 1) + "-";   //取月份,date生成的月份为0-11
      s += d.getDate() + " ";        //取日期
      s += d.getHours() + ":";        //取小时
      s += d.getMinutes() + ":";       //取分
      s += d.getSeconds();          //取秒
      self.time = s;
      $('.form_datetime').datetimepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd hh:ii:ss',
        //startDate: s,    默认开始时间
        weekStart: 0,    //一周从那一天开始,默认值为:0,范围:0-6
        todayBtn: 1,    //默认值:false,为true时,底部显示today,不选中,为linked时当天日期被选中
        autoclose: 1,    //选择一个日期后是否立即关闭此选择框
        todayHighlight: 1,  //高亮当前日期
        startView: 2,     // 日期时间选择器打开之后首先显示的视图,默认值为:2,0:hour,1:day,2:mouth,3:year,4:decade
        forceParse: 0,    //强制解析文本框的值
        showMeridian: 1
       });
      $('#form_datetime').datetimepicker()
         .on('hide', function (ev) {
         var value = $("#form_datetime").val();
         self.time = value;
        });

    }
  },
  mounted() {
    //必须在组件渲染之后调用
    this.dateDefault();
  }
 }
</script>
$('.date').datetimepicker({
 language: 'zh-CN',//显示中文
 format: 'yyyy-mm-dd',//显示格式
 minView: "month",//设置只显示到月份
 initialDate: new Date(),//初始化当前日期
 autoclose: true,//选中自动关闭
 todayBtn: true//显示今日按钮
 })

具体能够查看这里https://github.com/Eonasdan/bootstrap-datetimepicker/pull/17264858美高梅,,最好去github上下载最新的版本。

上述正是本文的全体内容,希望对大家的求学抱有扶助,也期待我们多多扶助脚本之家。

引进控件

若是以为本文不错的话,迎接点赞。如有有失水准态, 我们共同交流和上学。
连带文书档案:http://eonasdan.github.io/bootstrap-datetimepicker/

你可能感兴趣的小说:

  • vue二.0.js的类别联合浮动接纳器达成格局
  • vue学习之mintui
    picker选用器完结省市二级联合浮动示例
  • 根据vue二.0完结的级联选择器
  • 详解VUE-地区选用器(V-Distpicker)组件使用体验

应用bootstrap的日子控件供给单独引进bootstrap-datetimepicker.min.css和bootstrap-datetimepicker.min.js

详细的情况及文件能够通过上边地址下载:

动用情状

独立引进3个日子控件可以参照上边提供的三番五次地址上的案例。此处介绍的是怎么使用三个日子控件,1个为开始日期,其余2个为告竣日期,多个日子之间确立互动自律关系。即起来日期无法压倒停止日期,结束日期不可能小于开头日期。

接纳办法

五个时刻输入域如图:

4858美高梅 1

html代码

<input size="16" type="text" id="datetimeStart" readonly class="form_datetime">
--
<input size="16" type="text" id="datetimeEnd" readonly class="form_datetime">

 js代码如下

<script type="text/javascript">
  $("#datetimeStart").datetimepicker({
    format: 'yyyy-mm-dd',
    minView:'month',
    language: 'zh-CN',
    autoclose:true,
    startDate:new Date()
  }).on("click",function(){
    $("#datetimeStart").datetimepicker("setEndDate",$("#datetimeEnd").val())
  });
  $("#datetimeEnd").datetimepicker({
    format: 'yyyy-mm-dd',
    minView:'month',
    language: 'zh-CN',
    autoclose:true,
    startDate:new Date()
  }).on("click",function(){
    $("#datetimeEnd").datetimepicker("setStartDate",$("#datetimeStart".val()))
  });
</script>

 关于bootstrap插件datepicker,只选用时间;

<input type="text"class="form-control form_datetime_2"readonly id="month_time"value=""/>
$(".form_datetime_2").
datetimepicker({
language: 'zh-CN',
format: 'yyyy-mm',
autoclose: true,
todayBtn: true,
startView: 'year',
minView:'year',
maxView:'decade'
});

以上正是本文的全体内容,希望对我们的读书抱有协助,也期望我们多多扶助脚本之家。

您恐怕感兴趣的稿子:

  • Bootstrap时间接选举用器datetimepicker和daterangepicker使用实例解析
  • angularjs封装bootstrap时间插件datetimepicker
  • Bootstrap3datetimepicker控件使用实例
  • bootstrap
    datetimepicker日期插件使用方式
  • bootstrap-datetimepicker完结只突显到日期的主意
  • Bootstrap
    设置datetimepicker在显示屏下边弹出设置格局
  • bootstrap
    datetimepicker完毕分钟选拔下拉框
  • vue二.0 与 bootstrap
    datetimepicker的整合使用实例
  • 基于bootstrap-datetimepicker.js不扶助IE捌的火速消除格局
  • bootstrap
    datetimepicker控件地方10分的缓慢解决措施

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有