Slider buttons are not appearing in Time Picker

I recently added a Time Picker to my project, but I'm experiencing an issue where the slider buttons for selecting time are not showing up.

Could you please refer to this image:

Checking the console, there don't seem to be any errors present.

Let me share the snippet of code I am currently utilizing:

<script type="text/javascript">
$(function () {
    $("#timeField").datetimepicker(
    {
    minDate: 0,
    timeFormat: "hh:mm TT"
    }
    );
});
</script>

These are the plugins I have included in my project:

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link href="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.css" rel="stylesheet" type="text/css">
    <script src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js" type="text/javascript">
    <script src="http://trentrichardson.com/examples/timepicker/jquery-ui-sliderAccess.js" type="text/javascript">

Any insights on what might be causing this issue?

javascriptjquerycssjquery-uidatetimepicker

Answer №1

For more information, please check out the following link:

example datetimepicker

Alternatively,

$('#basic').datetimepicker({
        timeFormat: "hh:mm tt",

        hourMin: 8,

        hourMax: 16,

        numberOfMonths: 2,

        minDate: 0,

        maxDate: 30
});

Answer №2

Consider adjusting the order of your script includes - place the slider script above the time picker script.

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

Tips for converting this ajax code to long polling

I am currently using this ajax code and I was wondering if anyone knows how to change it to long polling. Here is the code I am using: var chat = {} chat.fetchMessages = function () { $.ajax({ url: 'ajax/ajax/chat.php', type: 'PO ...

javascriptajaxlong-polling

What are the best ways to expand image mapping?

It can be a bit challenging, but I'll do my best to explain. I have an image that is sized at 1920 by 1080 pixels and it adjusts based on the window size. The issue arises when the image mapping doesn't adjust accordingly. The coordinates remain ...

htmlcssimagemap

Encountering SCRIPT1014 and SCRIPT1002 errors within an Angular4 application when using Internet Explorer 11

My Angular 4 application runs perfectly in various browsers. However, when trying to launch it in Internet Explorer version 11, I encounter the following two errors: SCRIPT1014: Invalid character addScript.js (9,1) SCRIPT1002: Syntax error main.bundle.js ...

javascriptangularinternet-explorer-11

Events for focusing and blurring top level windows

I'm encountering an issue with a basic frameset setup <frameset rows="100, 200"> <FRAME name="listener" src="frame1.html"> <FRAME name="content" src="http://www.someexternalurl.com/"> </frameset> Within the listener ...

javascriptjqueryevents

What is the best way to align product cards side by side instead of stacking them on separate lines?

I am currently working on a mock-up website for a school project. For this project, I am developing a products page where I intend to showcase the items available for sale. Although I managed to successfully copy a template from w3schools, my challenge lie ...

htmlcss

Issue with firestore IN query when encountering NULL value

Is there a way to create a query that retrieves all documents without a value, whether it be null or ''? Within my table are three documents, each containing a field called a. https://i.sstatic.net/FGV0Z.png During an IN query, the document wit ...

javascriptfirebasegoogle-cloud-platformgoogle-cloud-firestore

Tips for representing entire months as object keys using numerical values

Currently, I find myself a bit puzzled as to why my code is not functioning as expected, and I am hopeful that you all could assist me in solving this issue. The data structure I am working with consists of years and corresponding months. chosenMonths = { ...

javascriptarraysobjectlit

Inline-block display for file input button in Bootstrap 4 style

I have added an input file button and I am trying to make it full width using display:block. Even after hiding the input field, I am not seeing any difference. Here is the relevant code snippet: <link href="https://stackpath.bootstrapcdn.com/bootstra ...

htmlcssformsbootstrap-4

Tips for effectively recycling the describe sections in mocha test cases

My app has different modes, each with its own loading times and configurations. One particular mode has a long loading period every time a page is opened which is causing some testing challenges. Currently, I have separate test files for each section of th ...

javascriptselenium-webdrivermocha.jse2e-testingwebdriver-io

Utilizing GoDaddy's API to Implement an A Record

I am encountering an issue while trying to add an A record to a domain using GoDaddy's API. The console in my browser is showing a 422 (Unprocessable Entity) response error. Interestingly, when I follow the steps outlined in GoDaddy's documentati ...

jqueryajaxdnsgodaddy-api

Can you explain the contrast between deep and shallow cloning techniques?

When I employ splice to duplicate an array, I receive a shallow copy. However, there seems to be something missing since I end up with multilevel arrays. It appears that the issue lies elsewhere, possibly not related to the array's depth. Can someone ...

javascriptarraysclone

Styling various versions of a <button> using Styled Components

In my app, I have a basic colored button that needs to change its color depending on the UI state: const StyledButton = styled.button` & { border: 0; color: white; cursor: pointer; } &:hover { background-color: ${(props) => ...

cssreactjsstyled-componentscss-modules

What sets apart the JavaScript console from simply right-clicking the browser and opting for the inspect option?

As I work on developing an angular application, one of my tasks involves viewing the scope in the console. To do this, I usually enter the code angular.element($0).scope(). This method works perfectly fine when I access the console by right-clicking on th ...

javascriptangularjsgoogle-chromegoogle-chrome-devtoolsdeveloper-console

Trouble with Ajax connecting to the wunderground API for weather data retrieval and display

Hey there! I'm currently experimenting with a public api from wunderground (you can find more information at [http://wiki.wunderground.com/index.php/API_-_XML][1]) for use on a web page. I'm actually working on creating a widget for a phone, but ...

jqueryajaxxmlhttprequestwunderground

Display WooCommerce notifications when using the AJAX add to cart feature

Looking to enhance my WooCommerce shop by incorporating AJAX functionality for the add to cart feature, I stumbled upon this incredibly useful tutorial which worked seamlessly. However, after implementing the solution, I noticed that the WooCommerce notic ...

phpjqueryajaxwordpresswoocommerce

dynamic webpage resizing using html and css

Looking for a way to make my SharePoint window automatically resize when the user changes their browser size. I'm using the web version of SharePoint at work and don't have access to Designer. <style type="text/css"> #dgwrap { HEIGHT: ...

htmlcsssharepoint

Unable to create slides with Fancybox if the content is in HTML format

I'm not sure if this issue is a bug or if it's just a restriction of fancybox. Can anyone confirm if it's possible to create a gallery using HTML elements? I've been attempting to accomplish this for hours without success. Here is the ...

jqueryhtmlfancybox-2

How can I remove the script from Response.Write?

Instead of using Response.Write to test some values in code with an alert box, I tried writing dynamic javascript directly into the page. Even after reverting the code, rebuilding, and clearing all temp data from IE, the alert still pops up. I followed a ...

javascriptasp.netresponse.write

Generate listview items containing anchor tags automatically

I am currently developing a web application using Jquery Mobile. After retrieving data from a webservice function, I am utilizing an ajax call to display this data on my webpage. $('[data-role=page]').on('pageshow', function () { var u ...

javascriptjqueryhtmlajaxjquery-mobile

Show the information received from ajax on the webpage

I am facing an issue with displaying the value I receive from AJAX data in this modal. I have set the id="view_name" on a span element but for some reason, it's not showing up. Below is the code snippet that triggers the fun_view function: <td> ...

jqueryajaxlaravelbootstrap-modal