Showing div only when current time is more than startDate and less than endDate-CodePudding

I want to display a div only when its time is bigger than startDate and less than endDate. For startDate and endDate itself I got from api data that i have, the format is like the variable below. I've made the code as below, even though the day is more than startDate but why the div doesn't appear? Is it because the time format is different?

$(document).ready(function(){
  let today = new Date()
  let startDate = "2021-12-13T00:00 07:00"
  let endDate = "2021-12-16T00:00 07:00"
  
  console.log(today)
  
  if(today > startDate && today < endDate){
    console.log('true')
    $('.date').css('display', 'block')
  }else{
    console.log('false')
  }
})

.date{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >Date is bigger than startDate and less than endDate</div>

CodePudding user response：

$(document).ready(function(){
  let today = new Date()
  let startDate = new Date("2021-12-13T00:00 07:00")
  let endDate = new Date("2021-12-16T00:00 07:00")
  
  console.log(today)
  
  if(today > startDate && today < endDate){
    console.log('true')
    $('.date').css('display', 'block')
  }else{
    console.log('false')
  }
})

.date{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >Date is bigger than startDate and less than endDate</div>