Jump to content

Search the Community

Showing results for tags 'datepicker'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 5 results

  1. My website needs to use a date picker to choose first and last dates of a rental period. I chose TheDatePicker because it said it was pure JS and easy to use. The picker for the first date works fine. I am finally able to make the MinDate 10 days from the current date, as intended. Once the first date is chosen, I need to make it the MinDate for the second chooser. I can't seem to find the correct code to do that. Do I need to use a callback? Do I have to set a listener? The docs for TheDatePicker show code for doing that, but that code is in TypeScript rather than straight JS, and I can't figure out how to implement it. Can someone point me to an example, or suggest a different picker where this is easier? Here is my code: <tr> <td style="text-align:center"> <div id="input-wrapper" class="w3-container" style="text-align:center"> <input id="date1" type="text" class="form-control w3-show-inline-block w3-border") style="width:60%; min-width:11ch"> <script> (function () { // This code works as intended. const input = document.getElementById('date1'); const datepicker = new TheDatepicker.Datepicker(input); datepicker.options.setInputFormat("Y, m, d"); datepicker.options.setMinDate("+ 10 days"); datepicker.options.setDropdownItemsLimit(20); datepicker.render(); })(); </script> </div> </td> <!-- 2ND DATE FIELD --> <td id="wrapper2"> <div class="w3-container" style="text-align:center"> <input id="date2" type="text" placeholder="Last show" class="form-control w3-right w3-border" style="width:60%; min-width:11ch"> <script> (function () { const input2 = document.getElementById('date2'); const datepicker2 = new TheDatepicker.Datepicker(input2); //This code obviously needs to go somewhere else, because it can't run until date1 is chosen. var d = new Date(document.getElementById("date1").value); datepicker2.options.setMinDate(d.toDateString() //(I realize this code won't work anyway, but I can fix that. My question is how to access it.) datepicker2.render(); })(); </script> </div> </td> </tr> This is what's shown in the docs, but I can't figure out how to implement it. // Callback to be called just before the datepicker is opened or closed. // An Event instance and a boolean telling whether datepicker was opened (true) or closed (false) are given on input. // If callback returns false, action stops and datepicker will not be opened / closed. public onBeforeOpenAndClose(listener: OpenAndCloseListener): void { this.onEvent_(EventType_.BeforeOpenAndClose, listener as AnyListener); } public offBeforeOpenAndClose(listener: OpenAndCloseListener | null = null): void { this.offEvent_(EventType_.BeforeOpenAndClose, listener); } // Callback to be called immediately after the datepicker is opened or closed. // An Event instance and a boolean telling whether datepicker was opened (true) or closed (false) are given on input. public onOpenAndClose(listener: OpenAndCloseListener): void { this.onEvent_(EventType_.OpenAndClose, listener as AnyListener); } public offOpenAndClose(listener: OpenAndCloseListener | null = null): void { this.offEvent_(EventType_.OpenAndClose, listener);
  2. Hi everyone, On a new project, i would like to prevent users from entering a date earlier than the first day of the month preceding the current month. To be more precise, today (dd/mm/yy -> 19/11/19) i would like to prevent entering a date earlier than 01/10/19 (dd/mm/yy format). When using following code. It works. <!DOCTYPE html> <html> <body> <p>Click the button to display first day of preceding current month.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { var dateMin = new Date(); dateMin.setFullYear(dateMin.getFullYear(), dateMin.getMonth() - 1, 1); document.getElementById("demo").innerHTML = dateMin; } </script> </body> </html> When i click on Try it button, on 19th november 2019, i've got Tue Oct 01 2019 (+ time) displayed. But when using following code in my .js file : var dateMin = new Date(); dateMin.setFullYear(dateMin.getFullYear(), dateMin.getMonth() - 1, 1); $(function () { $("input[InputTypeCheck='DateSaisieMin']").datepicker({ onSelect: function () { }, dateFormat: 'dd/mm/yy', minDate: dateMin, changeYear: true, changeMonth: true }, $.datepicker.regional['fr']).attr('readonly', 'readonly'); }); and following code in my .aspx file : <p> <label class="LblLibelle">Date</label> &nbsp;&nbsp; <asp:TextBox ID="txt_dateDeclaration" runat="server" InputTypeCheck="DateSaisieMin" AutoPostBack="true"></asp:TextBox> <asp:RequiredFieldValidator ID="rfv_dateDeclaration" runat="server" ControlToValidate="txt_dateDeclaration" Display="Dynamic" ErrorMessage="La date de l'absence est obligatoire" ValidationGroup="ajout"> <label class="zoneObligatoire">&nbsp;*</label> </asp:RequiredFieldValidator> </p> I was expecting to be unable to select a date in the datepicker prior to 01/10/2019, but this is not the case. The datepicker shows every month since August. Can someone tell me where I made a mistake ? Many Thanks to all.
  3. How do I get the selected datepicker below and populate a label? @Html.JQueryUI().Datepicker("data1", null, new { id = "data1", @class = "form-control" })
  4. Hello everyone, This is my first topic on W3Schools Forum. I am having issues dealing with disabling textbox when I click a radio button. And you might wanna read this code that I've posted here: <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Airline Reservations</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://code.jquery.com/resources/demos/style.css"> <script> $(function(){ $( "#from" ).datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 3, onClose: function( selectedDate ){ $( "#to" ).datepicker( "option", "minDate", selectedDate ); } }); $( "#to" ).datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 3, onClose: function( selectedDate ){ $( "#from" ).datepicker( "option", "maxDate", selectedDate ); } }); }); </script> <style> body { background-color: #EFEFEF; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; } </style></head><body><form><input type="text" name="origin" placeholder="Origin"><input type="text" name="destination" placeholder="Destination"> <br>Trip: <input type="radio" name="trip" value="one-way">One-Way<input type="radio" name="trip" value="return">Return <br><label for="from">Departing on:</label><input type="text" id="from" name="from"><label for="to">Arriving on:</label><input type="text" id="to" name="to"> <br>Number of Passengers: <input type="number" min="1" max="9"> <br><input type="submit" value="Find Flights"></form></body></html> Believe me, I am studying in Web Design course. If you have any knowledge about this, please reply to this post. Thank you.
  5. Trying to make the original post concise. A javascript function named ‘calShow’ below needs to be modified. The application that uses it allows users to create an adHoc report query by selecting data fields. When a new query is created using this application, the above function displays the calendaricon in front of the text boxes (4 of them) if date fields are selected. Otherwise, the calendar icon (datepicker) is hidden. The issue is that when a saved query is retrieved, the date value is pulled into the text box but the calendar icon is not display (datepicker is unavailable to change date). There is a c# method 'FillSavedReportQueryFields’' which calls ‘calShow' function (see 'calShow' code below). This function does display the datepicker, but it also erases the date value from the text boxes. I am okay with modifying 'calShowl' function to work correctly but I am also open to adding another javascript function, which will simply display the datepicker if the value is date (defined as "D"). I would appreciate any help with this
  • Create New...