multidatespicker

摘要:multidatespicker

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="shortcut icon" href="favicon.ico">
    <title>MultiDatesPicker for jQuery UI</title>
    <meta name="description" content="MDP is a little plugin that enables jQuery UI calendar to manage multiple dates.">
    <meta name="keywords" content="Multiple Dates Picker, jQuery, jQuery UI, javascript, calendar, Luca Lauretta, dubrox">
    <meta name="author" content="Luca Lauretta aka dubrox">
    <!-- loads jquery and jquery ui -->
    <!-- -->

    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>

    <script type="text/javascript" src="js/jquery-ui-1.11.1.js"></script>

    <!-->
  <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.11.1.js"></script>
  <!-- -->
    <!-- loads mdp -->

    <script type="text/javascript" src="jquery-ui.multidatespicker.js"></script>

    <link rel="stylesheet" type="text/css" href="css/mdp.css">
    <link rel="stylesheet" type="text/css" href="css/prettify.css">

    <script type="text/javascript" src="js/prettify.js"></script>

    <script type="text/javascript" src="js/lang-css.js"></script>

    <script type="text/javascript">
  $(function() {
   prettyPrint();
  });
    </script>

    <!-- mdp demo code -->

    <script type="text/javascript">
  <!--
  
   $(function() { 
    var today = new Date();
                var y = today.getFullYear();
                $('#full-year').multiDatesPicker({
                 addDates: ['10/16/'+y, '02/19/'+y, '01/14/'+y, '11/16/'+y],
                 numberOfMonths: [1,3],
                 defaultDate: '1/1/'+y
                });
               
               
                $('#from-input').multiDatesPicker();
   });
  // -->
 
  function SelectChange()
        {
          var today = new Date();
          var y = today.getFullYear();
          var sDate=$("#SelectBox2 option:selected").val();
      
          $('#full-year').multiDatesPicker("addDates", sDate);

        }
       
        function AddDates()
        {
          var sDates= $("#from-input").val().split(',');
          var arrDates= [];
         
          for(var i=0;i<sDates.length;i++)
          arrDates.push( new Date(sDates[i]));

          $('#full-year').multiDatesPicker("addDates", arrDates);
          //$('#full-year').multiDatesPicker("refresh");
         
        }
       
        function GetDates()
        {
           var dates = $('#full-year').multiDatesPicker('getDates');
          
           alert("Result Dates: "+dates);
        }
       
       
    </script>

</head>
<body>
    <div id="page">
        <div id="how-to">
            <ul>
                <li class="demo full-row">
                    <h3>
                        Full year</h3>
                    <div id="full-year" class="box">
                    </div>
                </li>
            </ul>
        </div>
        <div>
            <table border="2" width="900px">
                <tr>
                    <td align="right" style="width: 200px">
                        <select name="drop1" id="SelectBox2" size="4" style="width: 100px; height: 200px"
                            onchange="SelectChange()" multiple="multiple">
                            <option value="01/15/2015">2015/01/15</option>
                            <option value="02/03/2015">2015/02/03</option>
                            <option value="03/13/2015">2015/03/13</option>
                            <option value="06/01/2015">2015/06/01</option>
                            <option value="07/01/2015">2015/07/01</option>
                            <option value="08/01/2015">2015/08/01</option>
                            <option value="09/01/2015">2015/09/01</option>
                            <option value="10/01/2015">2015/10/01</option>
                        </select>
                    </td>
                    <td>
                        <div class="box" id="from--input">
                            <input type="text" id="from-input" />
                            <input type="button" id="btnAddDates" value="Add Dates" onclick="AddDates()" />
                        </div>
                       
                        <input type="button" id="Button1" value="Send" onclick="GetDates()" />
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>