Retrieving the chosen date from a calendar using a jQuery function

Hey there, I need help with showing tasks created on a specific date by selecting that date from a full month calendar.

https://i.sstatic.net/hbLtp.jpg

There are multiple tasks created on the selected date, and I want to trigger a jQuery event to fetch data for that date.

However, my issue is getting the selected date so I can pass it to my Node.js function.

Any suggestions on how I can retrieve the selected date?

I am currently using this calendar:

<link rel="stylesheet" type="text/css" href="pages/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
<script src="pages/bower_components/jquery/dist/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<div class="box box-primary">
  <div class="box-body no-padding">
    <!-- THE CALENDAR -->
    <div id="calendar"></div>
  </div>
</div>
javascriptjqueryhtmlcss

Answer №1

One feature of jQueryUI Datepicker is the onSelect option, which can be included in the options object passed to the .datepicker function.

$('#calendar').datepicker({
    onSelect: function(date, datepicker) {
        // Retrieve selected date as a string
        // Access instance of the calendar itself through datepicker parameter
    }
});

This functionality allows you to retrieve necessary data from your Node.js service and display tasks scheduled for that date.

To learn more about jQueryUI Datepicker widget, visit:
https://api.jqueryui.com/datepicker

Exploring the documentation may lead you to discover how to enable multi-date selection!
I hope this information proves valuable to you.

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

Arrangements of inputs in HTML

<input name="foo[]" ... > While I have utilized these in the past, I am curious about its official name and whether there is a specific specification for it. Despite my search efforts within the HTML 4.01 Spec, the term "array" seems to be most com ...

phphtmlarraysforms

How can I use Selenium in combination with Python to retrieve the visible text of a selected radio button or checkbox on a webpage?

I am currently working on processing a form where I need to extract the text values of all checked radio buttons. Each line item will have one radio button checked. Here is an example of the HTML structure for a checked radio button: <div style="white ...

pythonhtmlformsseleniumradio-button

Establishing a pre-selected option in a drop-down menu

I am working on a dropdown list and my goal is to have the default option selected when the page loads <b>Filter Within Months:</b> <select class="btn green" ng-model="myOptions" ng-options="i.label for i in items track by i.id" ng-change= ...

javascriptangularjsdrop-down-menu

Boxed Tabs displaying unnecessary excess information

Recently, I've been working on a project where I implemented a tutorial for a 'dynamic tabbed box' that populates with list items from a database. Everything was functioning perfectly since the tutorial provided instructions for 6 tabs, and ...

phpjquery

Error rendering {message} object on the Chrome Console

In my ReactJS component, I am utilizing the {message} parameter from props. Check out the code snippet below: import React from "react"; const MyMessage = ({ message }) => { if (message?.attachments?.length > 0) { return ( < ...

javascriptreactjsjsongoogle-chrome

What is the best way to add data to a URL in an ActionResult Method using window.location.href?

I am having trouble understanding how to retrieve data using window.location.href = '/Product/Success/'+data.OrderTrackNo+'';. I am able to get data using ajax, but it seems different when retrieving data with window.location.href, whic ...

javascriptjqueryajaxasp.net-mvcurl-routing

Executing AJAX on page load using jQueryHere is how you can initiate an AJAX

I have been utilizing jQuery to create an ajax call that occurs every x seconds. I am curious, is there a way to also trigger the same ajax function to run when the page loads? Below is the code snippet of my ajax function which currently triggers every 3 ...

jqueryajax

Is it a good idea to relocate the document.ready function into its own JavaScript function?

Can the following code be placed inside a separate JavaScript function within a jQuery document.ready, allowing it to be called like any other JavaScript function? <script type="text/javascript"> $(document).ready(function() { $('div#infoi ...

javascriptjquery

Is it appropriate to delete the comma in the Ghost Handlebars Template?

While navigating through the tags, I unexpectedly encountered a comma. This could potentially have an unwanted impact. I attempted to remove the comma, but is there a specific method to eliminate it completely? I referred to the Ghost blog Document for gui ...

javascriptnode.jshandlebars.jsghost

The issue with the yearRange in Materialize CSS datepicker persists

I have implemented a Materialize CSS datepicker and am trying to set the yearRange from 1950 to 2005. However, when I use the yearRange parameter, it is not functioning as expected and shows future years in the dropdown. Below is the code I am currently us ...

jquerydatepickermaterial-design

Electron experiences a crash while attempting to execute an HTTPS request within an addeventlistener callback function

In the process of creating a simple Electron application that facilitates user login into a system, I encounter an issue. The app collects the username and password entered by the user through form text inputs. Upon clicking the "login" button, the program ...

javascriptnode.jshttpscrashelectron

The height and rows of a textarea element do not adjust properly to the content in FireFox

Looking for a way to create a textarea with dynamic height that adjusts as the user adds new content? The resize property is set to none and overflow is hidden. It seems to be working correctly in Chrome, but Firefox is presenting some mysterious issues wi ...

htmlcssfirefox

In Wordpress, take advantage of the themes options page in the admin section to easily insert custom HTML into the header.php file when a

This is my first attempt at creating a custom theme options/settings page for my theme. I'm currently working on implementing a slider feature, but I want to provide the flexibility to disable it if needed. To achieve this, I am planning to include a ...

jquerywordpress

Is there a way to ensure that the line numbers displayed for JavaScript errors in Chrome are accurate?

I suspect either my webpack configuration or my npm run dev script are causing the issue, but I'm unsure of what exactly is going wrong. While running my application in development mode, I encounter error messages like: Uncaught TypeError: this.props ...

javascriptnode.jsreactjsexpressdebugging

Having trouble getting the overflow scrollbar to work properly?

I recently created a Whiteboard using Vue. The Whiteboard consists of an SVG element where I can add other SVG elements like paths to it. In order to enable scrolling within the SVG, I came across this example which seemed quite helpful. Check out the exa ...

htmlcssvue.jssvg

What steps can be taken to send the user to the login page after their session token has expired

Currently, I am using a Marionette + Node application. I have noticed that when the token expires, the application does not respond and the user is not redirected to the LogIn page. My question is, how can I set up a listener to check the session token s ...

javascriptnode.jsexpress

Is it possible to adjust the width of a parent element based on the number of child

In this particular example, I have structured a header with a logo-container positioned on the left side, a menu in the center, and a button on the right. The menu consists of 5 top-level items and 2 sub-menus. <div class="container"> <div cla ...

javascriptjqueryhtmlcss

Jquery Timer that can be toggled on and off with a single button

I'm really struggling to find a way to make this work smoothly without any bugs. The button in the code below is supposed to perform three actions: Initiate a countdown when clicked (working) Stop the countdown automatically and reset itself when it ...

javascripthtmljquery

Anticipating the completion of post requests

I am currently working on implementing a file upload feature in Angular. I have tackled the issue of file size restrictions by creating an API endpoint that can receive file chunks. Once all the chunks are received, another endpoint needs to be triggered ...

javascriptangulartypescript

Removing double double quotes for Javascript

My problem involves a string that represents longitude/latitude in the format of dd°mm'ss''W (note 2 single quotes after ss). To convert this string into its decimal representation, I am using the following code snippet: function dmsTodeg ...

javascript