Set end date a day before the value date jquery

Question

I am trying to set the End date for registration to be 1 day before the event start date. For this, I am trying below function but still the end day is getting selected on the start of day event. E.g. If event_start_date is 1st May then I want date-picker to allow event_registration_deadline max to be on 30th April but in actual the date-picker is allowing to select 1st May but disabling date after that. Function:

if(jQuery( "#event_start_date" ).length > 0)
    {
        jQuery('input#event_start_date').datepicker({
            format : 'yyyy-mm-dd',
            autoclose : true,
            todayHighlight: true  
        }).on('changeDate', function(){
            var aDayBefore = new Date(jQuery(this).val()-1);
            jQuery('#event_registration_deadline').datepicker('setEndDate', aDayBefore);
        });
    }

I am trying to get this by setting up -1 on below line code:

var aDayBefore = new Date(jQuery(this).val()-1);

instead try this `var aDayBefore = new Date(jQuery(this).val()); aDayBefore.setDate(aDayBefore.getDate()-1);` — warl0ck, Apr 27 '17 at 10:44
This is not working.. Instead it is allowing to select any date now either it is before or after the start date. — Athar K, Apr 27 '17 at 10:53
this means you might have wrong date format from `jQuery(this).val()` have you tried to see if it actually creates a new date object with `var aDayBefore = new Date(jQuery(this).val()); ` ? or throws error ? — warl0ck, Apr 27 '17 at 10:58
then `aDayBefore.setDate(aDayBefore.getDate()-1);` and `aDayBefore.toLocaleDateString();` this will return the date in format mm/dd/yyyy — warl0ck, Apr 27 '17 at 11:18
earlier one would have returned in seconds which might have caused the earlier said problem — warl0ck, Apr 27 '17 at 11:19
try to print them to console `var aDayBefore = new Date(jQuery(this).val()); ` then `aDayBefore.setDate(aDayBefore.getDate()-1);` and finally `aDayBefore.toLocaleDateString();` and check if it gives the date you want. — warl0ck, Apr 27 '17 at 11:50
I have added this: `var FinalDay = new Date(aDayBefore.getDate(jQuery(this).val()) - 1); console.log('Date:' + FinalDay);` On console, I am getting this: `Date:Thu Jan 01 1970 05:00:00 GMT+0500 (Pakistan Standard Time)` — Athar K, Apr 27 '17 at 12:58
`var FinalDay = new Date(aDayBefore.getDate(jQuery(this).val()) - 1);` isn't right. Look carefully at what both me and warl0ck have told you to do: `var aDayBefore = new Date(jQuery(this).val()); aDayBefore.setDate(aDayBefore.getDate()-1);` and understand the difference. In your example, you're getting the _day of the month_ and subtracting 1 from it. Then passing that single number (not a whole date) to the date constructor. No wonder you're only getting a date from 1970. — ADyson, Apr 27 '17 at 14:28
glad it worked, I have posted my answer as well and the reference in case you need to modify it further as per your need — warl0ck, Apr 27 '17 at 16:16

score 2 · Answer 1 · edited May 23 '17 at 12:17

2

To set the registration end date one day before the given date, similar to as already answered here you should do as:

var aDayBefore = new Date(jQuery(this).val());
aDayBefore.setDate(aDayBefore.getDate()-1);
var FinalDay = new Date(aDayBefore.toLocaleDateString());

Now FinalDay contains your date object of one day before the date what jQuery(this).val() is giving. Hope this helps.

edited May 23 '17 at 12:17

Community

1
1

answered Apr 27 '17 at 16:16

warl0ck

3,356
4
27
57

ADyson · Accepted Answer · 2017-04-27T14:34:10.843

1

var aDayBefore = new Date(jQuery(this).val()-1);

Assuming jQuery(this).val() is a string in yyyy-mm-dd format, then this operation will produce an invalid date object. You can't simply subtract 1 from this value -

a) How does it know you want to subtract 1 day? You haven't specified (and can't specify) any unit of time.

b) Even if subtracting 1 from the date was meaningful, it's slightly irrelevant, because you aren't actually subtracting from the Date object, you're subtracting from the string representation of a date, before you attempt to parse it into a Date. jQuery(this).val() is a string, so trying to subtract from it is invalid and will produce NaN (not a number).

I think what you want is this:

var aDayBefore = new Date(jQuery(this).val());
aDayBefore.setDate(aDayBefore.getDate()-1);

See the JS Date reference for more information on how to properly manipulate JS dates (and the pitfalls involved!): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

Here's a working version using this code: https://jsfiddle.net/rzjd2n90/

edited Apr 27 '17 at 14:34

answered Apr 27 '17 at 10:52

ADyson

57,178
14
51
63

Not working.. dont know whats going wrong.. infact it is not allowing to select any date. – Athar K Apr 27 '17 at 11:20
I dont have any idea because its a 3rd party plugin. – Athar K Apr 27 '17 at 12:59
...you don't know what plugin you're using??? You must at least be able to see what files are included in your page? Otherwise how do you know which commands to run or how to set it up? I ask mainly because the jQueryUI one I linked to is very popular, but the options you're giving it don't match the API, so I'm assuming it's something else. I wanted to check the documentation to see if you're calling the methods correctly, or what data you need to pass in, but without knowing which of the many datepicker plugins you're using, that's impossible. – ADyson Apr 27 '17 at 13:04
its a bootstrap datepicker. I found it. – Athar K Apr 27 '17 at 13:21
Ok so the date you pass to the setEndDate method must be in the local timezone, or parseable as per the format you've set: https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html#setenddate – ADyson Apr 27 '17 at 14:22
@AtharK I've added a working JSFiddle example using my code. If yours isn't working, you must have made a mistake in the way you've written your version (perhaps the mistake I've highlighted in the other comments, above?) – ADyson Apr 27 '17 at 14:34
So what should be done on my case now? I am not that much expert in this. Thanks for your help. – Athar K Apr 27 '17 at 14:35
No. I am not making any mistake. Its not just picking up. – Athar K Apr 27 '17 at 14:35
what does "not picking up" mean? Don't make vague statements when we are talking about precise details. There **must** be a difference of some kind between our versions, otherwise why would mine work and not yours? – ADyson Apr 27 '17 at 14:36
I have tried your version but it's not working. In fact it is allowing to select any value when I use your fiddle. – Athar K Apr 27 '17 at 14:38
works perfectly for me. See this screenshot - notice that the dates after 16th April for the "Deadline" datepicker are disabled (when 17th April is entered as the start date): http://imgur.com/a/fjSrQ . What browser are you using? Are there any errors in your console when you select the date? – ADyson Apr 27 '17 at 14:44
I am using Google Chrome. – Athar K Apr 27 '17 at 14:47
what version of Chrome? I'm using Chrome 57.0.2987.133 – ADyson Apr 27 '17 at 14:47
I will check for errors and will let you know. Thanks – Athar K Apr 27 '17 at 14:48
1

I dont know how, but your solution worked. I deleted all the code and re wrote. Then it worked. I think there was any hidden character in between copy paste. Anyhow many thanks for your help. – Athar K Apr 27 '17 at 16:10

Set end date a day before the value date jquery

2 Answers2