CODEWITHSUNDEEP
jquerydatetimedatepickerjquery-ui-datepicker
L.Anush
L.Anush

Reputation: 101

Datepicker doesn't hide after selecting date

What I want to do is when I select the year from a the date picker, picker need be closed.

following are the code segment which I had implement. 

 $('.bootstrap-tagsinput input[type="text"]').datepicker().on('changeDate', function()({
            minViewMode: 2,
            format: 'yyyy',
            endDate: '+0y',
            startDate: '2016',
            $(this).datepicker('hide');
            onSelect: function(dateText) {
            $('#yearPicker').tagsinput('add', dateText); 

          }
        });

This gives me a console error called

Uncaught SyntaxError: Unexpected token (

Can anyone help me to solve this ? Thanks.

Upvotes: 1

Views: 1557

Answers (2)

Sorix
Sorix

Reputation: 918

Your problem is probably related to the fact that you are mixing two phases here: the initialization of the datepicker(1) and an event listener added on it(2). The 'changeDate' is an event.

(1) you need to initialize your datepicker

$('.bootstrap-tagsinput input[type="text"]').datepicker({
        minViewMode: 2,
        format: 'yyyy',
        endDate: '+0y',
        startDate: '2016',
        onSelect: function(dateText) {
           $('#yearPicker').tagsinput('add', dateText); 
      }
    });

(2) this part might be useless, since the datepicker should close by default on date pick

$('.bootstrap-tagsinput input[type="text"]').on('changeDate', function(){
    $(this).datepicker('hide');
})

Please read the documentation in details in order to better understand how this works.

Upvotes: 1

Sooriya Dasanayake
Sooriya Dasanayake

Reputation: 1156

Try this way..

$(document).ready(function () {

    $('#example1').datepicker({
        format: "yyyy",
        autoclose: true
    });
    
    $('#example2').datepicker({
        format: "yyyy"
    }).on('change', function () {
        $('.datepicker').hide();
    });
});
<div class="container">
    <div class="hero-unit">
        <input type="text" placeholder="Sample 1: Click to show datepicker" id="example1">
    </div>
    <div class="hero-unit">
        <input type="text" placeholder="Sample 2: Click to show datepicker" id="example2">
    </div>
</div>
<script rel="javascript" type="text/javascript" href="js/jquery-1.11.3.min.js"></script>

Upvotes: 0

Related Questions