【问题标题】:How make bootstrap datetimepicker to select only time如何让引导 datetimepicker 只选择时间
【发布时间】:2020-03-25 11:28:04
【问题描述】:

使用带有 init 的 bootstrap datetimepicker:

  $('#departure-time').datetimepicker({
    todayHighlight: true,
    autoclose: true,
    format: 'yyyy-mm-dd hh:ii'
  }).on('change', function () {
  });

我没有找到如何只选择时间 设置格式:

format: 'hh:ii'

没有帮助。

哪种方式正确?

我有:

"bootstrap": "^4.4.1",
"bootstrap-datepicker": "^1.8.0",
"bootstrap-daterangepicker": "^3.0.3",
"bootstrap-datetime-picker": "^2.4.4",
"bootstrap-datetimepicker": "^0.0.7",

修改: 在我的项目“jquery”中:“^3.3.1”被使用,我不能移动到“jquery 2, 难道是因为

“Uncaught Error: Invalid date format.    at Object.parseFormat” error 

我初始化时在控制台中 日期时间选择器为:

$('#time_utc').datetimepicker({
  todayHighlight: true,
  autoclose: true,
  format: 'LT',
}).on('change', function () {
});

我可以修复错误吗?

修改 #2: 我尝试将 bootstrap-datetimepicker 提升到版本 4.17.47,这似乎是最新的 https://github.com/Eonasdan/bootstrap-datetimepicker

但我有问题,因为 在我的项目的 package.json 中,我有一行:

  "bootstrap-datetimepicker": "^0.0.7",

我修改为

  "bootstrap-datetimepicker": "^4.17.47",

但是运行 npm install 我得到了错误:

      npm ERR! code ETARGET
npm ERR! notarget No matching version found for bootstrap-datetimepicker@^4.17.47.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

我修改为

"bootstrap-datetimepicker": "4.17.47",

但是运行 npm install 我得到了类似的错误:

npm ERR! code ETARGET
npm ERR! notarget No matching version found for bootstrap-datetimepicker@4.17.47.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

我从 package.json 中清除了 bootstrap-datetimepicker

然后运行

npm install  bootstrap-datetimepicker

在安装时我再次在 package.json 中看到:

"bootstrap-datetimepicker": "0.0.7",

我从一开始就拥有什么。

另外,请看一下 package.json :

{
    "private": true,
    "scripts": {
        "cleanup": "rm -rf public/assets public/css public/fonts public/images public/js public/mix-manifest.json ",
        "predev": "npm run cleanup",
        "dev": "npm run fix && npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run fix && npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "lint": "npx standard 'resources/js/**/*.js'",
        "fix": "npx standard 'resources/js/**/*.js' --fix"
    },
    "dependencies": {
        "@ckeditor/ckeditor5-alignment": "^11.2.0",
        "@ckeditor/ckeditor5-build-balloon": "^12.4.0",
        "@ckeditor/ckeditor5-build-balloon-block": "^12.4.0",
        "@ckeditor/ckeditor5-build-classic": "^12.4.0",
        "@ckeditor/ckeditor5-build-decoupled-document": "^12.4.0",
        "@ckeditor/ckeditor5-build-inline": "^12.4.0",
        "@fortawesome/fontawesome-free": "^5.13.0",
        "@fullcalendar/core": "^4.4.0",
        "@fullcalendar/daygrid": "^4.4.0",
        "@fullcalendar/google-calendar": "^4.4.0",
        "@fullcalendar/interaction": "^4.4.0",
        "@fullcalendar/list": "^4.4.0",
        "@fullcalendar/timegrid": "^4.4.0",
        "@uppy/core": "^1.8.2",
        "@uppy/progress-bar": "^1.3.7",
        "@uppy/tus": "^1.5.5",
        "@yaireo/tagify": "^2.23.1",
        "animate.css": "^3.5.2",
        "autosize": "^4.0.0",
        "block-ui": "^2.70.1",
        "bootstrap": "^4.4.1",
        "bootstrap-datepicker": "^1.8.0",
        "bootstrap-daterangepicker": "^3.0.3",
        "bootstrap-datetime-picker": "^2.4.4",
        "bootstrap-datetimepicker": "0.0.7",
        "bootstrap-markdown": "^2.10.0",
        "bootstrap-maxlength": "^1.6.0",
        "bootstrap-notify": "^3.1.3",
        "bootstrap-select": "1.13.10",
        "bootstrap-switch": "3.3.4",
        "bootstrap-timepicker": "^0.5.2",
        "bootstrap-touchspin": "^4.2.5",
        "chart.js": "^2.7.3",
        "clipboard": "^2.0.6",
        "corejs-typeahead": "^1.3.0",
        "counterup": "^1.0.2",
        "datatables.net-autofill-bs4": "^2.3.4",
        "datatables.net-bs4": "^1.10.20",
        "datatables.net-buttons-bs4": "^1.6.0",
        "datatables.net-colreorder-bs4": "^1.5.2",
        "datatables.net-fixedcolumns-bs4": "^3.3.0",
        "datatables.net-fixedheader-bs4": "^3.1.6",
        "datatables.net-keytable-bs4": "^2.5.1",
        "datatables.net-responsive-bs4": "^2.2.3",
        "datatables.net-rowgroup-bs4": "^1.1.1",
        "datatables.net-rowreorder-bs4": "^1.2.6",
        "datatables.net-scroller-bs4": "^2.0.1",
        "datatables.net-select-bs4": "^1.3.1",
        "dompurify": "^1.0.9",
        "dropzone": "^5.7.0",
        "dual-listbox": "1.1.0",
        "es6-promise": "^4.2.8",
        "es6-promise-polyfill": "^1.2.0",
        "flot": "^3.2.2",
        "gmaps": "^0.4.25",
        "handlebars": "^4.7.3",
        "inputmask": "^4.0.6",
        "ion-rangeslider": "^2.2.0",
        "jkanban": "^1.2.1",
        "jquery": "^3.3.1",
        "jquery-form": "^4.2.2",
        "jquery-ui": "^1.12.1",
        "jquery-validation": "1.19.0",
        "jquery.repeater": "^1.2.1",
        "jqvmap": "^1.5.1",
        "js-cookie": "^2.2.0",
        "jstree": "^3.3.9",
        "jszip": "^3.2.2",
        "leaflet": "^1.6.0",
        "markdown": "^0.5.0",
        "morris.js": "^0.5.0",
        "nouislider": "^13.1.0",
        "owl.carousel": "^2.3.4",
        "pace": "0.0.4",
        "pace-js": "^1.0.2",
        "pdfmake": "^0.1.65",
        "perfect-scrollbar": "^1.5.0",
        "popper.js": "^1.16.1",
        "prismjs": "^1.8.4",
        "quill": "^1.3.6",
        "raphael": "^2.2.7",
        "select2": "^4.0.13",
        "socicon": "^3.0.5",
        "sticky-js": "^1.2.0",
        "stream-exhaust": "^1.0.2",
        "summernote": "^0.8.16",
        "sweetalert2": "^8.0.6",
        "tagify": "^0.1.1",
        "tether": "^1.4.3",
        "tinymce": "^5.2.0",
        "toastr": "^2.1.4",
        "tooltip.js": "^1.2.0",
        "underscore": "^1.8.3",
        "uppy": "^1.10.1",
        "waypoints": "^4.0.1",
        "whatwg-fetch": "^3.0.0",
        "wnumb": "^1.1.0"
    },
    "devDependencies": {
        "@turf/turf": "^5.1.6",
        "axios": "^0.19.2",
        "cross-env": "^5.1",
        "laravel-mix": "^5.0.4",
        "lodash": "^4.17.15",
        "moment": "^2.24.0",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.26.3",
        "sass-loader": "^8.0.0",
        "standard": "^14.3.3",
        "vue-template-compiler": "^2.6.11"
    },
    "standard": {
        "globals": [
            "$",
            "jQuery",
            "_",
            "moment",
            "turf",
            "swal",
            "toastr",
            "axios",
            "L",
            "FormData",
            "KTUtil",
            "KTApp"
        ]
    }
}

它有很多包。这个项目不是我的,我刚加入团队。 错误的原因可能是此文件中的错误吗?

谢谢!

【问题讨论】:

    标签: javascript bootstrap-4 bootstrap-datetimepicker


    【解决方案1】:

    使用format: 'LT',查看documentation

    $('#departure-time').datetimepicker({
      // todayHighlight: true,
      // autoclose: true,
      format: 'LT'
    }).on('change', function () {
    });
    

    更新

    工作示例(jQuery 2.x,Bootstrap 3):

    $(function() {
      $('#departure-time').datetimepicker({
        // todayHighlight: true,
        // autoclose: true,
        format: 'LT'
      }).on('change', function() {});
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
    
    <div class="container">
      <div class="row">
        <div class='col-sm-6'>
          <div class="form-group">
            <div class='input-group date' id='departure-time'>
              <input type='text' class="form-control" />
              <span class="input-group-addon">
                <span class="glyphicon glyphicon-time"></span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    因为bug,我使用了 jQuery 2.x 版。

    更新 2

    这是另一个使用

    的工作示例

    jQuery 3.3.1

    引导 4.4.1

    引导日期时间选择器 4.17.47

    在 Bootstrap 4 中删除了 Glyphicons,所以我从 Bootstrap 3 中包含了它们。

    您使用的 bootstrap-datetimepicker 非常旧,您应该将其更新到较新的版本。

    对特定版本使用npm updatenpm update bootstrap-datetimepickerbootstrap-datetimepicker@4.17.47,或者您可以在package.json 文件中进行更改。

    如果版本没有更改,您可以尝试删除文件package-lock.json(保存一份副本)并修改您的package.json中的版本并运行npm install

    $(function() {
      $('#departure-time').datetimepicker({
        format: 'LT'
      }).on('change', function() {});
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
    
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">
    
    <div class="container">
      <div class="row">
        <div class='col-sm-6'>
          <div class="form-group">
            <div class='input-group date' id='departure-time'>
              <input type='text' class="form-control" />
              <span class="input-group-addon">
                <span class="glyphicon glyphicon-time"></span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    【讨论】:

    • 我在控制台中出现错误:app.js:9976 未捕获的错误:无效的日期格式。在 Object.parseFormat (app.js:9976) at new Datetimepicker (app.js:8491) 没有默认值?我错过了一些选择吗
    • 如果删除 todayHighlight 和 autoclose 道具我有同样的错误
    • 如果删除 todayHighlight 和 autoclose 道具,我在控制台中会遇到同样的错误
    • 尝试将引导 js 文件放在 jquery 之后和所有 js 文件之前。
    • 您可以尝试删除文件package-lock.json(保存一份副本)并修改package.json中的版本并运行npm install
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-11-19
    • 2015-01-30
    • 2010-09-10
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多