Bootstrap Datetimepicker Moment.js

Asked

Viewed 824 times

1

I am trying to implement Bootstrap Datetimepicker in my project that is with version 4.3.1 of Bootstrap.

The problem is I don’t know how to do it. I downloaded from this site:

https://www.jqueryscript.net/time-clock/Date-Time-Picker-Bootstrap-4.html

and he brought me this file structure:

inserir a descrição da imagem aqui

I tried to include them in my project so:

<script type="text/javascript" src="~/lib/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="~/lib/bootstrap/Date-Time-Picker-Bootstrap-4/build/js/bootstrap-datetimepicker.min.js">

and put the input like this:

<input type="text" class="form-control" id="data1">

while in jQuery I put like this:

$("#data1").datetimepicker();

And nothing happened. Just an error on the console, saying it did not recognize the command .datetimepicker(). Somebody give me a hand please?

Error:

Uncaught Typeerror: $(...). datetimepicker is not a Function at Htmldocument.

It also shows me an error about the moment.js, how I can manually download it to implement it?

EDIT:

I managed to fix the error by putting Moment this way: 

<script type="text/javascript" src="https://momentjs.com/downloads/moment.js"></script>

However, I cannot use it through this link. As I lower it manually to add the path to my project?

EDIT1: How I change the language to Portuguese?

inserir a descrição da imagem aqui

Reap the days and months then in English. How I change them to Portuguese?

inserir a descrição da imagem aqui

Translation by browser ^

javascript html jquery twitter-bootstrap datepicker

  • About the date I saw this hj https://github.com/you-dont-need/You-Dont-Need-Momentjs sometimes it interests you

1 answer

1


Your problem is that you missed indexing Moment.js before JS datapicker

You can put it down here: https://www.jqueryscript.net/demo/Date-Time-Picker-Bootstrap-4/build/js/bootstrap-datetimepicker.min.js (just give a Ctrl+C in the script and put it in a . js file on your desktop and index it to your document)

See an example running in Bootstrap 4 below, note the order and the files that were indexed in the document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://www.jqueryscript.net/css/jquerysctipttop.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://www.jqueryscript.net/demo/Date-Time-Picker-Bootstrap-4/build/css/bootstrap-datetimepicker.min.css" />
<style>
    
</style>
</head>
<body>
    
    <div class="container">
        <h4>Date/Time Picker Component For Bootstrap 4 Demo</h4>
          <div class="row">
              <div class='col-sm-6'>
                  <input type='text' class="form-control" id='datetimepicker1' />
              </div>
      
          </div>
      </div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js" type="text/javascript"></script>
    <script src="https://www.jqueryscript.net/demo/Date-Time-Picker-Bootstrap-4/build/js/bootstrap-datetimepicker.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
</body>
</html>

  • And how do I download it? Just copy the content of the link and put it inside a file in my project and forward it to it?

  • @edro that same rss, as easy as it seems. Just copy the link script and save as meudatapicker.js and index in your document, remembering to follow the indexing order of the scripts, it should come after jQuery etc, see the order in the above reply

  • hmm, got it. But I think you gave me the wrong link. I tried to copy the script from your link and it didn’t work. But with this link https://momentjs.com/downloads/moment.min.js it worked perfectly. Putting it in the order you talked about. Thank you

  • 1

    @edro the idea is the same, copy the contents of the file . js from the source. Strange that here worked with the link I mentioned... can not say pq. But you’ve already caught the evil, that’s right, how good it worked, [s]

  • Hugo, just one more question, which I’m unable to find. How do I change the language from datepicker to Portuguese? For I noticed that, for example the month, appears in English, as "July". I found in a place saying to put language: pt, in the properties when I put the function in jquery, but it didn’t work. Error appeared: Uncaught Typeerror: option language is not recognized! You know how I can do it?

  • I even tried to locale: 'pt-br' and it didn’t work either.

  • @Edro looks like it’s a little more complicated than it looks... You can try forcing the language of the page to see if it changes the format, here are some tips. https://answall.com/questions/394862/como-alterar-o-idioma-de-valida%C3%A7%C3%a3o-no-Html5/394865#394865 but it probably won’t work in this case. Also, I read on the Datapicker link that "ate format. See moment.js' docs for valid formats.&#xA;005&#xA;format: false,&#xA;006&#xA; &#xA;007&#xA;// Changes the heading of the datepicker when in "days" view.&#xA;008&#xA;dayViewHeaderFormat: 'MMMM YYYY',&#xA;" continues... /

  • In other words, you have to look at the Docs of Moment.js to see how the date format changes. See more on this link https://momentjs.com/docs/#/Parsing/special-formats/ and in the last case open a new question asking for help at this point and put what you have of code links and details JS is not very my thing, but sometimes someone here has been through it and can help you better than me

  • Hugo, the date format is in accordance with our Brazilian standard. Only the months, for example "July" is in the title "July". I’ll leave a print on the question.

  • Look here https://momentjs.com/docs/#/i18n/Listing-months-weekdays/ is your Windows in English or your browser? And as I suggested, it’s best to open a new question for someone to help you with the translation, because it has nothing to do with the initial question asked, and it would be ideal to open a new question...

  • I believe the two kskssks, but translated by browser gets completely wrong. Another print on the question

  • @edro open a new question, will make it easier for you to have an answer on that specific subject, since it is not the focus of the original question

  • Okay, thanks for the help.

Show 8 more comments

Browser other questions tagged javascript html jquery twitter-bootstrap datepicker

You are not signed in. Login or sign up in order to post.