how to reset input value attribute

Question

I'm trying to reset the value of the input once i click a date in the datepicker, my goal is to add a single date in the array once a click a date, what happening is once i click a date for the multiple times, it still holds the previous value of the input.

var date = new Date();
var days = [];

$(document).ready(function(){
  $("#inputMultiDate").datepicker({
    autoclose: true,
    todayHighlight: true,
    multidate: true,
    format: 'dd-mm-yyyy'
  }).on("changeDate", function(){
    dates = $('#inputMultiDate').val().split(',');
    days.push(dates);
     $('#inputMultiDate').attr('value', '');  
    console.log(days);
  });;
});

<input type="text" id="inputMultiDate" class="form-control" placeholder="Pick the multiple dates">

Stephan T. · Accepted Answer · 2019-01-18 08:04:43Z

1

You can easily access the event by using datepicers onSelect:

var date = new Date();
var days = [];

$(document).ready(function() {
  $("#inputMultiDate").datepicker({
    autoclose: true,
    todayHighlight: true,
    multidate: true,
    format: 'dd-mm-yyyy',
    onSelect: function(dateText) {
      dates = $('#inputMultiDate').val().split(',');
      days.push(dates);
      $('#inputMultiDate').attr('value', '');
      console.log(days);
      let value = $("#inputMultiDate").datepicker("getDate");
      console.log(value);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input type="text" id="inputMultiDate" class="form-control" placeholder="Pick the multiple dates">

edited Jan 18, 2019 at 8:04

answered Jan 18, 2019 at 7:33

Stephan T.

6,1243 gold badges26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Josel Parayno Over a year ago

may i know what's the difference between "on" and "onSelect"?

Stephan T. Over a year ago

.on() listens to the events of the DOM, onSelect is the event listener specifically for the datePicker as defined here. The documentation states, that the datepicker selection doesn't fire any events to the outside. Take a look at the api and see the column events.

Stephan T. Over a year ago

So instead of binding the datepicker $("#inputMultiDate") to an event, you can add an event handler directly to the specific selection event.

Josel Parayno Over a year ago

i also wan't to know why does the input holds the previous value even i use the attr.val('') or .val('[)?

Stephan T. Over a year ago

If you want to get the current value of datepicker, use let value = $("#inputMultiDate").datepicker("getDate"); instead

Onurgule · Accepted Answer · 2019-01-18 07:28:32Z

0

$('#inputMultiDate').val('')

In jQuery "val" is a get function also a set function. You can set your input with val('').

answered Jan 18, 2019 at 7:28

Onurgule

7371 gold badge8 silver badges22 bronze badges

1 Comment

Josel Parayno Over a year ago

i already tried this one, but the problem is it still holds the previous date of the input and store it into my array, as a result ex 0:["02-01-2019"] 1:["02-01-2019", "03-01-2019"]

F. Ception · Accepted Answer · 2019-01-18 07:30:43Z

0

Try to call the new Date() function every time the date changes. Currently, you have one date as the page loads.

var date = new Date();
var days = [];

$(document).ready(function(){
  $("#inputMultiDate").datepicker({
    autoclose: true,
    todayHighlight: true,
    multidate: true,
    format: 'dd-mm-yyyy'
   }).on("changeDate", function(){
    date = new Date();
    dates = $('#inputMultiDate').val().split(',');
    days.push(dates);
    $('#inputMultiDate').attr('value', '');  
    console.log(days);
  });;
});

answered Jan 18, 2019 at 7:30

F. Ception

351 silver badge9 bronze badges

1 Comment

Josel Parayno Over a year ago

same output sir

Collectives™ on Stack Overflow

how to reset input value attribute

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related