CODEWITHSUNDEEP
javascripthtmljquery
user17541419
user17541419

Reputation:

NaN in datepicker if nothing is selected

I have a form where I remade the bootstrap datepicker a little by inserting my fields with inputs, everything works as it should.

Now there is the current date by default, if you click on the field, a calendar will appear, if you select a date, then everything is OK, but if you do not select anything, then NaN appears in the month field.

How can I remove this so that if we do not select anything, the current date remains?

// Initialize datepicker
var defaultDate = new Date();

const dp = $("#month").datepicker({ 
    setDate: defaultDate,
    format:'mm dd yyyy',
    todayHighlight: true
});

// Show datepicker on <input> click  
$('.input-wrapper > input').on('click', (e) => dp.datepicker("show"));

// On date change
const y  = document.getElementById('year');
const m  = document.getElementById('month');
const d  = document.getElementById('day');

y.value = defaultDate.getFullYear();
d.value = defaultDate.getDate();
m.value = defaultDate.getMonth() + 1;

dp.on('changeDate',function(ev){
    const date = dp.datepicker('getDate');
    y.value = date.getFullYear();
    d.value = date.getDate();
    dp.datepicker('hide');
    m.value = date.getMonth() + 1;
})

dp.on('hide',function(ev){
    const date = dp.datepicker('getDate');
    m.value = date.getMonth() + 1;
})
label {
      color: #808694;
      font-family: Montserrat;
      font-size: 10px;
      font-weight: bold;
      letter-spacing: 0;
      line-height: 16px;
      text-transform: uppercase;
}


    
input {
      margin-right: 20px;
      box-sizing: border-box;
      outline: none;
      border: none;
      background-color: #F4F5F8;
      width: 50px;
}

.span-wrapper {
        display: flex;
        align-items: flex-end;
      }
      
span {
        
        color: #808694;
        font-family: Montserrat;
        font-size: 8px;
        font-weight: bold;
        letter-spacing: 0;
        line-height: 16px;
        text-transform: uppercase;
        text-align: center;
        width: 50px;
}

.main-content {
  min-height: 10vh;
}

.call-form-item-date {
  margin-top: 100px;
  margin-bottom: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>


<div class="main-content">
  <p>Main content...</p>
  <p>Main content...</p>
  <p>Main content...</p>
  <p>Main content...</p>
  <p>Main content...</p>
  <p>Main content...</p>
</div>

<div class="contacts-call-form">
    <form class="js-form" action="{{ route('send-comment') }}">
        <div class="col-md-6">
            <div class="call-form-item-date">
                <label for="date">Select a date *</label>
                <div class="input-wrapper">
                    <div id="datepickerContainer"></div>
                    <input class="js-form-month" id="month" type="text" name="month">
                    <input class="js-form-day" id="day" type="text" name="day">
                    <input class="js-form-year" id="year" type="text" name="year">
                    <div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy" style="display: none">
                        <input class="form-control" type="text" readonly />
                        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                    </div>
                </div>
        <div class="span-wrapper">
          <span for="month">Month</span>
          <span for="day">Day</span>
          <span for="year">Year</span>
        </div>
            </div>
        </div>
    </form>
</div>

Upvotes: 1

Views: 1300

Answers (1)

jeremy-denis
jeremy-denis

Reputation: 6878

the method dp.datepicker('getDate')return the selected date and not the default date

in that case with no selection the first time you call this method you will get an empty date (like if you do new Date(0))

so date.getMonth will return NAN one way to solve the issue is to don't fill month field if there is no selection

    // Initialize datepicker
    var defaultDate = new Date();

    const dp = $("#month").datepicker({ 
        setDate: defaultDate,
        format:'mm dd yyyy',
        todayHighlight: true
    });

    // Show datepicker on <input> click  
    $('.input-wrapper > input').on('click', (e) => dp.datepicker("show"));

    // On date change
    const y  = document.getElementById('year');
    const m  = document.getElementById('month');
    const d  = document.getElementById('day');

    y.value = defaultDate.getFullYear();
    d.value = defaultDate.getDate();
    m.value = defaultDate.getMonth() + 1;

    dp.on('changeDate',function(ev){
        const date = dp.datepicker('getDate');
        y.value = date.getFullYear();
        d.value = date.getDate();
        dp.datepicker('hide');
        m.value = date.getMonth() + 1;
    })

    dp.on('hide',function(ev){
        const date = dp.datepicker('getDate');
        if (!isNaN(date.getMonth())) {
          m.value = date.getMonth() + 1;
        } else {
          m.value = defaultDate.getMonth() + 1;
        }
    })
    label {
          color: #808694;
          font-family: Montserrat;
          font-size: 10px;
          font-weight: bold;
          letter-spacing: 0;
          line-height: 16px;
          text-transform: uppercase;
    }


        
    input {
          margin-right: 20px;
          box-sizing: border-box;
          outline: none;
          border: none;
          background-color: #F4F5F8;
          width: 50px;
    }

    .span-wrapper {
            display: flex;
            align-items: flex-end;
          }
          
    span {
            
            color: #808694;
            font-family: Montserrat;
            font-size: 8px;
            font-weight: bold;
            letter-spacing: 0;
            line-height: 16px;
            text-transform: uppercase;
            text-align: center;
            width: 50px;
    }

    .main-content {
      min-height: 10vh;
    }

    .call-form-item-date {
      margin-top: 100px;
      margin-bottom: 100px;
    }
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>


    <div class="main-content">
      <p>Main content...</p>
      <p>Main content...</p>
      <p>Main content...</p>
      <p>Main content...</p>
      <p>Main content...</p>
      <p>Main content...</p>
    </div>

    <div class="contacts-call-form">
        <form class="js-form" action="{{ route('send-comment') }}">
            <div class="col-md-6">
                <div class="call-form-item-date">
                    <label for="date">Select a date *</label>
                    <div class="input-wrapper">
                        <div id="datepickerContainer"></div>
                        <input class="js-form-month" id="month" type="text" name="month">
                        <input class="js-form-day" id="day" type="text" name="day">
                        <input class="js-form-year" id="year" type="text" name="year">
                        <div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy" style="display: none">
                            <input class="form-control" type="text" readonly />
                            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                        </div>
                    </div>
            <div class="span-wrapper">
              <span for="month">Month</span>
              <span for="day">Day</span>
              <span for="year">Year</span>
            </div>
                </div>
            </div>
        </form>
    </div>

Upvotes: 3

Related Questions