How to make this with javascript?

JavaScript
1

Hello,
this time i do not have anything my own and could not find also!

The idea is if user from first date input pick
today date lets say 2017-06-29 than automatically would not allow dates that are over 7 calendar days
so now he could select max to 2017-07-06 (including)

How could i do that?And is it possible?

2

Depends on the date picker used.

3

@Dormilich its simple date input <input type="date">

4

then you have to validate the second input based on the first input (hooking into the second field’s change event) and reject the second input if the validation fails.

1 Like
5

@Dormilich any idea why this is not working? http://jsfiddle.net/zydZ2/202/

6

since I can’t find the console (where errors are logged) I would stab a guess at the invalid date format.

7

include the latest jquery with it then it will work.

8

In fiddle it doesnt work

9

I m totally bad at javascript :smiley:

now i got this but there nothing happens

10

The date input actually has a max-attribute:

<input type="date" max="2017-07-06">

Ideally you’d set that max-value on the backend, so that there is no JS required at all… also, formatting dates is much easier with PHP. But you could of course set it with JS as well:

var dateInput = document.querySelector('[type=date]')
var date = new Date()

date.setDate(date.getDate() + 7)

var maxDate = date.getFullYear() + 
  '-' + (date.getMonth() + 1).toString().padStart(2, '0') + 
  '-' + date.getDate().toString().padStart(2, '0')

dateInput.max = maxDate
11

As i need on second input same date+7 days how can max help me?

12

Ah sorry, yes then you’ll have to set max dynamically with JS like above (but within a change handler as @Dormilich suggested).

13

I have now this: http://jsfiddle.net/fmdwv/262/

Well i now need just to +7 days to $(".second").val($(this).val()); but i cant manage to do it!?

And then i need to disable all other days after last date in second input.

14

You don’t want to set the value of the second input, but the max value – adjusting the snippet I posted earlier, it might look like

var firstDate = document.querySelector('.first')
var secondDate = document.querySelector('.second')

firstDate.addEventListener('change', function () {
  var date = new Date(this.value)

  date.setDate(date.getDate() + 7)

  var maxDate = date.getFullYear() + 
    '-' + (date.getMonth() + 1).toString().padStart(2, '0') + 
    '-' + date.getDate().toString().padStart(2, '0')
    
  secondDate.max = maxDate
})
1 Like
15

Oh wow i would never write such a javascript code :stuck_out_tongue:
Looks like it works!
I need to add +6 days as i need it to be 7 calendar days?correct?

Also why i wanted to set other input?Well then each time user edits first input he will never be able to enter date 7+ days.
In your code if i edit first input i can get more than 7 days

16

True, if you change the 1st input to some earlier date, the 2nd won’t update automatically (but it would still get marked as invalid when you try to submit the form). However you might also just set the 2nd value to the new maxDate when the 1st changes and the 2nd isn’t valid any more – you can compare date objects with < and > just like numbers:

firstDate.addEventListener('change', function () {
  var date = new Date(this.value)
  var current = new Date(secondDate.value)

  date.setDate(date.getDate() + 7)

  var maxDate = date.getFullYear() + 
    '-' + (date.getMonth() + 1).toString().padStart(2, '0') + 
    '-' + date.getDate().toString().padStart(2, '0')
    
  secondDate.max = maxDate
  
  if (current > date) {
  	secondDate.value = maxDate
  } 
})
1 Like
17

Ok i think this is sorted out!Thanks everyone :slight_smile:

18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.