显示实际日期和时间,并在用户选择另一个时更改它

时间:2018-04-04 00:46:59

标签: javascript jquery html

我必须在div中显示当前日期和时间,并在页面加载时刷新秒数,并在用户从日期和时间选择器中选择另一个时更改它,我试图用此脚本执行此操作但是什么都没发生。 de .datetimepicker si的部分用于显示正常工作的日历,但第二个部分是我用来试图获得真实的日期和时间而不起作用的部分。你能帮帮我吗?

非常感谢

jQuery(document).ready(function() {
  $('#date-time').datetimepicker();
});
var momentNow = moment();
$('#date-time').html(momentNow.format('YYYY MMMM DD' + 'A hh:mm:ss'));

////

更新

When the page loads it should look like this with the real time and date

Then when he clicks on the div it shows the calendar and time so that he can make a selection

由于

1 个答案:

答案 0 :(得分:0)

这会每秒更新日期时间字段中的时间(如时钟),并且还允许用户选择日期和时间(在这种情况下,当我们选择不同的日期和时间时,时钟将停止工作比现在的那个):

<form method="post" action="?">
   <div>
     <label for="filter-date">
       <span><img src="images/calendar.png" alt=""></span>
     </label>

     <input type="text" name="filter-date" id="date-time"/>
   </div>
</form>

<script>
    jQuery(document).ready(function($) {

        var timer;
        //var momentNow = moment();

        var dateTimeClock = $('#date-time').datetimepicker({
            format:'Y F d H:i:s A', // Use the same date format as the one set with moment()
            onSelectDate: function(ct, $i){
                // Stop the clock
                if (timer) {
                    clearInterval(timer);
                }
            }
        });

        // This function updates the datetime field 
        // every one second, simulating a clock.
        function clock(){
            if (timer)
                clearInterval(timer);

            timer = setInterval(function(){
                dateTimeClock.val(moment().format('YYYY MMMM DD' + ' hh:mm:ss A'));
            }, 1000);
        }

        // Start the clock
        clock();

    });
</script>

演示:JSFiddle

如果您有任何意见/问题,请不要犹豫。