时间区别选择，jquery ui

2013-09-23 00:00:00 by 【6yang】, 881 visits, 收藏 | 返回

CODE:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Spinner - Time</title>
<link rel="stylesheet" href="css/jquery-ui.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/globalize.js"></script>
<script src="js/globalize.culture.de-DE.js"></script>
<script src="js/jquery-ui.js"></script>
<style>
body {
   font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
   font-size: 62.5%;
}
</style>
<script>
var start_time = 'Tue Jan 01 2013 19:15:00 GMT+0800';
console.log(new Date(start_time ) + '= ' + new Date((new Date(start_time).getTime() + 3600000 )));
$.widget("ui.timespinner", $.ui.spinner, {
    "options": {
       // "step": 60*1000,
        "page": 60,
       "change": function(){
       }
    },
    "_parse": function(value) {
        return typeof value == "string" ? Number(value) == value ? Number(value) : +Globalize.parseDate(value) : value;
    },
    "_format": function(value) {

        return Globalize.format(new Date(value), "t");
    }
}), $(function() {
   Globalize.culture('de-DE');
   var spinners = $("#spinner, #spinner01").timespinner(
       {
           "step": 60*1000*15,
           "change": function(){
                   var start_time = Globalize.parseDate($(this).val()),
                       end_time = Globalize.parseDate(spinners.not(this).val());
               if(!$(this).hasClass('start')){
                       result_time = (start_time - end_time)/60000;
                   if(result_time < 15 ){
                       var time = Globalize.format(new Date((new Date(start_time).getTime() - 900000 )), "t");
                       spinners.not(this).val(time)
                   }
                   if(result_time > 60 ){
                       var time = Globalize.format(new Date((new Date(start_time).getTime() - 3600000 )), "t");
                       spinners.not(this).val(time)
                   }
               } else {
                       result_time = (end_time - start_time)/60000;
                   if(result_time > 60 ){
                       var time = Globalize.format(new Date((new Date(start_time).getTime() + 3600000 )), "t");
                       spinners.not(this).val(time)
                   }
                   if(result_time < 15 ){
                       var time = Globalize.format(new Date((new Date(start_time).getTime() + 900000 )), "t");
                       spinners.not(this).val(time)
                   }
               }
           }
       }
   );

   $("#culture").change(function() {
        var current = $("#spinner").timespinner("value");
        Globalize.culture($(this).val()), $("#spinner").timespinner("value", current);
    });
});
</script>
</head>
<body>
<p>
       <label for="spinner">Time spinner:</label>
       <input id="spinner" class="start" name="spinner" value="08:30 PM" />
       <input id="spinner01" name="spinner01" class="end" value="08:30 PM" />
</p>
<p>
       <label for="culture">Select a culture to use for formatting:</label>
       <select id="culture">
               <option value="en-EN" selected="selected">English</option>
               <option value="de-DE">German</option>
       </select>
</p>
</body>
</html>

分享到：

我要评论本文来自:http://www.6yang.net/articles_view.php?id=1311&cid=7

share

技术标签 TAGS

专业技术精选

首页 > 技术 > 前端技术

时间区别选择，jquery ui

图片原图