Clear TextBox on Bootstrap DatePicker selection using jQuery in ASP.Net

Last Reply one month ago By dharmendr

Posted one month ago

hello,

i am using this, i want once user selected the date and button click fired txtbox again become blank

i want to make textbox blank

<script type="text/javascript">
    $(function () {
        var selectedDates = [];
        datePicker = $('[id*=txtdate]').datepicker({
            startDate: new Date(),
            minDate: 0,
            multidate: false,
            format: "mm/dd/yyyy",
            daysOfWeekHighlighted: "5,6",
             daysOfWeekDisabled: [0, 6],
            language: 'en'
        });
        datePicker.on('changeDate', function (e) {
            if (e.dates.length == 1) {               
                selectedDates = e.dates;
                document.getElementById("<%=Button1.ClientID %>").click();
            } else {
                datePicker.data('datepicker').setDates(selectedDates);
                alert('You can only select 3 dates.');
            }
        });
    });
</script>

 

<asp:TextBox ID="txtdate" runat="server" placeholder="Date"  autocomplete="off" ></asp:TextBox>

 

Posted one month ago

Hi nauna,

Check this example. Now please take its reference and correct your code.

HTML

<form id="form1" runat="server">
    <asp:TextBox ID="txtdate" runat="server" placeholder="Date" autocomplete="off"></asp:TextBox>
    <asp:Button ID="Button1" runat="server" Text="Button" />
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript">
    $(function () {
        var selectedDates = [];
        datePicker = $('[id*=txtdate]').datepicker({
            startDate: new Date(),
            minDate: 0,
            multidate: false,
            format: "mm/dd/yyyy",
            daysOfWeekHighlighted: "5,6",
            daysOfWeekDisabled: [0, 6],
            language: 'en'
        });
        datePicker.on('changeDate', function (e) {
            if (e.dates.length == 1) {
                selectedDates = e.dates;
                $('[id*=txtdate]').val('');
                document.getElementById("<%=Button1.ClientID %>").click();
            } else {
                datePicker.data('datepicker').setDates(selectedDates);
                alert('You can only select 3 dates.');
            }
        });
    });
</script>