How to add multiple strings to input?

Question

I am running bootstrap datepicker, with an inline calendar and a date range. The following works in terms of front end buttons highlighting, but the input isn't showing the value range`.

NOTE I am looking to get the comma separated years only like 2014, 2018 and we can only select two years max as per a range.

$('#sandbox-container').datepicker({ 
  format: "yyyy", 
  startView: 1, 
  viewMode: "years", 
  minViewMode: "years", 
  minViewMode: "years", 
  multidate: true, 
  multidateSeparator: ", ", 
  autoClose: true, 
}).on("changeDate",function(event){ 
  var dates = event.dates, elem = $('#sandbox-container'); 
  if(elem.data("selecteddates") == dates.join(",")) return; //To prevernt recursive call, that lead to lead the maximum stack in the browser. 
  if(dates.length>2) dates=dates.splice(dates.length-1); 
  dates.sort(function(a,b){return new Date(a).getTime() - new Date(b).getTime()}); 
  elem.data("selecteddates",dates.join(",")).datepicker('setDates', dates); 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>

<div id="sandbox-container"></div> 
<input type="text" id="date" value="">

mbrightenfield · Accepted Answer · 2018-06-29T00:17:33.863

0

You're not setting the value on the "date" input field. You're setting it on the "sandbox-container" div. Change it to the input field and it will start to populate the text field.

Additionally, I'd check the documentation for the bootstrap datepicker daterange: https://bootstrap-datepicker.readthedocs.io/en/v1.7.1/markup.html#daterange

Here I've made some adjustments to the JS (reference date element and call datepicker show method) and HTML (removed sandbox-container)

$('#date').datepicker({ 
  format: "yyyy", 
  startView: 1, 
  viewMode: "years", 
  minViewMode: "years",
  multidate: true, 
  multidateSeparator: ", ", 
  autoClose: false,
}).on("changeDate",function(event){ 
  var dates = event.dates, elem = $('#date');
  if(elem.data("selecteddates") == dates.join(",")) 
   return; //To prevernt recursive call, that lead to lead the maximum stack in the browser. 
  if(dates.length>2)
   dates=dates.splice(dates.length-1); 
  dates.sort(function(a,b){return new Date(a).getTime() - new Date(b).getTime()}); 
  elem.data("selecteddates",dates.join(",")).datepicker('setDates', dates);
});
$("#date").datepicker("show");

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>


<input type="text" id="date" value="">

edited Jun 29 '18 at 00:17

answered Jun 28 '18 at 23:28

mbrightenfield

66
5

Hi, thanks, this is more of a comment, could you elaborate more into a coding answer? Thanks – rob.m Jun 28 '18 at 23:29
if I set `elem = $('#sandbox-container');` I get `01/01/2014,01/01/2019` while I should be getting the years like `2014,2019` – rob.m Jun 28 '18 at 23:30
`var dates = event.dates, elem = $('#sandbox-container');` needs to be `var dates = event.dates, elem = $('#date');` – mbrightenfield Jun 28 '18 at 23:31
yes but that 's not giving the years only (see NOTE in the updated question) – rob.m Jun 28 '18 at 23:31
also by changing as you suggested, then I am able to select more than 2 years, while I need a range between two only as my code does – rob.m Jun 28 '18 at 23:34
I've adjusted the answer with a code snippet that should have your desired results. – mbrightenfield Jun 29 '18 at 00:00
yes looks like it is working well, yet it needs to be inline as per my example, but you're getting there. How can we make this inline taking it from the way i do maybe? – rob.m Jun 29 '18 at 00:01
Brilliant! Thanks a lot – rob.m Jun 29 '18 at 00:17
You'll want to call the [show](https://bootstrap-datepicker.readthedocs.io/en/v1.7.1/methods.html#show) method. Also, you'll want to set autoClose to false. – mbrightenfield Jun 29 '18 at 00:17
this question answers this other question from other another user, thank a lot https://stackoverflow.com/questions/36722158/single-calendar-date-range-picker – rob.m Jun 29 '18 at 00:19
Great. Glad I could help. – mbrightenfield Jun 29 '18 at 00:22
mm but it's a hack tho, it's not embedded, we need the calendar to be inline, see code in the question – rob.m Jun 29 '18 at 00:23
resolved giving `$('#sandbox-container').datepicker({ ` and then `var dates = event.dates, elem = $('#date'); ` removed the `show()` line and the html is `
` – rob.m Jun 29 '18 at 00:29

How to add multiple strings to input?

1 Answers1