Enable only the current week days on the multiple date picker feature

Can anyone recommend a date picker that only shows the current week and allows for multiple date selections by the user?

I found this jsfiddle which limits the display to the current week, but it doesn't support selecting multiple dates.

I attempted to use the multidate:true option, but it wasn't successful. Is there another way to achieve this functionality, or is it simply not possible? I need to make a decision soon.

I've been working on this for a week now without any luck.

Here's the JavaScript code I've tried:

 $(function () { $('.pickWeek').datetimepicker({
    multidate:true,
    locale: 'pt-br', 
    format: "DD/MM/YYYY", 
    sideBySide: true, 
    daysOfWeekDisabled: [0] }); 
    $('.pickWeek').data("DateTimePicker").minDate(moment().startOf('week'));
$('.pickWeek').data("DateTimePicker").maxDate(moment().endOf('week')); });

Answer №1

If you're having trouble with the bootstrap datetimepicker plugin, consider switching to the bootstrap datepicker plugin instead.

$(function () {        
        $('.pickWeek').datepicker({
            locale: 'pt-br',
            format: "dd/mm/yyyy",
            sideBySide: true,
            daysOfWeekDisabled: [0],
            multidate:true,
            startDate:moment().startOf('week').toDate(),
            endDate:moment().endOf('week').toDate()
        });
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/locale/pt-br.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>

Multiple Date Selection
<div class="form-group">
    <div class='input-group date pickWeek'>
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
        <input type='text' class="form-control" />
    </div>
</div>

I have included both examples on jsfiddle for you to test its functionality 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

Testing for ajax failure using Q-Unit in a unit test

While utilizing jQuery's $.when method to manage ajax callbacks, I am also implementing mockjax for simulating various responses in my unit tests. One of these responses results in a status error of 500. Unfortunately, when catching this error using Q ...

How can I design a custom status update box inspired by the look and feel of Facebook

I have searched extensively online for a guide on creating a CSS box similar to Facebook's status update callout box. This box features a square shape with a small notch at the top. Could someone assist me in crafting a CSS design for this type of bo ...

Developing a personalized Magento2 extension with added support for PWA technologies

Greetings, fellow developers! I find myself at a crossroads when it comes to PWA and custom Magento 2 extensions. As a backend developer for Magento, my knowledge of PWA frontend implementation is lacking. Currently, I am in the process of developing an SE ...

What is the best way to ensure that a React app is always displayed in full screen

I am facing an issue while developing an app with React and Material UI. I am trying to display the app in full-page mode, but unable to achieve it successfully. Currently, it appears like this: Here is my code snippet from App.js: import 'typeface- ...

What is the best way to hide a custom contextmenu in AngularJs?

I created a custom contextmenu directive using AngularJs. However, I am facing an issue where the menu is supposed to close when I click anywhere on the page except for the custom menu itself. Although I have added a click function to the document to achie ...

Inserting a large number of records in MySQL using a batch insertion method

Currently, I am facing an issue with inserting multiple records into a MySQL table at once. Just so you know, I am using Node.js along with MySQL (you can find more information about it here: https://www.npmjs.com/package/mysql) Here is what I have been ...

Encountering the "ExpressionChangedAfterItHasBeenCheckedError" in Angular 2

As I try to fill in multiple rows within a table that I've created, the table gets populated successfully. However, an error message pops up: "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous valu ...

What is preventing me from accessing the props of my functional component in an event handler?

I've encountered a strange issue within one of my components where both props and local state seem to disappear in an event handler function. export default function KeyboardState({layout, children}) { // Setting up local component state const [c ...

Having trouble with ejs.filters?

I'm having trouble grasping ejs filters and getting them to work correctly: Server.js var ejs = require('ejs'); ejs.filters.example = function() { //placeholder for example }; Routes.js app.get('/home', function(req, res) { ...

Require assistance in accessing the second tab on a webpage using JavaScript tabs

Currently, I have a web page with two tabs that are initially hidden until the corresponding tab button is clicked. The click event is managed by jQuery. For example, let's assume that tab 1 is the default one when the page loads. Now, I am looking fo ...

Issue with Firefox hover effect not applying transform:scale

I'm experiencing some difficulties with the border colors when using transform:scale on my element. I want to find out if there is a known solution to this issue. Removing the scale animation resolves the problem and the borders return to normal. I ha ...

Steps to send a table to PHP and store it as a text file

I have this program for a form data entry. It includes text boxes to input values, and upon clicking 'Submit', the input values should be displayed below while resetting the text box for another set of inputs. The issue I am facing is with the sa ...

Searching for and replacing anchor tag links within a td element can be achieved using PHP

I am currently customizing my WordPress website and I need to update the URL (product link) of the "product-image" on the "cart" page. I have the following dynamic code: <td class="product-name" data-title="Product"> <a href=&q ...

Is it possible to use jQuery to set a value for a form control within an Angular component?

I'm currently working on an Angular 5 UI project. In one of my component templates, I have a text area where I'm attempting to set a value from the component.ts file using jQuery. However, for some reason, it's not working. Any suggestions o ...

Having trouble retrieving the ID of the clicked element in AngularJS?

I have successfully implemented a function in angularjs to retrieve the id of the clicked element. Below is my code snippet html <a href="#faqinner/contactform" class="clearfix" ng-click="getCateId($event)" id="{{option.id}}"> <span class= ...

Utilize jQuery to dynamically add a CSS class to a button

When using jQuery to create dynamic buttons, is there a way to add a CSS class to the button during creation without needing an extra line of JavaScript to add the class afterwards? Below is a example code snippet: $.each(data, function (index, value) { ...

AngularJS - $scope.$destroy does not eliminate listeners

I am currently exploring how to develop my own "one-time binding" functionality for AngularJS version 1.2 and earlier. I came across this response which explains the process of creating a custom bindOnce directive. Upon using the provided directive: a ...

Discover the procedure for extracting a dynamic value from JavaScript to PHP

Could the centerId value be utilized and transferred to a php variable? const data = { action: 'ft-add-member', maritalStatus: $('.ft-entry-relationship-info .ft-marital-status ul li.current a').data('dropdown' ...

Extraction of data post logging into the webpage (modem authentication page)

I am currently working on a project that involves extracting data from a specific webpage. However, in order to access the data I need, I first have to log in to the website. After trying out different scripts and searching for solutions online, I managed ...

What's the most effective method for transferring data to different components?

How can I efficiently pass a user info object to all low-level components, even if they are grandchildren? Would using @input work or is there another method to achieve this? Here is the code for my root component: constructor(private _state: GlobalSta ...