Tips for retrieving and transforming the date time picker into the server format (toISOString)

I am attempting to utilize a datetime picker and convert it for server-side transmission, but I'm encountering issues. Here is my attempted code:

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
            <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

        <!-- Bootstrap Date-Picker Plugin -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>

        <title> date picker</title>
    </head>
    <body>
        <h1> date picker </h1>

        <div class="input-append date form_datetime">
            <input size="16" type="text" value="" readonly id="date_time">
            <span class="add-on"><i class="icon-th"></i></span>
        </div>

        <script type="text/javascript">
            $(".form_datetime").datetimepicker({
                format: "DD MM yyyy - hh:ii",
                autoclose: true,
                todayBtn: true,
                pickerPosition: "bottom-left"
            });

            var a_date = document.getElementById("date_time");;
            var ser_date = new Date(a_date).toISOString();

        </script>

    </body>
</html>

An error message was returned:

TypeError: undefined is not a function (near '

...$(".form_datetime").datetimepicker...
')

How should I address this issue?

javascriptajaxdatetime

Answer №1

Check out this example code for using a datepicker:

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>

        <title>Date Picker Example</title>
    </head>
    <body>
        <h1>Date Picker Example</h1>

        <div class="input-append date form_datetime">
            <input size="16" type="text" value="" readonly id="date_time">
            <span class="add-on"><i class="icon-th"></i></span>
        </div>
        <div> <input type="button" value="Click me" onclick="ServerDate()"></div>

        <script type="text/javascript">
            $(".form_datetime").datepicker({
                format:'mm/dd/yyyy',
                autoclose: true,
                todayBtn: true,
                pickerPosition: "bottom-left"
            });

            function ServerDate() {
                console.log($('#date_time').val());
                var ser_date = new Date($('#date_time').val()).toISOString();
                alert(ser_date);
            }
        </script>

    </body>
</html>

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

Reactjs encountering issues with function of Cookies section

Currently, I am working on a login module in Reactjs using Nextjs. Upon successful login, I am storing the user email in a cookie. The functionality is working as expected, but I want to restrict access to the login page for users who are already logged in ...

javascriptreactjsnext.js

A method parameter in an MVC controller can be bound to HTML form properties by following these steps

Struggling to bind a controller post method to a basic HTML form on the view. Trying to understand how to populate the parameter and call the method using form data. Controller method: [HttpPost("addcomment")] public JsonResult AddCommen ...

javascriptc#htmlajaxmodel-view-controller

Validating HTML using EJS templates set as "text/template" elements

What is the general consensus on HTML validation when utilizing a framework such as Backbone or Meteor and generating views in the client from EJS templates? An issue arises with the fact that name is not considered an official attribute for a <script& ...

javascripthtmlvalidationbackbone.jsejs

Unable to upload photo using Ajax request

I am in the process of trying to utilize Ajax to upload an image, so that it can be posted after the submit button is clicked. Here is the flow: User uploads image -> Ajax call is made to upload photo User clicks submit -> Post is shown to the user ...

javascriptphpajax

When the user clicks on an element, my JavaScript code dynamically updates the CSS property by changing the window

When a tag is clicked in HTML triggering an onclick event, the CSS property that was updated in the JavaScript does not persist. The changes appear momentarily and then disappear once the window is refreshed. Javascript: <script type="text/javascript"& ...

javascripthtmlcss

Tips for managing the return value of a PHP function in AJAX requests

Looking for some help with inserting HTML form data using PHP and Ajax. Below is the code I've written: <!DOCTYPE HTML> <html lang="en"> <head><title>Ajax Test</title> <meta charset="utf-8" name="viewport" con ...

javascriptphpajaxfunctionreturn-value

Question regarding the exclusive use of [WebMethod] AJAX functions for request processing

In the process of revamping an Ecommerce website, I am focusing on simplifying the checkout process by condensing it to a single page using ASP.NET/C#. (The current website does not utilize any ASP controls) To provide some background, customers will have ...

c#asp.netajaxwebmethod

The toggle button for columns is not triggering the callback action

When working with the following JSFiddle, I noticed that the action function does not seem to fire whenever a button to select a column in the column visibility tool is selected. Check out the code snippet below for reference: $(document).ready(function( ...

javascriptdatatables

Is it possible to use the AngularJS function with the <div> HTML element?

I am facing an issue with displaying a modal when clicking on a <div> element. The function assigned to show the modal by changing the CSS property 'display' from 'none' to 'block' works fine when attached to a button, b ...

javascripthtmlangularjs

``I am experiencing slow loading times with Google Maps JS when using

When accessing Google Maps on Safari, zooming in can be frustratingly slow on both Windows and Mac. The experience feels glitchy, with the zoom starting, freezing, then finally finishing. In comparison, Chrome provides a much smoother and faster zooming ex ...

javascriptiosgoogle-mapssafari

What is the process of utilizing jQuery to hover over a relevant cell?

I'm interested in learning how to implement jQuery to highlight related tables. Initially, I explored this JS fiddle and discovered a method for highlighting both vertically and horizontally. I conducted several searches to find a similar approach, ...

javascriptjqueryhtmlcsshtml-table

Utilizing a loop for setting variable values in JavaScript

Using both JavaScript and JQuery. Let's imagine there is an array called ListArray with various sentences inside. Sounds easy enough. Is there a way to achieve this? var List = for (var i = 0; i < 10; i++) { //iterate over an array here to c ...

javascriptjqueryhtmlarrayslist

dojo combobox with data loaded dynamically from JSON

I am facing an issue with populating a Combobox dynamically using a jsonRest from a cross-origin request. While I have managed to do it statically (if that's the correct term), I am struggling to implement it for multiple cases. This is just a small ...

javascriptjsoncomboboxdojo

Transfer razor javascript calls in Blazor WebAssembly to a separate class

Scenario Description Greetings, I am currently working on a Blazor WebAssembly project that involves JavaScript interop. Initially, I had this functionality working in a .razor page. However, I now intend to encapsulate and centralize these JavaScript inv ...

javascriptc#blazorwebassembly

Troubleshooting: How can I ensure my custom scrollbar updates when jQuery niceselect expands?

I am currently utilizing the jquery plugins mCustomScrollbar and niceselect. However, I have encountered an issue when expanding the niceselect dropdown by clicking on it - the mCustomScrollbar does not update accordingly. I suspect this is due to the abso ...

javascriptjqueryhtmlcss

Element with absolute position does not expand along with scrollable content (over 100%)

In my popup window, the fade element is supposed to stretch to the full width of the screen. However, when the content exceeds 100% of the browser window height, the element does not extend to the full page height. If I set html, body { height: 100%; over ...

javascriptjqueryhtmlcss

Is there a way to convert a json array to a javascript array in AngularJs?

I am new to Angular and front-end development and facing a challenge that I can't seem to overcome. After reassigning one variable to another: $scope.testarray = $scope.todos; only the 'todos' data is being displayed when using Angular bind ...

javascriptarraysjsonangularjs

JavaScript dropdown menu that dynamically changes colors

<!DOCTYPE html> <html> <head> </head> <body> <script> var redtoggle=false; function togglered() { redtoggle = !redtoggle; if (redtoggle) { document.getElementById("txtInput").style.color = "red"; } else { do ...

javascripthtmlcss

Encountering a problem with AngularJS when attempting to access an array and display an alert message

While working with Angular, I encountered an issue in trying to access content stored within an array. Upon reviewing the code, console.log(JSON.stringify($scope.lineItems)) was returning [[]]. However, when inspecting or setting a breakpoint on this line ...

javascriptangularjs

Trouble integrating jQuery post with PHP's $_POST method

I have a form that triggers an onkeyup event. My goal is to send a variable to my php script and display the result in a div. With help from this forum, I managed to partially get my test function working: jQuery.post(the_ajax_script.ajaxurl, When I use ...

phpjqueryajaxwordpresspost