Basically, you can use the beforeShowDay function, which is called for every date specified on datepicker . Here is a great answer with some details and how to use it: jQuery DatePicker and beforeShowDay
var today = new Date(Date.now()), yesterday = new Date(today - 24 * 60 * 60 * 1000); function sameDate(a, b){ return a.getDate() == b.getDate() && a.getMonth() == b.getMonth() && a.getFullYear() == b.getFullYear(); } $(document).on("pagecreate", "#daily", function() { $("#datepicker").datepicker({ beforeShowDay: function() { return [sameDate(date, today) || sameDate(date, yesterday), "",""]; } }); });
By the way, if you need to include only two dates, why not use a nice fieldset with two radio buttons?
var today = new Date(Date.now()); var yesterday = new Date(today - 24 * 60 * 60 * 1000); function formatDate(date) { var dd = date.getDate(); var mm = date.getMonth() + 1; var yyyy = date.getFullYear(); return yyyy + "-" + mm + "-" + dd; } $(document).on("pagecreate", "#page-1", function() { $("#radio-choice-date-today").prop("value", formatDate(today)); $("#radio-choice-date-yesterday").prop("value", formatDate(yesterday)); $("#date-choiche").html($("#radio-choice-date-today").val()); $("input[name*=radio-choice-date]").click(function() { $("input[name*=radio-choice-date]:checked").each(function() { $("#date-choiche").html($(this).val()); }); }); });
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page-1"> <div role="main" class="ui-content"> <form> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>Choose date:</legend> <input name="radio-choice-date" id="radio-choice-date-yesterday" value="off" type="radio"> <label for="radio-choice-date-yesterday">Yesterday</label> <input name="radio-choice-date" id="radio-choice-date-today" value="on" checked="checked" type="radio"> <label for="radio-choice-date-today">Today</label> </fieldset> </form> <p>Selected date:<span id="date-choiche"></span></p> </div> </div> </body> </html>
Also, here is a complete example with datepicker style for jQuery Mobile from Salman Arshad, credits: jQuery UI Datepicker for jQuery Mobile
var today = new Date(Date.now()); var yesterday = new Date(today - 24 * 60 * 60 * 1000); function sameDate(a, b){ return a.getDate() == b.getDate() && a.getMonth() == b.getMonth() && a.getFullYear() == b.getFullYear(); } function enableDate(date) { var enable = sameDate(date, today) || sameDate(date, yesterday); return [enable, "",""]; } $(document).on("pagecreate", "#daily", function() { $("#datepicker").datepicker({ beforeShowDay: enableDate }); }); (function() {
.ui-datepicker { display: none; } .ui-datepicker-header { position: relative; padding: 0.3125em 2.0625em; line-height: 1.75em; text-align: center; } .ui-datepicker-header .ui-btn { margin: -1px 0 0 0; } .ui-datepicker-calendar { border-collapse: collapse; line-height: 2; } .ui-datepicker-calendar .ui-btn { margin: 0; padding: 0; width: 2em; line-height: inherit; } .ui-datepicker-today .ui-btn { text-decoration: underline !important; } .ui-datepicker-days-cell-over .ui-btn { border-color: inherit !important; } .ui-datepicker-buttonpane .ui-btn { float: left; margin: 0.5em 0 0; padding: 0.5em 1em; } .ui-datepicker-buttonpane .ui-btn:last-child { float: right; } .dp-input-button-wrap { position: relative; padding-right: 2.5em; } .dp-input-button-wrap .ui-btn { top: 0.1875em; margin: 0; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> </head> <body> <div id="daily" data-role="page" class="ui-page" data-theme="a"> <div role="main" class="ui-content" data-theme="b"> <form> <input name="date" placeholder="Date" id="datepicker"> </form> </div> </div> </body> </html>
EDIT:
From your code, it seems that you need a native approach, that is, HTML5 input type="date" . In this case, the solution is even simpler:
var today = new Date(Date.now()); var yesterday = new Date(today - 24 * 60 * 60 * 1000); function formatDate(date) { var dd = date.getDate(); var mm = date.getMonth()+1; var yyyy = date.getFullYear(); return yyyy + "-" + mm + "-" + dd; } $(document).ready(function() { $("#datepicker").prop("min", formatDate(yesterday)); $("#datepicker").prop("max", formatDate(today)); $('input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"]').each(function() { var el = this, type = $(el).attr('type'); if ($(el).val() === '') $(el).attr('type', 'text'); $(el).focus(function() { $(el).attr('type', type); el.click(); }); $(el).blur(function() { if ($(el).val() === '') $(el).attr('type', 'text'); }); }); });
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> </head> <body> <div id="daily" data-role="page" class="ui-page slidehelp" data-theme="a"> <div role="main" class="ui-content" data-theme="b"> <form> <input name="date" type="date" placeholder="Date" id="datepicker"> </form> </div> </div> </body> </html>
... but the current browser implementation is not always perfect. You can refer to: Can I use date and time input types for compatibility and problems.