data:text/html,<body%20style=margin:0><canvas%20id=q%20/><script>var%20q=document.getElementById('q'),s=window.screen,w=q.width=s.width,h=q.height=s.height,p=Array(256).join(1).split(''),c=q.getContext('2d'),m=Math;setInterval(function(){c.fillStyle='rgba(0,0,0,0.05)';c.fillRect(0,0,w,h);c.fillStyle='rgba(0,255,0,1)';p=p.map(function(v,i){r=m.random();c.fillText(String.fromCharCode(m.floor(2720+r*33)),i*10,v);v+=10;%20return%20v>768+r*1e4?0:v})},33)</script>

First of all, a way for Date and Time formatting is needed, and excellent jQuery plugin for that can be found here. Date formatting is done by using $.format.date() function.

Following scripts (along with jQuery core library) have to be placed in HTML:

<script src="@Url.Content("~/Scripts/jquery.datetimepicker.full.js")"></script>
<script src="@Url.Content("~/Scripts/jquery-dateFormat.js")"></script>

And also CSS for datetime picker:

<link media="all" rel="stylesheet" type="text/css" href="@Url.Content("~/Content/jquery.datetimepicker.css")" />

Place HTML input and button:

<input id="datetimepicker" type="text" />
<button type="button" class="btn btn-primary" id="save-btn">Save</button>

The following JS code creates datetime picker and attaches onclick listener to button:

$('#datetimepicker').datetimepicker({ 
   inline: true, //not drop-down 
   value: new Date(), //current datetime 
   step: 30 // time by 30 minutes 
}); 

$('#save-btn').click(function () { 
var datetime = $('#datetimepicker').datetimepicker('getValue'), 
    formatted = $.format.date(datetime, 'dd.MM.yyyy HH:mm'); 
    $.post('@Url.Action("ChangeDateTime", "SomeController")', 
    { id: '@ViewBag.Id', datetime: formatted }, 
    function (result) { 
        //Completed code 
    }); 
});

Value that is sent to the “dd.MM.yyyy HH:mm” format. In ASP.NET MVC SomeController place this action:

[HttpPost]
public bool ChangeDateTime(SomeModel data)
{
   //Save to db
}

SomeModel is a POCO class which takes Id and DateTime value from client side:

public class SomeModel
{
    public string Id { get; set; }
    public string DateTime { get; set; }
}

<script>
function clock() {
    var today = new Date(),
        h = addZero(today.getHours()),
        m = addZero(today.getMinutes()),
        s = addZero(today.getSeconds());
    document.getElementById('clock_div').innerHTML = h + ":" + m + ":" + s;
    setTimeout(clock, 1000);
}
function addZero(k) {
    if (k < 10) {
        return "0" + k;
    }
    return k;
}
</script>
<div id="clock_div">
   <script>
      clock();
   </script>
</div>

clock() function uses today’s date to get time parts. After that it calls setTimeout() function to delay it’s own execution by 1 second. It is basically an infinite recursion with time delay option. addZero() function adds “0” prefix if number is smaller than 10. clock() function is called on div load.