stackoom
  简体   繁体   中英

How to Disable previous dates in JQuery Datepicker

 原文  2020-11-23 17:42:01  5   1    javascript/ html/ jquery/ datepicker/ calendar

Question

I started making a JQuery Calendar, which is about choosing an appointment for an event, and I want to disable the dates prior to the current date. I also want to add an #f48024 orange colour to the available dates to make it more clear that they are still available.

I tried it with minDate but it did not work so far.

My question is how could I disable the dates before the current date?

Edit: I added the following code which makes it possible, but it duplicates the calendar, and I don't know why.

$(document).ready(function(){
   $("#example-popover-2") .datepicker({
    minDate:0,
   })
   }
   )


 body { background: #20262E; padding: 20px; font-family: Helvetica; } .popover { left: 5% !important; top: 120% !important; } .btn { margin: 1%; } #banner-message { background: #fff; border-radius: 4px; padding: 20px; font-size: 25px; text-align: center; transition: all 0.2s; margin: 0 auto; width: 300px; } button { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; } #banner-message.alt { background: #0084ff; color: #fff; margin-top: 40px; width: 200px; } #banner-message.alt button { background: #fff; color: #000; } .popover button{ background: #f48024; } .popover button:hover{ background:#fcb67c; } .popover button:focus{ background: #052049; } .popover button:focus:active{ background: #052049; } .arrow { visibility: hidden; } .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid #dad55e; background: #fffa90; color: #777620; }
 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <link rel="stylesheet" href="./style.css" /> <script src="app.js"></script> </head> <body> <div class=" col-md-4"> <div class="date-picker-2" placeholder="Recipient's username" id="ttry" aria-describedby="basic-addon2"></div> <span class="" id="example-popover-2"></span> </div> <div id="example-popover-2-content" class="hidden"> </div> <div id="example-popover-2-title" class="hidden"> </div> <script> $('.date-picker-2').popover({ html : true, content: function() { return $("#example-popover-2-content").html(); }, title: function() { return $("#example-popover-2-title").html(); } }); $(".date-picker-2").datepicker({ onSelect: function(dateText) { $('#example-popover-2-title').html('<b>Available Appointments</b>'); var html = '<button class="btn btn-success">8:00 am – 9:00 am</button><br><button class="btn btn-success">10:00 am – 12:00 pm</button><br><button class="btn btn-success">12:00 pm – 2:00 pm</button>'; $('#example-popover-2-content').html('Available times <strong>'+dateText+'</strong><br>'+html); $('.date-picker-2').popover('show'); } }); // I added this part to the code but this duplicates the calendar. $(document).ready(function(){ $("#example-popover-2") .datepicker({ minDate:0, }) } ) </script> </body> </html>

1 answers

solution1
 1 ACCPTED  2020-11-23 17:51:58

Can you check if there are minDateTime and maxDateTime available? Something like:

    let minDateTime = new Date(someDateInThePast);
    let maxDateTime = new Date(someDateInTheFuture);
    $(".date-picker-2").datepicker({
        minDateTime: minDateTime,
        maxDateTime: maxDateTime,
        onSelect: function (dateText) {
            $('#example-popover-2-title').html('<b>Available Appointments</b>');
            var html = '<button  class="btn btn-success">8:00 am – 9:00 am</button><br><button  class="btn btn-success">10:00 am – 12:00 pm</button><br><button  class="btn btn-success">12:00 pm – 2:00 pm</button>';
            $('#example-popover-2-content').html('Available times <strong>' + dateText + '</strong><br>' + html);
            $('.date-picker-2').popover('show');
        }

    });


 body { background: #20262E; padding: 20px; font-family: Helvetica; } .popover { left: 5% !important; top: 120% !important; } .btn { margin: 1%; } #banner-message { background: #fff; border-radius: 4px; padding: 20px; font-size: 25px; text-align: center; transition: all 0.2s; margin: 0 auto; width: 300px; } button { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; } #banner-message.alt { background: #0084ff; color: #fff; margin-top: 40px; width: 200px; } #banner-message.alt button { background: #fff; color: #000; } .popover button{ background: #f48024; } .popover button:hover{ background:#fcb67c; } .popover button:focus{ background: #052049; } .popover button:focus:active{ background: #052049; } .arrow { visibility: hidden; } .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid #dad55e; background: #fffa90; color: #777620; }
 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <link rel="stylesheet" href="./style.css" /> <script src="app.js"></script> </head> <body> <div class=" col-md-4"> <div class="date-picker-2" placeholder="Recipient's username" id="ttry" aria-describedby="basic-addon2"></div> <span class="" id="example-popover-2"></span> </div> <div id="example-popover-2-content" class="hidden"> </div> <div id="example-popover-2-title" class="hidden"> </div> <script> $('.date-picker-2').popover({ html : true, content: function() { return $("#example-popover-2-content").html(); }, title: function() { return $("#example-popover-2-title").html(); } }); $(".date-picker-2").datepicker({ minDate: new Date(), onSelect: function(dateText) { $('#example-popover-2-title').html('<b>Available Appointments</b>'); var html = '<button class="btn btn-success">8:00 am – 9:00 am</button><br><button class="btn btn-success">10:00 am – 12:00 pm</button><br><button class="btn btn-success">12:00 pm – 2:00 pm</button>'; $('#example-popover-2-content').html('Available times <strong>'+dateText+'</strong><br>'+html); $('.date-picker-2').popover('show'); } }); </script> </body> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question disable previous dates in a jquery datepicker Disable previous dates in datepicker How to disable dates in jQuery datepicker? How to disable all previous dates on the datepicker Disable the dates in Jquery DatePicker disable jQuery DatePicker dates Disable Previous Dates in Datepicker with Javascript Disable previous dates of a datepicker according to selected date in javascript or jquery how to disable dates before today in jQuery datepicker how to disable future dates based on some datepicker value in jquery datepicker
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM