Setting the date-time format in twitter-bootstrap forms

Trying to implement a date-time input using Twitter Bootstrap, but unsure of the correct method...

Referencing this:

https://github.com/eternicode/bootstrap-datepicker and attempting to utilize the options available.

Previous attempt:

 <link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}/css/bootstrap.css">
 <link rel="stylesheet" type="text/css" href=""{{ STATIC_URL }}/css/datepicker.css">
  <script>
   $('#datepicker').datepicker({
      format: 'mm-dd-yyyy'
    });
  </script>
  <script src = "{{STATIC_URL}}js/Datepicker.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


    <label>Created:</label>
    <input type="text" value ="06/11/2012"id="datepicker"/>
    <br/><br/>

Seeking assistance in displaying the current date on the label instead of the manually entered date.

Although implementation is not functioning as expected, unable to identify the error...

jquerycsshtmldatetwitter-bootstrap

Answer №1

$('#datepicker').datepicker({
format: 'mm-dd-yyyy'
});

For utilizing jQuery, ensure to include the following script in your code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

A successful example can be found at http://jsfiddle.net/baptme/9r2E4/

To update your input section, change:

<input type="text" value ="06/11/2012"id="datepicker"/>

To:

<input type="text" value="06-11-2012" id="datepicker"/>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to display table rows for a specified date range?

I am working with a table and need to display only the rows that fall between two specific dates. <table id ="Table"> <thead> <tr> <th>Date</th> <th>Name</th> <th>Desc</th> </tr> </thead> ...

javascriptphphtml

"Step-by-step guide on using JavaScript to print a PDF file stored locally

As an illustration, I have a local PDF file with 6 pages. When using the window.print() function, only one page is displayed in print preview regardless of what is shown in the browser. Instead of just one page, all pages should be visible in print previ ...

javascripthtmlangularjs

Break apart a set of jQuery elements into an array containing separate jQuery objects

I'm curious if there's a way to split a jQuery selector, which contains a collection of elements, into an array of selectors, one for each element. For instance, let's say I have: fields = row.find('input'); This will give me a s ...

javascriptjquery

How to use return type arrays in JQuery

I am trying to make an ajax request in a Codeigniter function, and I am currently using the code echo json_encode($array) to echo the result array. My goal is to retrieve this return value as an array in the ajax call, which I plan to use in a chart (speci ...

phpjqueryarrayscodeigniterhighcharts

The functionality of the click event does not function properly for buttons that are dynamically generated using

Upon selecting the "Keyboard layout" option, JavaScript generates buttons dynamically. However, the click event does not work with these dynamically generated buttons. This issue is likely due to the fact that the element ".prices-tier" does not exist when ...

javascriptjqueryeventsmagento-2.3

Path lost during Ajax request on .load() function

Recently, I made an ajax request to update values in #mainContent: success: function(response) { $('#mainContent').load('ct/netlinking/ct_netlinking.php'); The file ct_netlinking.php contains the following code: // Scripts for ...

phpjqueryajaxurlpath

update the value of a global variable within a jQuery function

Currently, I am facing an issue with a global variable in jQuery. Here is my code snippet: var namep = ''; $("#page2").bind('pageshow', function (event , data) { var perso = $(this).data("url").split("?")[1]; perso_name = perso. ...

javascriptjqueryjquery-mobilecordova

Provide a value for a secondary select option parameter

I need to retrieve the university ID for use in another select option, which will display my college list under a specific university from a MySQL database. However, I am struggling to find the right approach. I want to pass fetch.university_id as a parame ...

htmlmysqlangularjsservletsionic-framework

Is there a way to configure this code to automatically start upon page refresh?

Recently, I had someone help with this code but now they are nowhere to be found to complete it. Despite my efforts to search online and ask around, I am unable to determine how to make this code automatically start after refreshing the page. It's im ...

jquery

What is the method of invoking the HTML5 form.checkValidity function within a WebForms form.onSubmit event?

When trying to integrate HTML5 input types into an ASP.net WebForms website, how can one extend or override the standard WebForms WebForm_OnSubmit JavaScript function? Most user-agents (e.g. Chrome, IE, Firefox) are already equipped to handle tasks like d ...

htmlasp.netvalidationwebformsconstraint-validation-api

Error in the syntax containing ?callback=jQuery1113

I'm attempting to initiate a simple JSONP query: <html> <head> <script type="text/javascript" src="js/jquery1.js"></script> <script> $(document).ready(function(){ $.ajax({ ...

javascriptjqueryajaxinternet-explorer-8

When using Laravel Mix with Jquery and Materialize, you may encounter the error message "Uncaught TypeError: $(...).collapsible is not a function"

Recently, I started a new Laravel Mix project with Materialize CSS and needed to import jQuery. Everything seemed to be working fine. The compilation process was successful, and I could even locate the function in the app.js file. However, when I tried to ...

jquerylaravelmaterialize

Ways to completely detach all event listeners from an HTML element

Can someone help me figure out how to remove all the attached events to an HTML element using jQuery? Let's say we have the following code: $('<div class="notification" style="bottom:'+ind+'px">Message envoyé '+i+'< ...

jqueryhtmleventsdetach

What might be causing the in-viewport javascript to not work in my code?

Why is my in-viewport JavaScript code not functioning properly? Link to JSFiddle code When the Click to move button is clicked, the cat image will slide correctly. However, when implementing the following code: if($("#testtest").is(":in-viewport")) ...

javascriptjqueryhtmlcss

difficulty obtaining today's date

Currently, I am facing an issue with displaying the current date in an input field for the user: <input id="uploadformData" ng-model="upload.date" type="date" value="<?php echo date('Y-m-d'); ?>" /> The problem arises when the input ...

javascriptjqueryhtmlangularjs

The JSON format provided is not valid

Currently, I am in the process of constructing a JSON object and sending it to the server using JQuery ajax. data: "{'authorID' : '" + authorID + "', 'title' : '" + encodeURIComponent(blogTitle) + "', &a ...

jqueryasp.netajax

Quantities with decimal points and units can be either negative or positive

I need a specialized input field that only accepts negative or positive values with decimals, followed by predefined units stored in an array. Examples of accepted values include: var inputValue = "150px"; <---- This could be anything (from the input) ...

javascripthtmlarraysvalidationvue.js

GUIDE: How to wrap individual elements of a WordPress menu with a unique ID that matches the item title

I am looking to dynamically display an image based on the menu item clicked or hovered over. It would be useful to have a unique id for each menu item to easily manipulate them with JQuery. Is there a way to assign an id corresponding to the title of eac ...

jquerywordpressmenu

There seems to be an issue with the functionality of Js .classList.add()

Currently, I am in the process of creating a simple movie site and am working on the home page. On the home page, there is a carousel. In CSS, I have hidden the visibility of all slides, and my plan is to create an array for all the slides in JavaScript an ...

javascripthtmlcss

Why is the setTimeout() function called for the 2nd member of the object but not for the 1st member?

In the code example I'm sharing in this question, there's a 3D array (basically a JS object) named outerArray. This array consists of inner arrays (technically objects) that each contain multiple url objects. Each url object has a url field and a ...

javascriptjqueryajaxclosuressettimeout