Disable jQuery Timepicker Time based on Datepicker Date selection in ASP.Net

nauna

SOLVED CLOSED ACTIVE ANSWERED
User: nauna
Posted: on Oct 22, 2019 12:32 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 4476

i am using jquery date and timepicker it works fine

i want to apply this logic in calender and timer so user can select only date and time between these conditions

Allow bookings during these times only: 8am-10pm (M-F) and 9am-10pm (Saturday and Sunday)

 <h4 class="line-h s-bold padding15">
    Select Date and Time<br />
    <small>Please select the date and time for this walk. </small>
</h4>
<div class="row">
    <div class="form-group col-md-6">
        Date
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Field Required"
            CssClass="required" ControlToValidate="txtdate" Display="Dynamic" ValidationGroup="form"></asp:RequiredFieldValidator>
    </div>
    <div class="form-group col-md-6">
        Time
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Field Required"
            CssClass="required" ControlToValidate="txttime" Display="Dynamic" ValidationGroup="form"></asp:RequiredFieldValidator>
    </div>
</div>

<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>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<script>
    $(document).ready(function () {
        //$('input.timepicker').timepicker({});
        $('[id*=txttime]').timepicker({

            defaultTime: '12:00 AM'

        });
        //$('[id*=TextBox1]').summernote()
    });
</script>
<script>
    $(document).ready(function () {
        $('[id*=txtdate]').datepicker({
            startDate: new Date(),
            multidate: false,
            format: "mm/dd/yyyy",
            daysOfWeekHighlighted: "5,6",
            //datesDisabled: ['31/08/2017'],
            language: 'en'
        }).on('changeDate', function (e) {
            // `e` here contains the extra attributes
            $(this).find('.input-group-addon .count').text(' ' + e.dates.length);
        });
    });
</script>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 6

Reply
ANSWER
User: dharmendr
Replied: on Oct 23, 2019 03:45 AM
Report

Hi nauna,

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

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/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>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('[id*=txtdate]').datepicker({
            startDate: new Date(),
            multidate: false,
            format: "mm/dd/yyyy",
            daysOfWeekHighlighted: "5,6",
            language: 'en'
        }).on('changeDate', function (e) {
            var selectedDates = e.dates;
            $(this).find('.input-group-addon .count').text(' ' + e.dates.length);

            $('[id*=txttime]').timepicker("destroy");
            if (new Date(selectedDates).getDay() > 0 && new Date(selectedDates).getDay() < 6) {
                $('[id*=txttime]').timepicker({
                    defaultTime: '08:00:00 AM',
                    minTime: '08:00:00 AM',
                    maxTime: '10:00:00 PM'
                });
            } else if (new Date(selectedDates).getDay() == 0 || new Date(selectedDates).getDay() == 6) {
                $('[id*=txttime]').timepicker({
                    defaultTime: '09:00:00 AM',
                    minTime: '09:00:00 AM',
                    maxTime: '10:00:00 PM'
                });
            }
        });
    });
</script>
<div class="form-group col-md-3">
    Date
    <asp:TextBox ID="txtdate" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ErrorMessage="Field Required"
        CssClass="required" ControlToValidate="txtdate" Display="Dynamic" ValidationGroup="form"></asp:RequiredFieldValidator>
</div>
<div class="form-group col-md-3">
    Time
    <asp:TextBox ID="txttime" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ErrorMessage="Field Required"
        CssClass="required" ControlToValidate="txttime" Display="Dynamic" ValidationGroup="form"></asp:RequiredFieldValidator>
</div>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Disable jQuery Timepicker Time based on Datepicker Date selection in ASP.Net

Company

Explore

Follow us

Contact Us