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

Last Reply on Aug 28, 2017 03:34 AM By AnandM

Posted on Aug 26, 2017 11:28 AM

Hiiii,

I want to use Bootstrap Date-timepicker with asp textbox.

Also want to set current date and time in that textbox1 and set next day and current time to TextBox2.

And then save time in database.

following are the table structure :

InDate Date,
OutDate Date,
InTime Time,
OutTime Time

 

You are viewing reply posted by: AnandM on Aug 28, 2017 03:34 AM.
Posted on Aug 28, 2017 03:34 AM

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