jquery datetimepicker 12小时格式与AM / PM

时间:2015-04-09 04:02:58

标签: jquery html5 jquery-ui

您好我想在现有代码中再添加一个功能,即12小时格式的AM / PM,这也可以在jsfiddle中找到链接http://jsfiddle.net/8ztsjcos/3/谢谢

HTML 

 <link rel="stylesheet"href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">

<p>From:   <input type="text" id="to">  <div id="datepicker"></div> <p>To: <input type="text" id="from"><div id="datepicker1"></div>
JQUERY 
$( document ).ready(function() {
    $('#datepicker').datepicker({
        dateFormat: 'dd-mm-yy',
        timeFormat:'HH:mm',
        use24hours: false,
        onSelect: function(datetext){
            var d = new Date(); // for now
            datetext=datetext+" "+d.getHours()+": "+d.getMinutes();
            $('#to').val(datetext);
        },
    });
    });
$( document ).ready(function() {
    $('#datepicker1').datepicker({
        dateFormat: 'dd-mm-yy',
        timeFormat:'HH:mm',
        use24hours: false,
        onSelect: function(datetext){
            var d1 = new Date();
            var d2 = new Date(d1);
            var addedhour=d2.setHours(d1.getHours()+4);

            // for now
            datetext=datetext+" "+d2.getHours()+": "+d2.getMinutes();
            $('#from').val(datetext);
        },
    });
    });

1 个答案:

答案 0 :(得分:1)

 HTML 

     <link rel="stylesheet"href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.datejs.com/build/date.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">

    <p>From:   <input type="text" id="to">  <div id="datepicker"></div> <p>To: <input type="text" id="from"><div id="datepicker1"></div>
    JQUERY 
    $(function() {
    $('#datepicker').datepicker({
        dateFormat: 'dd-mm-yy',
        onSelect: function(datetext){

            var d = new Date(); // for now
            datetext = d.toString("dd-MM-yyyy hh:mm tt");
            //datetext=datetext+" "+d.getHours()+": "+d.getMinutes();
            $('#to').val(datetext);
        },
    });
    });
$(function() {
    $('#datepicker1').datepicker({
        dateFormat: 'dd-mm-yy',
        onSelect: function(datetext){
            var d1 = new Date();
            var d2 = new Date(d1);

            var addedhour=d2.setHours(d1.getHours()+4);

            // for now
            //datetext=datetext+" "+d2.getHours()+": "+d2.getMinutes();
            datetext = d2.toString("dd-MM-yyyy hh:mm tt");
            $('#from').val(datetext);
        },
    });

选中此JSBin,您只需要添加名为date.js的新js