How to disable multiple ranges (sequential, non-sequential)? #11

daranaveen007 · 2016-11-05T12:34:46Z

Please help me to disable dates while I got input as a range like 05-11-2016~23-11-2016.
Is there any way like this.. I know you have created minDate and maxDate but I used them already to disable past days from currentday. So I need Another spec to disable many ranges in one calender.. Hope you got my point.. right?? Just think of it, if there's a need to block multiple ranges by each update. Thanks.
$('.multi-select-calendar').pignoseCalendar({ format: 'DD-MM-YYYY', multiple: true, minDate: minDate, disabledDates: d_dates, select: onClickHandler, disabledWeekdays: [], disabledRange:['05-11-2016','23-11-2016'] }); as my disable range contains upper and lower bounds of the date range.

The text was updated successfully, but these errors were encountered:

daranaveen007 · 2016-11-05T13:12:42Z

Or You can just allow me to block all past days depending on current day at that time with the help of any other default variable except minDate. thanks.

KennethanCeyer · 2016-11-05T20:06:19Z

Hi @daranaveen007

Thank you for asking to me 😄

You can use disabledDates and enabledDates with both of minDate and maxDate either.

Note: enabledDates can overrides disable things.

And format option mean is, When you use the calendar to input, The calendar will fill the input value to the format what you gave, So In this case you don't need format option. And disabledDates must be 'YYYY-MM-DD' format

daranaveen007 · 2016-11-07T05:13:58Z

Oh!! Thank you.. It is fine for now.. I need to implement some logic to fulfill my need. It is OK. But I'm asking you to do any simple way to block multiple range dates in future with just a single variable.

KennethanCeyer · 2016-11-07T07:02:38Z

Hi @daranaveen007

I think you need bulk based and light ways for set disabled dates.

I can make dynamic filter callback, you can use dynamic filtering by returning true or false like javascript filter.

If you need this feature, just tell me 😄

daranaveen007 · 2016-11-07T10:12:46Z

Yeah.. but, my need is to disable particular range from a date to another date.. like that way many ranges in non-sequence manner. For, e,g. 2016-11-07 to 2016-11-16 is one range to disable, and 2016-11-21 to 2016-11-29 is another range. I just make it possible for now with a regular While loop in PHP. But it is more easy and happy when you gave a feature of an array like disableRanges of type input ranges strings. right?? That'll be like this var disableRanges = ['2016-11-07~2016-11-16','2016-11-20~2016-11-29']; Hope you got my point now?? If you think anything huge I said, Just ignore me.. I'm not that much of familiar with JS.. Thank you..

daranaveen007 · 2016-11-07T10:14:54Z

Array of ranges I mean.. If possible.. please consider my point..

daranaveen007 · 2016-11-07T13:05:01Z

Sir.. One more thing please do it for me..
I want to make a diff in the point of view, just make them in color maroon for disabledWeekdays. and Red for disabledDates..

KennethanCeyer · 2016-11-07T16:44:15Z

Hi @daranaveen007

I think i can sum up your needs to two features.

First one. You need to set disabled or enabled dates by multi range easily.

'YYYY-MM-DD~YYYY-MM-DD' pattern for describe disabled date range is readable and user-friendly,

But i think those pattern isn't good for developmental and recyclability.

So i recommended for you the filter option
(you can choice date type dynamically enable or disabled by function logic what you customize)

Well, this solution isn't good either,

How about [['YYYY-MM-DD', 'YYYY-MM-DD'], ...] double array?

This one make sense in part of development.

And second one

I will give more specific class about disabled option.

So you can customize the style by those classes.

I will make the feature what i said right now.

Next update will be within after 30 minutes.

KennethanCeyer · 2016-11-07T17:36:36Z

Hi @daranaveen007

Update are completed successfully!

You can see changes log as below.

disabledRanges feature added, You can see the tutorial for this option at here.
Multiple input type calendar return data format are changed a little.
- Single selection (EX 2016-11-08 ~ null): old: 2016-11-08, null => new 2016-11-08.
- Multi selection (EX 2016-11-08 ~ 2016-11-20): old: 2016-11-08, 2016-11-20 => new 2016-11-08 ~ 2016-11-20.
- A safe structure (Date parser will never be stuck. )
Disabled date class more be subdivided.
- disabledDate: pignose-calendar-unit-disabled
- disabledWeekdays: pignose-calendar-unit-disabled and pignose-calendar-unit-disabled-weekdays
- disabledRangeDate: pignose-calendar-unit-disabled and pignose-calendar-unit-disabled-range
- disabledMultipleRangeDate pignose-calendar-unit-disabled, pignose-calendar-unit-disabled-range and pignose-calendar-unit-disabled-multiple-range

daranaveen007 · 2016-11-08T05:13:26Z

Dear @KennethanCeyer .. I'm very happy with your support.. Thanks for making it possible. I'll share with you my ideas on this rapidly. Thank you.. have a nice day!!

daranaveen007 · 2016-11-08T05:31:42Z

@KennethanCeyer 👍

daranaveen007 · 2016-11-08T05:57:55Z

Please help me to do the last thing, .pignose-calendar-unit-disabled .pignose-calendar-unit-disabled-weekdays How can I change colors with this css classes.. I tried but the colors were not overridden.

KennethanCeyer · 2016-11-08T06:18:50Z

Hi @daranaveen007

I will give a snippet for this.

Please wait a moment 😄

daranaveen007 · 2016-11-08T06:26:13Z

Thank you..

daranaveen007 · 2016-11-08T07:43:25Z

Well.. ah... By default it shows the current day is selected.. How Can I make it Unselect in multiple range calander

daranaveen007 · 2016-11-08T13:47:30Z

Dear @KennethanCeyer I'm eagerly waiting for your reply..

KennethanCeyer · 2016-11-09T01:54:15Z

Ah.. Sorry @daranaveen007

I was busy yesterday.

I hope you understand.. 🐻

daranaveen007 · 2016-11-09T10:59:17Z

Okay.. I'll wait for you.. take your own time.

KennethanCeyer · 2016-11-09T13:42:55Z

I write some snippet.

You can customize by following the snippet.

But first you need be better update new version.

Because force override style for calendar all cleared by new one. v1.3.3.

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>PIGNOSE Calendar</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="stylesheet" type="text/css" href="pignose.calendar.css" />
    <style type="text/css">
        /* Check this out! *
        /* This is a snippet for customize disabled date style */
        /* by separately each of disabled types. */

        .pignose-calendar-unit.pignose-calendar-unit-disabled a {
            background-color: black;
            color: #ffffff;
        }

        .pignose-calendar-unit.pignose-calendar-unit-disabled.pignose-calendar-unit-disabled-range a {
            background-color: #ff4848;
        }

        .pignose-calendar-unit.pignose-calendar-unit-disabled.pignose-calendar-unit-disabled-range.pignose-calendar-unit-disabled-multiple-range a {
            background-color: blue;
        }
    </style>
    <style type="text/css">
        .input-calendar {
            display: block;
            width: 100%;
            max-width: 360px;
            margin: 0 auto;
            height: 3.2em;
            line-height: 3.2em;
            font: inherit;
            padding: 0 1.2em;
            border: 1px solid #d8d8d8;
            box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
            -o-box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
            -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
            -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
        }

        .btn-calendar {
            display: block;
            width: 100%;
            max-width: 360px;
            height: 3.2em;
            line-height: 3.2em;
            background-color: #52555a;
            margin: 0 auto;
            font-weight: 600;
            color: #ffffff !important;
            text-decoration: none !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
            -o-box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
            -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
            -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
        }

        .btn-calendar:hover {
            background-color: #5a6268;
        }
    </style>
    <script type="text/javascript" src="jquery.latest.min.js"></script>
    <script type="text/javascript" src="moment.min.js"></script>
    <script type="text/javascript" src="pignose.calendar.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    $(function() {
        $('#wrapper .version strong').text('v' + pignoseCalendar.VERSION);
        function onClickHandler(date, obj) {
            /**
             * @date is an array which be included dates(clicked date at first index)
             * @obj is an object which stored calendar interal data.
             * @obj.calendar is an element reference.
             * @obj.storage.activeDates is all toggled data, If you use toggle type calendar.
             */

            var $calendar = obj.calendar;
            var $box = $calendar.parent().siblings('.box').show();
            var text = 'You choose date ';

            if(date[0] !== null) {
                text += date[0].format('YYYY-MM-DD');
            }

            if(date[0] !== null && date[1] !== null) {
                text += ' ~ ';
            } else if(date[0] === null && date[1] == null) {
                text += 'nothing';
            }

            if(date[1] !== null) {
                text += date[1].format('YYYY-MM-DD');
            }

            $box.text(text);
        }

        // Default Calendar
        $('.calendar').pignoseCalendar({
            select: onClickHandler,
            disabledDates: ['2016-11-20'],
            disabledRanges: [['2016-11-01', '2016-11-09']],
            maxDate:  '2016-11-27'
        });
    });
    //]]>
    </script>
</head>
<body>
    <div id="wrapper">
        <div class="header">
            <h1>PIGNOSE Calendar</h1>
            <h4 class="version">Latest version <strong></strong></h4>
        </div>
        <div id="basic" class="article">
            <h3><span>Calendar</span></h3>
            <h4>PIGNOSE Calendar is beautiful and eidetic jQuery date picker plguin.</h4>
            <div class="calendar"></div>
            <div class="box"></div>
        </div>
    </div>
</body>
</html>

KennethanCeyer · 2016-11-09T13:59:35Z

Hi @daranaveen007 again

Sorry about late 😢

Anyway i made an option that you can control first initialized date.

Check the snippet as followed.

    // turn off initialized date.
    $('.calendar').pignoseCalendar({
        initialize: false
    });

    // set initialized date.
    $('.calendar').pignoseCalendar({
        initialize: true, // This option can be omitted.
        date: moment('2016-11-20')
    });

And this option can be used at v1.3.4 or higher version.

daranaveen007 · 2016-11-10T11:17:23Z

Great job!! @KennethanCeyer Thanks for the support. It is very precious.

daranaveen007 · 2016-11-10T12:44:18Z

Colors was really nice.. But you forgot to make change in color for disabledWeekdays???

Pls make it possible if you don't mind this sincere request from my side. If it is possible..
And also look over there, is there any possibility to stop select a range that contains disable dates in between that range?
I'm the worlds happiest person If you do this for me..

KennethanCeyer · 2016-11-14T01:35:32Z

Hi @daranaveen007

This issue seems be delayed,

I will reply at today,

I am so sorry about the happening

KennethanCeyer · 2016-11-14T18:13:11Z

Hi @daranaveen007

I update the snippet which i gave to you before.

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>PIGNOSE Calendar</title>
    <link rel="stylesheet" type="text/css" href="demo/css/style.css" />
    <link rel="stylesheet" type="text/css" href="src/css/pignose.calendar.css" />
    <style type="text/css">
        /* Check this out! *
        /* This is a snippet for customize disabled date style */
        /* by separately each of disabled types. */

        .pignose-calendar-unit.pignose-calendar-unit-disabled a {
            background-color: darkorange;
            color: #ffffff;
        }

        .pignose-calendar-unit.pignose-calendar-unit-disabled.pignose-calendar-unit-disabled-range a {
            background-color: #ff4848;
        }

        .pignose-calendar-unit.pignose-calendar-unit-disabled.pignose-calendar-unit-disabled-weekdays a {
            background-color: darkslategrey;
            color: #ffffff;
        }

        .pignose-calendar-unit.pignose-calendar-unit-disabled.pignose-calendar-unit-disabled-range.pignose-calendar-unit-disabled-multiple-range a {
            background-color: slateblue;
        }
    </style>
    <style type="text/css">
        .input-calendar {
            display: block;
            width: 100%;
            max-width: 360px;
            margin: 0 auto;
            height: 3.2em;
            line-height: 3.2em;
            font: inherit;
            padding: 0 1.2em;
            border: 1px solid #d8d8d8;
            box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
            -o-box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
            -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
            -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
        }

        .btn-calendar {
            display: block;
            width: 100%;
            max-width: 360px;
            height: 3.2em;
            line-height: 3.2em;
            background-color: #52555a;
            margin: 0 auto;
            font-weight: 600;
            color: #ffffff !important;
            text-decoration: none !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
            -o-box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
            -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
            -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
        }

        .btn-calendar:hover {
            background-color: #5a6268;
        }
    </style>
    <script type="text/javascript" src="demo/js/jquery.latest.min.js"></script>
    <script type="text/javascript" src="vender/moment.min.js"></script>
    <script type="text/javascript" src="src/js/pignose.calendar.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    $(function() {
        $('#wrapper .version strong').text('v' + pignoseCalendar.VERSION);
        function onClickHandler(date, obj) {
            /**
             * @date is an array which be included dates(clicked date at first index)
             * @obj is an object which stored calendar interal data.
             * @obj.calendar is an element reference.
             * @obj.storage.activeDates is all toggled data, If you use toggle type calendar.
             */

            var $calendar = obj.calendar;
            var $box = $calendar.parent().siblings('.box').show();
            var text = 'You choose date ';

            if(date[0] !== null) {
                text += date[0].format('YYYY-MM-DD');
            }

            if(date[0] !== null && date[1] !== null) {
                text += ' ~ ';
            } else if(date[0] === null && date[1] == null) {
                text += 'nothing';
            }

            if(date[1] !== null) {
                text += date[1].format('YYYY-MM-DD');
            }

            $box.text(text);
        }

        // Default Calendar
        $('.calendar').pignoseCalendar({
            select: onClickHandler,
            disabledDates: ['2016-11-21', '2016-11-22'],
            disabledRanges: [['2016-11-01', '2016-11-09']],
            disabledWeekdays: [0, 5],
            maxDate:  '2016-11-27'
        });
    });
    //]]>
    </script>
</head>
<body>
    <div id="wrapper">
        <div class="header">
            <h1>PIGNOSE Calendar</h1>
            <h4 class="version">Latest version <strong></strong></h4>
        </div>
        <div id="basic" class="article">
            <h3><span>Calendar</span></h3>
            <h4>PIGNOSE Calendar is beautiful and eidetic jQuery date picker plguin.</h4>
            <div class="calendar"></div>
            <div class="box"></div>
        </div>
    </div>
</body>
</html>

Class name system be made really easy.

You only know base units of each options(weekdays, multiple-ranges, range etc),

You can customize the style by merging those class like

.pignose-calendar-unit.pignose-calendar-unit-disabled.pignose-calendar-unit-disabled-weekdays a

You can check this class by by clicking with inspector tool of your browser,

Thank you and If you have any question, Just tell me 😄

I think i will may watch this issue quite a while 👀

daranaveen007 · 2016-11-23T13:59:52Z

I'm speechless Mr. @KennethanCeyer You done a awesome job. Thanks for the quick support. Really I'm too busy, that's why giving this late reply.

KennethanCeyer · 2016-11-23T15:15:23Z

It's good to hear from you @daranaveen007 😄

If you have other problem of this.

Please just send a new issue~

daranaveen007 closed this as completed Nov 5, 2016

daranaveen007 reopened this Nov 5, 2016

daranaveen007 changed the title ~~How to disable particular range?~~ How to disable multiple ranges (sequential, non-sequential)? Nov 7, 2016

daranaveen007 added the request: feature label Nov 7, 2016

KennethanCeyer mentioned this issue Nov 7, 2016

When enabling 'multiple' property for my Calendar as I assigned it to a textbox, it returns null when selecting a single date.., and next it goes stuck entire browser. May I did something wrong with it?? #10

Closed

KennethanCeyer closed this as completed Nov 22, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to disable multiple ranges (sequential, non-sequential)? #11

How to disable multiple ranges (sequential, non-sequential)? #11

daranaveen007 commented Nov 5, 2016 •

edited

Loading

daranaveen007 commented Nov 5, 2016 •

edited

Loading

KennethanCeyer commented Nov 5, 2016

daranaveen007 commented Nov 7, 2016

KennethanCeyer commented Nov 7, 2016

daranaveen007 commented Nov 7, 2016 •

edited

Loading

daranaveen007 commented Nov 7, 2016

daranaveen007 commented Nov 7, 2016

KennethanCeyer commented Nov 7, 2016 •

edited

Loading

KennethanCeyer commented Nov 7, 2016 •

edited

Loading

daranaveen007 commented Nov 8, 2016

daranaveen007 commented Nov 8, 2016

daranaveen007 commented Nov 8, 2016

KennethanCeyer commented Nov 8, 2016

daranaveen007 commented Nov 8, 2016

daranaveen007 commented Nov 8, 2016

daranaveen007 commented Nov 8, 2016

KennethanCeyer commented Nov 9, 2016

daranaveen007 commented Nov 9, 2016

KennethanCeyer commented Nov 9, 2016

KennethanCeyer commented Nov 9, 2016

daranaveen007 commented Nov 10, 2016

daranaveen007 commented Nov 10, 2016

KennethanCeyer commented Nov 14, 2016

KennethanCeyer commented Nov 14, 2016 •

edited

Loading

daranaveen007 commented Nov 23, 2016

KennethanCeyer commented Nov 23, 2016

How to disable multiple ranges (sequential, non-sequential)? #11

How to disable multiple ranges (sequential, non-sequential)? #11

Comments

daranaveen007 commented Nov 5, 2016 • edited Loading

daranaveen007 commented Nov 5, 2016 • edited Loading

KennethanCeyer commented Nov 5, 2016

daranaveen007 commented Nov 7, 2016

KennethanCeyer commented Nov 7, 2016

daranaveen007 commented Nov 7, 2016 • edited Loading

daranaveen007 commented Nov 7, 2016

daranaveen007 commented Nov 7, 2016

KennethanCeyer commented Nov 7, 2016 • edited Loading

KennethanCeyer commented Nov 7, 2016 • edited Loading

daranaveen007 commented Nov 8, 2016

daranaveen007 commented Nov 8, 2016

daranaveen007 commented Nov 8, 2016

KennethanCeyer commented Nov 8, 2016

daranaveen007 commented Nov 8, 2016

daranaveen007 commented Nov 8, 2016

daranaveen007 commented Nov 8, 2016

KennethanCeyer commented Nov 9, 2016

daranaveen007 commented Nov 9, 2016

KennethanCeyer commented Nov 9, 2016

KennethanCeyer commented Nov 9, 2016

daranaveen007 commented Nov 10, 2016

daranaveen007 commented Nov 10, 2016

KennethanCeyer commented Nov 14, 2016

KennethanCeyer commented Nov 14, 2016 • edited Loading

daranaveen007 commented Nov 23, 2016

KennethanCeyer commented Nov 23, 2016

daranaveen007 commented Nov 5, 2016 •

edited

Loading

daranaveen007 commented Nov 5, 2016 •

edited

Loading

daranaveen007 commented Nov 7, 2016 •

edited

Loading

KennethanCeyer commented Nov 7, 2016 •

edited

Loading

KennethanCeyer commented Nov 7, 2016 •

edited

Loading

KennethanCeyer commented Nov 14, 2016 •

edited

Loading