zoukankan      html  css  js  c++  java
  • JQuery UI 日历加时间

    写一个面试时间通知。用jquery ui 具体功能已经可以了,不过样式还没调

    一、需要引入的文件,这些可以到官网下载

    <link rel="stylesheet" href="jquery-ui.css">
    <script src="jquery-1.10.2.js"></script>
    <script src="jquery-ui.js"></script>

    二、HTML代码如下

    <input type="text" id="amount" readonly >
    <br>
    选择日期:
    <br>
    <input type="hidden" id="actualDate" readonly>
    <div id="datepicker" class="w270"></div>
    <br>
    选择小时:
    <br>
    <div id="slider_hour" class="w270"></div>
    <br>
    选择分钟:
    <br>
    <div id="slider_minute" class="w270"></div>

    三、js代码如下

    function refreshSwatch() {
    	var date = $( "#actualDate" ).val(),
    		hour = $( "#slider_hour" ).slider( "value" ),
    		minute = $( "#slider_minute" ).slider( "value" );
    		$( "#amount" ).val( date+"  "+hour+":"+minute );
    }
      
    $(function() {
    	//时间和分钟
        $( "#slider_hour, #slider_minute" ).slider({
          orientation: "horizontal",
          slide: refreshSwatch,
          change: refreshSwatch
        });
        $( "#slider_hour" ).slider({
    		value:new Date().getHours(),
    		  min: 6,
    		  max: 23,
    		  step: 1
    	});
        $( "#slider_minute" ).slider({
    		value:new Date().getMinutes(),
    		  min: 0,
    		  max: 50,
    		  step: 10
    	});
    	//日期
    	$("#datepicker").datepicker({
    		dateFormat:'yy-mm-dd',
    		dayNamesMin:['日', '一', '二', '三', '四', '五', '六'],
    		monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
    		minDate:new Date().getFullYear()+"-"+(new Date().getMonth()+1)+"-"+new Date().getDate(),
    		altField: '#actualDate',//将选择的日期同步到另一个域
    		onSelect:refreshSwatch
    	});
    });
    

    四、问题

    1)、日历的回调函数是哪个??? 就是点击日期时,可以获取的时间(yy-mm-dd)。这样就不用再多写一个input(<input type="hidden" id="actualDate" readonly>)了,用来存日期。

    ==========================================================
         github静态网页     github     博客园     知乎     开源中国     gitee     微博


  • 相关阅读:
    企业微信应用授权
    exec存储过程示例
    jquery判断对象是否存在
    IScroll5要防止重复加载
    transitionEnd不起作用解决方法
    微信接口 output {"errMsg":"translateVoice:fail, the permission value is offline verifying"}
    javascript保留两位小数
    html取消回车刷新提交
    企业微信后台登录
    企业微信开启开发者工具
  • 原文地址:https://www.cnblogs.com/wangbinweb/p/5338158.html
Copyright © 2011-2022 走看看