Save bootstrap Date and Time in Database using jQuery Ajax in ASP.Net

Hi Amol111,

I have created a sample which full fill your requirement you need to modify the code according to your need.

HTML

<div>
    <br />
    <table align="center">
        <tr>
            <td>
                From:
            </td>
            <td>
                <div class="col-md-12">
                    <asp:TextBox ID="txtFrom" CssClass="form-control" runat="server" />
                </div>
            </td>
        </tr>
        <tr>
            <td>
                To:
            </td>
            <td>
                <div class="col-md-12">
                    <asp:TextBox ID="txtTo" CssClass="form-control" runat="server" />
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Button ID="btnSave" Text="Save" CssClass="btn btn-primary" runat="server" />
            </td>
        </tr>
    </table>
</div>
<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment-with-locales.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/css" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css"></script>
    <script type="text/javascript">
        $(function () {
            $('#txtFrom').datetimepicker({
                date: new Date()
            });
            var date = new Date();
            date.setDate(date.getDate() + 1);
            $('#txtTo').datetimepicker({
                date: date
            });

            $('[id*=btnSave]').click(function () {                    
                var Details = {};
                Details.InDate = $('#txtFrom').val().split(' ')[0];
                Details.InTime = $('#txtFrom').val().split(' ')[1];
                Details.OutDate = $('#txtTo').val().split(' ')[0];
                Details.OutTime = $('#txtTo').val().split(' ')[1];

                $.ajax({
                    type: "POST",
                    url: "Default.aspx/SaveDetail",
                    data: '{Details :' + JSON.stringify(Details) + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        alert(response.d);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });

                return false;
            });
        });
    </script>
</div>

C#

[WebMethod]
public static string SaveDetail(Date Details)
    {
    //your saving code comes here.
    return "Data Saved Successfully";
}
    
public class Date
{
    public string InDate { get; set; }
    public string OutDate { get; set; }
    public string InTime { get; set; }
    public string OutTime { get; set; }
}

VB.Net

<WebMethod> _
Public Shared Function SaveDetail(Details As [Date]) As String
	'your saving code comes here.
	Return "Data Saved Successfully"
End Function

Public Class [Date]
	Public Property InDate() As String
		Get
			Return m_InDate
		End Get
		Set
			m_InDate = Value
		End Set
	End Property
	Private m_InDate As String
	Public Property OutDate() As String
		Get
			Return m_OutDate
		End Get
		Set
			m_OutDate = Value
		End Set
	End Property
	Private m_OutDate As String
	Public Property InTime() As String
		Get
			Return m_InTime
		End Get
		Set
			m_InTime = Value
		End Set
	End Property
	Private m_InTime As String
	Public Property OutTime() As String
		Get
			Return m_OutTime
		End Get
		Set
			m_OutTime = Value
		End Set
	End Property
	Private m_OutTime As String
End Class

ScreenShot