How to change date dynamically without opening calendar

Question

I'm using bootstrap-datepicker and created a function that resets the datepicker date to today, everything works fine except, when I call my function, it automatically opens the calendar box which stays on page and doesn't disappear even when lose focus. How can I avoid this issue, or not open calendar automatically when date reset (I tried some solutions from stack but nothing worked..)

date picker config

$('#sandbox-container .input-group.date').datepicker({
  language: "he",
  rtl: true,
  autoclose: true, 
  todayHighlight: true,
  format: "dd/mm/yyyy"
});

function that resets date

function resetStartDatePicker() {
  //option 1 - didn't work
  $("#sandbox-container").focusout(function () {
    $("#sandbox-container").hide;
  });

  //option 2 - didn't work
  $("#sandbox-container ~ .ui-datepicker").hide();

  //option 3 - didn't work
  $("#sandbox-container").datepicker().on('changeDate', function () {
    $(this).blur();
  });

  //option 4 - didn't work
  $.fn.datepicker.defaults.autoclose = true;
  var today = getToday();                      
  $("#sandbox-container").find("input").val(today.a);     
  $("#sandbox-container").datepicker("update", today.b);                    
}

HTML

<div id="sandbox-container" >   
  <div id="positionSorter" style="margin-top:10%">
    <a id="anotherDatelink" title="reset" class="pull-left" href="#" onclick="resetStartDatePicker()">reset</a>
  </div>

  <div class="input-group date" data-provide="datepicker" style="float:right">
    <input type="text" class="form-control  @semanticClass"  name="@Model.Name" id="@Model.Id" title="@Model.Name" value="@val">
    <div class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </div>
  </div>
</div>

Please do provide any code samples or fiddle if you can. So that users could understand what is the problem. Also which date picker are you using too. — Biby Augustine, May 16 '17 at 06:56
this should hide it: $("#sandbox-container input").datepicker('hide'); — majita, May 16 '17 at 07:14
Possible duplicate of [bootstrap datepicker today as default](http://stackoverflow.com/questions/15423467/bootstrap-datepicker-today-as-default) — Yashar Aliabbasi, May 16 '17 at 07:24

Biby Augustine · Answer 1 · 2017-05-16T07:30:07.617

You are attaching date picker to the div element, actually that is the problem.

give id to text box like

<input id="txtDate" type="text" class="form-control  @semanticClass"  name="@Model.Name" id="@Model.Id" title="@Model.Name" value="@val">

and define in javascript like

$('#txtDate').datepicker({
                language: "he",
                rtl: true,
                autoclose: true, 
                todayHighlight: true,
                format: "dd/mm/yyyy"
            });

or if you want to use like as you provided just change like

$('#sandbox-container input').datepicker({
                language: "he",
                rtl: true,
                autoclose: true, 
                todayHighlight: true,
                format: "dd/mm/yyyy"
            });

above code finds input element from the sandbox-container div.

tried it and it showes the calendar from first second... and doesn't hide it :/ — Damkulul, May 16 '17 at 07:41

score 1 · Answer 2 · answered May 16 '17 at 07:33

1

Here is a JSFiddle that shows how to set a value and then hide it -

 $('#anotherDatelink').on('click', function(e) {
   $("#sandbox-container").find("input").val('01/01/2010');
   $("#sandbox-container .input-group").datepicker('hide');
 });

answered May 16 '17 at 07:33

majita

1,278
14
24

score 0 · Answer 3 · answered May 16 '17 at 07:47

0

Well after Inspecting the datepicker what solved my problem was :

 $(".datepicker-days").hide();

thanks for the help, I liked all your answers

answered May 16 '17 at 07:47

Damkulul

1,406
2
25
59

How to change date dynamically without opening calendar

3 Answers3