How to disable the already selected date for next date box in J.T.Sage DateBox

Question

I my application i use jt.sage DateBox. I want to disable the already selected datepicker for next date box fields for example my Date1 is like 13.08.14 my other date box fields need to select after 13.08.14 (NOTE : depends on previous date fields).

Here is the FIDDLE FOR date box demo.

It has lot of options like prevent tomorrow and yesterday day but not include after select the current date

        <label for="mydate">Date 1</label>
        <input  id="date1" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true}' onclick="filterDate(this.id);"/>
        <label for="mydate">Date 2</label>
        <input  id="date2" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true}' onclick="filterDate(this.id);"/>
        <label for="mydate">Date 3</label>
        <input  id="date3" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true}' onclick="filterDate(this.id);"/>
        <label for="mydate">Date 4</label>
        <input  id="date4" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true}' onclick="filterDate(this.id);"/>
        <label for="mydate">Date 5</label>
        <input  id="date5" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true}' onclick="filterDate(this.id);"/>

How to do this please help to solve this one.

[look this example](http://jqueryui.com/datepicker/#date-range) — Aliaksei Bulhak, Aug 13 '14 at 07:24
@AlekseiBulgak thanks but i am using this for mobile application so i need above mentioned one.. — Vini, Aug 13 '14 at 07:27
try this link it might help: http://stackoverflow.com/questions/18734957/how-set-end-day-based-on-start-day-in-jquery-mobile-date-picker/18736133#18736133 — Sheetal, Aug 13 '14 at 08:29
@Sheetal thanks i dont wnat to select already selected date..in your fiddle i am able to select previously selected date.. — Vini, Aug 13 '14 at 08:39
You can disable a datebox like this: $("#date1").datebox("disable"); To re-enable it: $("#date1").datebox("enable"); — ezanker, Aug 13 '14 at 13:54
@ezanker thanks for your reply..not disable the date box..need to disable the previously selected dates..(NOTE: when date fields are dynamically generated). — Vini, Aug 14 '14 at 06:03
You can prevent earlier dates like this: http://jsfiddle.net/ezanker/yDyqs/12/. For dynamically generated, assign a common class and use event delegation. — ezanker, Aug 14 '14 at 14:08
@ezanker thanks for your reply...i did what you mention...there is no way to disable dates in datpicker?... — Vini, Aug 19 '14 at 15:15

score 1 · Answer 1 · answered Aug 13 '14 at 08:55

1

Hope this helps you : http://jsfiddle.net/QTuma/52/

Just change in the logic for difference calculation:

Start Date
// Get the difference
          var diff = parseInt((((startDate.getTime() - todaysDate.getTime()) / lengthOfDay)+2)*-1,10); 

And End Date

 // Get the difference
          var diff = parseInt((((endDate.getTime() - todaysDate.getTime()) / lengthOfDay)),10); 

This will work for the statement 'example my start date is like 13.08.14 my end date box fields need to select after 13.08.14 .'

answered Aug 13 '14 at 08:55

Sheetal

1,368
1
9
15

thanks for your effort +1 and my time format is like 13.08.2014 and also i generate the date fields dynamically(i dont how many date field present any idea about this) – Vini Aug 13 '14 at 09:01
Format can be set using these data-options – Sheetal Aug 13 '14 at 09:13

score -1 · Answer 2 · answered Aug 13 '14 at 08:38

-1

I have updated your code based on below reference,

http://jsfiddle.net/ktbcP/528/

This should solve your issue,

http://dev.jtsage.com/jQM-DateBox/doc/6-2-link/

Hope it helps !!

answered Aug 13 '14 at 08:38

user3848478

27
3

thanks i will go through..but i am using older version of datebox – Vini Aug 13 '14 at 08:45

How to disable the already selected date for next date box in J.T.Sage DateBox

2 Answers2

Linked