I'm a newbie in using JavaScript so I really don't know how to create a datepicker input field that will allowed multiple select. I did some searching but can't find a solution related to my case. Can you please help me? Thank you so much =)

This is what I tried so far

<script type="text/javascript" language="javascript">
     function pageLoad(sender, args) {
         $(document).ready(function() {
             $("#<%=datepicker.ClientID %>").datepicker();
             $(".ui-datepicker-trigger").mouseover(function() {
                 $(this).css('cursor', 'pointer');
             });
         });
     }
     $(function() {
         $("#datepicker").datepicker();
     });
</script>

<input type = "text" id = "datepicker">

This is working in a single select only. What I want to do is to be able to select a multiple dates. Thanks!

I'm a newbie in using JavaScript so I really don't know how to create a datepicker input field that will allowed multiple select. I did some searching but can't find a solution related to my case. Can you please help me? Thank you so much =)

This is what I tried so far

<script type="text/javascript" language="javascript">
     function pageLoad(sender, args) {
         $(document).ready(function() {
             $("#<%=datepicker.ClientID %>").datepicker();
             $(".ui-datepicker-trigger").mouseover(function() {
                 $(this).css('cursor', 'pointer');
             });
         });
     }
     $(function() {
         $("#datepicker").datepicker();
     });
</script>

<input type = "text" id = "datepicker">

This is working in a single select only. What I want to do is to be able to select a multiple dates. Thanks!

• javascript
• css
• html
• twitter-bootstrap

• did you try looking for jquery datepicker? – Akshay Khandelwal Commented Nov 25, 2014 at 7:58
• @AkshayKhandelwal anything that will e up with a datepicker with multiple selection will do =) – x'tian Commented Nov 25, 2014 at 7:59
• what did you try so far? do you have any code yet? where here to help you fix a problem not to make your homework – Stefan Commented Nov 25, 2014 at 8:00
• You can try this link it might help you eonasdan.github.io/bootstrap-datetimepicker/#example8 – user3811714 Commented Nov 25, 2014 at 8:01
• If you want to use JQuery (or learn what it is) you can check this calendar picker jqueryui./datepicker. – Hoijof Commented Nov 25, 2014 at 8:03

1 Answer 1

You can use MultiDatePicker a jQuery plugin to solve your problem. Here is the demo code for using MultiDatePicker :

You just need to include the script and style needed for MultiDatePicker plugin :

  <link rel="stylesheet" type="text/css" href="http://code.jquery./ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="http://ajax.googleapis./ajax/libs/jquery/1.10.1/jquery.min.js"/>
    <script src="http://code.jquery./ui/1.10.3/jquery-ui.js"/>
    <script src="http://multidatespickr.sourceforge/jquery-ui.multidatespicker.js"/>

   <input id="datePick" type="text"/>
   <script>
   $('#datePick').multiDatesPicker();
   </script>

Here is a live demo

If you find any bugs by using this plugin you can report them here