CODEWITHSUNDEEP
javascriptjquery
Ken Verganio
Ken Verganio

Reputation: 655

how to remove the leading zeros in date format as string

im using jquery calendar from here it basically change the background color of the disabled dates in red

 <input id="iDate">

<script>
  var unavailableDates = ["09-10-2018", "14-09-2018", "15-10-2018"];

  function unavailable(date) {
      dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
      if ($.inArray(dmy, unavailableDates) == -1) {
          return [true, ""];
      } else {
          return [false, "", "Unavailable"];
      }
  }

  $(function() {
      $("#iDate").datepicker({
          dateFormat: 'd-m-yy',
          beforeShowDay: unavailable
      });

  });
</script>

as you can see i have 3 disabled dates, the "09-10-2018" and "14-09-2018" does not disable in my calendar because of the leading zeros of day and month but when i try to remove the zeros of the day and month its working.

i also look in here but i dont undestand

by the way the unavailaDates are coming from database so its not hardcoded thats why it generate leading zeros in day and month.

i appreciate whoever help me. im a beginner sorry for bad english

Upvotes: 1

Views: 3459

Answers (3)

terary
terary

Reputation: 1108

I think @Bryanh maybe on to something. But direct answer to your question is:

let d = '09-10-2018';
let newD = d.split('-').map(n=>{
    return parseInt(n)
}).join('-')
console.log(newD);

Upvotes: 0

rafaelcastrocouto
rafaelcastrocouto

Reputation: 12161

You can use padStart and compare both formats:

var unavailableDates = ["01-10-2018", "2-10-2018", "13-10-2018"];

function unavailable(date) {
    var dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
    var dmy2 = ((date.getDate()+'').padStart(2,'0')) + "-" + (((date.getMonth() + 1)+'').padStart(2,'0')) + "-" + date.getFullYear();
    if ($.inArray(dmy, unavailableDates) == -1 && $.inArray(dmy2, unavailableDates) == -1) {
        return [true, ""];
    } else {
        return [false, "", "Unavailable"];
    }
}

$(function() {
    $("#iDate").datepicker({
        dateFormat: 'dd-mm-yy',
        beforeShowDay: unavailable
    });

});
.ui-datepicker td.ui-state-disabled>span{background:#c30;}
.ui-datepicker td.ui-state-disabled{opacity:100;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link  rel="stylesheet" type="text/css"  href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/black-tie/jquery-ui.css"/>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js"></script>

<input id="iDate">

Upvotes: 0

BryanH
BryanH

Reputation: 6062

The issue is that date.getDate() and date.getMonth() return integers, which cannot have leading zeros, therefore there will never be a match.

Simple fix, create a function:

function pad(num) {
  var s = "" + num;
  if ( num < 10 ) {
    s = "0" + num; 
  }
  return s;
}

Then do:

dmy = pad(date.getDate()) + "-" + pad(date.getMonth() + 1) +
      "-" + date.getFullYear();

Upvotes: 1

Related Questions