logo
down
shadow

JavaScript - Daterangepicker, isInvalidDate method enabling only one day


JavaScript - Daterangepicker, isInvalidDate method enabling only one day

By : user2185505
Date : November 22 2020, 04:01 AM
I wish did fix the issue. You are returning on every iteration so it will always return the answer for the first element in the array, instead compare all and return the answer at the end, try something like that:
code :
isInvalidDate: (date) => {
    for (let i = 0; i < this.periodsArray.length; i++) {
        if(date == Date.parse(this.periodsArray[i])){
            return false;
        }
    }
    return true
}


Share : facebook icon twitter icon
How to disable several date using isInvalidDate in date range picker

How to disable several date using isInvalidDate in date range picker


By : Brandon Powell
Date : March 29 2020, 07:55 AM
around this issue You just need to add further condition(s) to the isInvalidDate callback, each condition representing a date or block of dates to be disabled.
For example, you could write :
code :
jQuery(function($) {
    var a = moment("2017-10-10");
    var b = moment("2017-10-15");
    var x = moment("2017-10-25");
    var y = moment("2017-10-30");
    $("#daterange").daterangepicker({
        isInvalidDate: function(date) {
            if (date >= a && date <= b) {
                return true;
            }
            if(date >= x && date <= y) {
                return true;
            }
            return false;
        }
    });
});
jQuery(function($) {
    var a = moment("2017-10-10");
    var b = moment("2017-10-15");
    var x = moment("2017-10-25");
    var y = moment("2017-10-30");
    $("#daterange").daterangepicker({
        isInvalidDate: function(date) {
            return (date >= a && date <= b) || (date >= x && date <= y);
        }
    });
});
jQuery(function($) {
    $("#daterange").daterangepicker({
        isInvalidDate: function(date) {
            var dateRanges = [
                { 'start': moment('2017-10-10'), 'end': moment('2017-10-15') },
                { 'start': moment('2017-10-25'), 'end': moment('2017-10-30') },
                { 'start': moment('2017-11-10'), 'end': moment('2017-11-15') },
                { 'start': moment('2017-11-25'), 'end': moment('2017-11-30') },
                { 'start': moment('2017-12-10'), 'end': moment('2017-12-15') },
                { 'start': moment('2017-12-25'), 'end': moment('2017-12-30') },
                { 'start': moment('2018-01-10'), 'end': moment('2018-01-15') },
                { 'start': moment('2018-01-25'), 'end': moment('2018-01-30') },
                { 'start': moment('2018-02-10'), 'end': moment('2018-02-15') },
                { 'start': moment('2018-02-25'), 'end': moment('2018-02-30') }
            ];
            return dateRanges.reduce(function(bool, range) {
                return bool || (date >= range.start && date <= range.end);
            }, false);
        }
    });
});
Error: How do I get the daterangepicker js variable to echo in a php file PHP JAVASCRIPT

Error: How do I get the daterangepicker js variable to echo in a php file PHP JAVASCRIPT


By : ┼Żygimantas
Date : March 29 2020, 07:55 AM
like below fixes the issue I think I see your problem. This should fix it. This should of course come with all the warnings about whether or not you're loading all your js files properly on date2.php. I can't account for all of that in my answer.
code :
<?php

//date2.php
$startDate = ""; //declaring start and end in case they come up empty in the if statement
$endDate = "";
    if($_POST{'_startDate']){
//Strictly speaking you don't need to make these in to new variables
//It's just easier to use them later.
        $startDate = $_POST['_startDate'];
        $endDate = $_POST['_endDate'];
        //Now you can put the posted variables where you need them.
    }
?>
<!-- You can also just write in the variables anywhere you like -->
<p><?php echo $startDate;?></p> <!-- for example -->
<div class="x_content">
    <div class="well" style="overflow: auto">
      <div class="col-md-4">
        <div id="reportrange_right" class="pull-left" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
          <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
          <span></span> <b class="caret"></b>
        </div>
      </div>
    </div>
    </div>

    <script>
    var startDate = '<?php echo $startDate; ?>';
    var endDate = '<?php echo $endDate; ?>';
    console.log(startDate + " : " + endDate);
    document.writeIn(startDate);
    document.writeIn(endDate);
    </script>
Javascript Multiple DateRangePicker elements on page

Javascript Multiple DateRangePicker elements on page


By : Xuzo
Date : March 29 2020, 07:55 AM
Any of those help
...but they all change their date text when a date is chosen in any of the date range input fields. This happens because in the cb callback you refer to each instance element:
code :
$('.form-control span');
function cb(ele) {
    return function (start, end) {
        let vacationrange_span = $(ele).parent().find('.form-control span');
        vacationrange_span.html(start.format('DD/MM-YYYY') + ' to ' + end.format('DD/MM-YYYY'));
        vacationrange_span.attr('data-startdt', start.format('YYYY-MM-DD') + 'T00:00:00Z');
        vacationrange_span.attr('data-enddt', end.format('YYYY-MM-DD') + 'T23:59:59Z');
        vacationrange_span.attr('id', 'register-date-range');
    }
}
, cb(this))

cb(this)(start, end);
var start = moment().subtract(29, 'days');
var end = moment();

/**
 * @param {momentjs date} start
 * @param {momentjs date} end
 * @description Function implemented from daterangepicker.com
 * @see http://www.daterangepicker.com/#example4
 */
function cb(ele) {
    return function (start, end)
    {
        let vacationrange_span = $(ele).parent().find('.form-control span');
        vacationrange_span.html(start.format('DD/MM-YYYY') + ' to ' + end.format('DD/MM-YYYY'));
        vacationrange_span.attr('data-startdt', start.format('YYYY-MM-DD') + 'T00:00:00Z');
        vacationrange_span.attr('data-enddt', end.format('YYYY-MM-DD') + 'T23:59:59Z');
        vacationrange_span.attr('id', 'register-date-range');
    }
}

$('[id^=vacationrange-]').each(function() {
    let idRange = $(this).attr('id').split('-')[1];
    //console.log(idRange);
    $(this).daterangepicker({
        parentEl: '#daterange-picker-' + idRange,
        showWeekNumbers: true,
        startDate: start,
        endDate: end,
        ranges: {
            'Today': [
                moment(), moment()
            ],
            'Yesterday': [
                moment().subtract(1, 'days'),
                moment().subtract(1, 'days')
            ],
            'Last 7 Days': [
                moment().subtract(6, 'days'),
                moment()
            ],
            'Last 30 Days': [
                moment().subtract(29, 'days'),
                moment()
            ],
            'This Month': [
                moment().startOf('month'),
                moment().endOf('month')
            ],
            'Last Month': [
                moment().subtract(1, 'month').startOf('month'),
                moment().subtract(1, 'month').endOf('month')
            ]
        }
    }, cb(this))

    cb(this)(start, end);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.3/daterangepicker.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.3/daterangepicker.css" />


 <div class="container col-md-9">
        <div class="row" style="margin-top: 120px;">
            <h1>Vacation Registration</h1>
        </div>
        <hr>
        <div class="row row-margin-bottom">
            <div class="col-md-12 no-padding lib-item" data-category="view">
                <div class="lib-panel">
                    <div class="row box-shadow">
                        <div class="col-md-9">
                            <div class="lib-row lib-header">Jane Doe<div class="lib-header-seperator"></div>
                            </div>
                            <div class="lib-row lib-desc">
                                <div class="row">
                                    <div class="col-sm-8">
                                        <div class="input-group" id="daterange-picker-628">
                                            <div class="form-control" style="cursor: pointer; padding: 5px 10px; border: 1px solid #ccc"
                                                id="vacationrange-628"><i class="fa fa-calendar mr-3"></i><span
                                                    class="mr-3"></span><i class="fa fa-caret-down"></i></div><span
                                                class="input-group-append"><button class="btn btn-success bg-klean fa fa-check"
                                                    id="vacation-import-btn-628"></button></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <p>Something something dark side</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row row-margin-bottom">
            <div class="col-md-12 no-padding lib-item" data-category="view">
                <div class="lib-panel">
                    <div class="row box-shadow">
                        <div class="col-md-9">
                            <div class="lib-row lib-header">John Doe<div class="lib-header-seperator"></div>
                            </div>
                            <div class="lib-row lib-desc">
                                <div class="row">
                                    <div class="col-sm-8">
                                        <div class="input-group" id="daterange-picker-777">
                                            <div class="form-control" style="cursor: pointer; padding: 5px 10px; border: 1px solid #ccc"
                                                id="vacationrange-777"><i class="fa fa-calendar mr-3"></i><span
                                                    class="mr-3"></span><i class="fa fa-caret-down"></i></div><span
                                                class="input-group-append"><button class="btn btn-success bg-klean fa fa-check"
                                                    id="vacation-import-btn-777"></button></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <p>Something something dark side</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
apply.daterangepicker event stops firing when daterangepicker() constructor re-attached

apply.daterangepicker event stops firing when daterangepicker() constructor re-attached


By : Mopheus
Date : March 29 2020, 07:55 AM
To fix the issue you can do The remove() function you're calling removes any event listeners for the date range picker you're destroying.
Move your apply.daterangepicker listener creation into the attachpicker() function.
Date Range Picker - IsInvalidDate / IsCustomDate

Date Range Picker - IsInvalidDate / IsCustomDate


By : Anton
Date : March 29 2020, 07:55 AM
wish help you to fix your issue isInvalidDate appears to be a method of daterangepicker. As your code currently goes, that method is outside of scope of the daterangepicker object/function.
You'll need to place it inside like so:
Related Posts Related Posts :
  • dropdown flexibility?
  • How "d3.translateExtent" coordinate works?
  • Get the element of an array that has an index given by a variable in JavaScript
  • Replace(), replacing a value not specified
  • javascript native equivalent to .each & .attr
  • Fabric getPointer method not working in Firefox
  • JS scripts not working for divs loaded with jQuery's .load()
  • Use xhr code error on switch/case (javascript)
  • ParseFloat return string instead of number in Javascript
  • How to add a custom script into React app component?
  • Show data while it's being sent to the backend
  • selecting a specific class with .parents()?
  • Get value of a selected option in an label with Javascript
  • How Do I get an HOC wrapped component function from enzyme instance when mounting?
  • i want to update the flashdata on every ajax call
  • Cannot find a tag with JSsoup even though the tag exists in Node JS
  • Exporting the RouterModule?
  • Remove the default checked value in radio button and replace it with the another radio button that is click
  • Switch to test for id and perform action based on class
  • JavaScript Random Number Generation: Unique 500 Integers in Space 10^6: Getting Collisions
  • Display files in directory using PHP and jQuery
  • Knockout JS: adding forms in foreach bindings
  • HTML5 Canvas positioning mouse clicking broken
  • JQuery on change fired only after second change of select box
  • Unable to limit WebRTC P2P Multi-participant Receiving Bandwidth
  • What is the RegEx to just return the last part of the URL
  • State Remains Undefined in React
  • removing content on website before a screen reader can read it with either JavaScript or CSS...?
  • on 'click' firing before click
  • Manipulation of an array sent by ajax to a php file, within a function of another file
  • How to use plunker or jsfiddle to run angular2 code
  • JavaScript lexical environments as objects
  • Iteratively position spheres with DOM pixels using three.js and React
  • React trying to access file at a wrong path
  • AES encryption in JS equivalent of C#
  • Filter an Array based off user input string and menu dropdown items
  • Constantly read local file with JS?
  • React navbar handler with theme
  • Show changes to HTML5 canvas immediately
  • Tooltip Stays Hidden In D3 Treemap
  • Backbone - What is the best way to listen to 2 models?
  • formatting an array of objects output
  • Bind input value to specific value in object
  • Animation doesnt work when onClick event occurs (react.js)
  • Consume enum from ambient TypeScript module using @babel/preset-typescript?
  • Changing order of React components only triggers re-render after second click
  • Track the total time the HTMLAudio was playing
  • Call javascript function in PHP file and load html file after?
  • Theme Development: JavaScript not working when linked from functions.php
  • Add attributes to multiple <td> in datatables
  • Progressive loading codesnip not quite understood
  • How to format default date in javascript?
  • Caesar cipher only gets first value right
  • innerText not showing after setting it straight after creating the element
  • How to use HTML template tag with jQuery?
  • Showing v-menue's selected option in another part of the application. Vuetify
  • How can I find and return my div element with rails and javascript?
  • The right way to use Ajax to Update a Single field in a specific Object
  • Hhow to create a react element and apply a javascript method to it
  • Change src of parent window iframe
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org