JavaScript date selector allowing the selection of multiple dates

As a beginner in JavaScript, I am struggling to create a datepicker input field that allows multiple selections. Despite researching for solutions, none seem to fit my specific case. Can anyone offer guidance on how to achieve this? Your help is greatly appreciated =)

Here's what I have attempted so far

<script type="text/javascript" language="javascript">
     function pageLoad(sender, args) {
         $(document).ready(function() {
             $("#<%=datepicker.ClientID %>").datepicker();
             $(".ui-datepicker-trigger").mouseover(function() {
                 $(this).css('cursor', 'pointer');
             });
         });
     }
     $(function() {
         $("#datepicker").datepicker();
     });
</script>

<input type = "text" id = "datepicker">

Currently, the code only allows for selecting single dates. Is there a way to modify it to support selecting multiple dates? Thank you!

Answer №1

Looking for a solution to your date picker needs? Check out MultiDatePicker, a handy jQuery plugin that can help you out. Take a look at this demo code showcasing how to use MultiDatePicker:

All you have to do is include the necessary script and style files for the MultiDatePicker plugin:

  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"/>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"/>
    <script src="http://multidatespickr.sourceforge.net/jquery-ui.multidatespicker.js"/>

   <input id="datePick" type="text"/>
   <script>
   $('#datePick').multiDatesPicker();
   </script>

Check out a live demo here

If you encounter any issues while using this plugin, feel free to report them here

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

Encountering an issue in a Vue console where the $ref is returning null and prompting an error message

It's puzzling why I keep encountering a console error in Vue that says "cannot read null of a $ref". Despite having the correct HTML template and adding logic to the script tag as needed, I'm still facing this issue - Cannot read properties of nu ...

Utilizing Next.js named imports without server-side rendering

I am looking to update this code snippet to use next.js dynamic imports without server-side rendering (SSR) import { widget } from "./charting_library/charting_library"; Here is what I have tried so far const widget = dynamic(() => import(&qu ...

Here is a unique version: "A guide on centering a carousel item in jquery upon being clicked."

Does anyone know how to center the item I click in a carousel? I've searched high and low for a solution but couldn't find a clear answer. Can someone please assist me with this? This is what I have tried so far: http://jsfiddle.net/sp9Jv/ Here ...

Whenever I hit the refresh button, `$locationprovider.html5mode` seems to deactivate my CSS styling

Things go smoothly as long as I remove $locationprovider.html5mode(true). However, enabling html5mode seems to be causing some troubles. The main issue is that the css styles stop working after page refreshes. Any ideas on what could be causing this and ...

How can I create a custom validator in Angular 2 that trims the input fields?

As a newcomer to Angular, I am looking to create a custom validator that can trim the input field of a model-driven approach form. However, I have encountered difficulties during implementation. When attempting to set the value using setValue() within th ...

Leverage the power of HTML, CSS, and Bootstrap within Visual Studio 2022 when developing with

Could someone help me figure out how to implement HTML, CSS, and JavaScript design in Visual Studio 2022 while utilizing ASP.NET controls for coding purposes? I am encountering difficulties in starting my work on a website project. Any assistance would be ...

An undefined variable was encountered within the 'else' statement

I am encountering an issue with my code where it is returning an 'undefined' error. The problem arises when I attempt to remove an id from an array using the variable 'id', but instead, it throws an error stating 'undefined'. ...

Experiencing issues with ng-repeat in AngularJs?

I am currently facing an issue with two tables that are rendering data through AngularJS from two separate C# methods. Both tables have almost identical structures, with the first one being used as a search field and the second one to display names. The pr ...

Using jQuery to update a specific item in a list

My current project involves developing an Image Gallery app. It uses <img> tags within li elements. The code snippet is as follows: var $slideR_wrap = $(".slideRoller_wrapper"); var $slidesRoller = $slideR_wrap.find(".slidesRoller"); var $slideR ...

How can I retrieve information from a topic using kafka-node?

Having trouble reading data from a Kafka server? You may encounter an error message stating that the topic does not exist. Here are some questions to guide you: 1- How can I ensure that my Kafka connection is established? 2- What is the process for retri ...

Styling CSS for disabled nested elements

In a project I am currently working on, I've noticed that disabled items do not appear disabled enough. My initial plan was to easily address this issue with some CSS. Typically, adjusting the opacity is my go-to solution to achieve the desired effec ...

Using the useNavigation Hooks in React Js, learn the process of sending JSON data efficiently

This is the custom Json file I developed for my application. export const Data = [ { id: 1, title: "Title 1", description: "Description 1 Data", }, { id: 2, title: "Title 2", ...

When I forget to use var_dump, PHP fails to load scripts

When I am building CSS links using a function, the CSS doesn't work unless I add a var_dump at the end. What could I be missing or overlooking? Here is the code snippet: private function buildCssLinks(){ $files = $this->findFiles(dirname(d ...

"Google Chrome v84 does not render elements with zero height, line-height, and display: flex correctly

In Google Chrome v84, there seems to be an issue with line-height and display: flex (Chrome v83 and FireFox are not affected). The height of the element is not always enforced properly. <div class="outer-wrapper"> <div class="wrap ...

Bringing Angular ECharts into a Stackblitz 15.1 setup: A How-To Guide

Recently, Stackblitz made a change to use a standalone configuration for Angular Projects. However, when trying to initialize the module for Angular ECharts (ngx-echarts), an error occurred: Error in src/main.ts (18:5) Type 'ModuleWithProviders<Ngx ...

Leaflet.js obscuring visibility of SVG control

I am currently working with Leaflet 0.7.1 and I am looking to create a radial menu (similar to openstreetmap's iD editor) using d3 and display it on top of the map. I have come across some examples that use Leaflet's overlayPane to append the svg ...

The collaboration of Node.js and React.js on a single server

Separate ports are used for Node and React, but API requests from the React app can be proxied to the Node URL. I have opted not to implement server-side rendering for React in order to serve the React app. Instead, I build the React app each time there i ...

Retrieving the class ID when clicked

In my PHP while loop, I am generating multiple classes to display information (such as user posts) along with two buttons at the bottom of each post. One button increments and the other decrements a numerical value. I am trying to figure out how to retri ...

Issue with binding background images to DIV elements in Angular 4 CSS

Here is a template example: <div [style.background-image]="profileImage" ></div> In the TypeScript file: We declare private profileImage: any; and use DomSanitizer for security. Fetching photo from service: We set this.profileImage using b ...

How to Centre Align Items in a React Native ListView

Is there a way to center align the items in a ListView without using another View wrapping the ListView? Currently, all the items are left aligned. ListView Code Snippet <ListView dataSource={this.state.dataSource} renderRow={this.renderItem} ...