shieldui datepicker格式化

时间:2016-07-19 06:31:43

标签: javascript jquery datepicker shieldui

我尝试像这样使用shieldui datepicker

<input id="datepicker"/>  
 jQuery(function ($) {
        $("#datepicker").shieldDatePicker();
    });

我也添加链接

<script  src="https://www.shieldui.com/shared/components/latest/js/jquery-1.11.1.min.js"></script>
    <script  src="https://www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
<link id="themecss" rel="stylesheet" href="https://www.shieldui.com/shared/components/latest/css/light/all.min.css" />

但是datepicker未按预期显示我尝试此参考链接 reference link

js fiddle

1 个答案:

答案 0 :(得分:2)

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>

<link id="themecss" rel="stylesheet" type="text/css" href="//www.shieldui.com/shared/components/latest/css/light/all.min.css" />
<script type="text/javascript" src="//www.shieldui.com/shared/components/latest/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="//www.shieldui.com/shared/components/latest/js/shieldui-all.min.js">      </script>
</head>
<body>
<input id="picker" ></input>

<script type="text/javascript">
  $(function () {
     $("#picker").shieldDatePicker({
      events: {
            change: function(e) {
                var date = new Date(e.target.value());
                var day = date.getDate();
                var monthIndex = date.getMonth();
                var year = date.getFullYear();

              alert("The Date is :" + day + "/" + monthIndex + "/" + year); 
            }
        }
    });
});

$("#picker").swidget().value(); // return null

$("#picker").swidget().value(new Date) // select the current date

$("#picker").swidget().value(); // return current selected date

</script>
</body>
</html>

点击日期选择器图标。

Go to file and click download.