Choose ISO8601 format for the datepicker

I am looking to set the default date format to ISO8601 yy-mm-dd in my code. Currently, it switches back to the default option if I choose a different format and then go back. How can I ensure that ISO format is always selected by default when someone picks a date?

<script>
  $(function() {
    $("#datepicker").datepicker();
    $("#format").on("change", function() {
      $("#datepicker").datepicker("option", "dateFormat", $(this).val());
    });
  });
</script>
<p>
  Date: <input type="text" id="datepicker" size="30">
</p>
<p>
  Format options:<br>
  <select id="format">
    <option value="yy-mm-dd" selected>ISO 8601 - yy-mm-dd</option>
    <option value="d M, y">Short - d M, y</option>
  </select>

Answer №1

If you want to achieve what you need, make sure to specify the dateFormat in the initialization options based on the default value of the selection:

$(function() {
  let $datepicker = $("#datepicker");
  let $format = $('#format');

  $datepicker.datepicker({
    dateFormat: $format.val()
  });

  $format.on("change", function() {
    $datepicker.datepicker("option", "dateFormat", this.value);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<p>
  Date: <input type="text" id="datepicker" size="30">
</p>
<p>
  Format options:<br>
  <select id="format">
    <option value="yy-mm-dd" selected>ISO 8601 - yy-mm-dd</option>
    <option value="d M, y">Short - d M, y</option>
  </select>
</p>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Just starting out in the world of CSS - mastering text arrangement and styling

This is my first attempt at writing CSS code. I would like to align all rows of the same block together, but I'm unsure of how to go about it. Here is what I'm attempting to achieve: If I were using regular HTML, I would simply create a table wi ...

What is the correct method for asynchronously loading CSS files in web development?

On a mission to enhance my website's performance, I set out to achieve the perfect score on PageSpeed Insights. Everything was going smoothly until I encountered an issue with CSS delivery. I initially achieved a flawless result by utilizing the prel ...

What steps should I take to repair my jQuery button slider?

I am facing a challenge with creating a carousel of three images in HTML using jQuery. When the user clicks on the "Next" or "Previous" buttons, I want to scroll through the images one by one. However, I am struggling to hide the other images when one is d ...

It seems that although both axios.put methods are identical, only one is functioning properly

Could someone clarify the distinction between these two syntaxes and why the first one is not functioning correctly? Attempting to use the first code block results in a 401 error: const handleSubmit = () => { axios.put(`url`, { headers: { Aut ...

Having several bootstrap modals on a single webpage

Bootstrap Modals are featured on my landing page. I have numerous bootstrap buttons with various data targets and modals. The content within the modal needs to be displayed based on the button's data target, linked to the modal via its ID. How can I ...

Utilize JavaScript to create a drop-down menu that appears when hovering over a URL for comparison

I've been scouring the internet for an answer to this issue over the past few days without much luck. The problem I'm facing is with a CSS drop-down menu that should only appear when hovering over a specific link. However, due to dynamically cre ...

Issue with Bootstrap navigation bar not displaying on iPad devices

Currently, I am working on creating a custom bootstrap menu that displays properly on an iPad screen size. I have implemented the standard navbar code from Bootstrap with a few tweaks. While it works well on smartphones and laptops, the issue arises when ...

Unexpected error: JSON data at line 1 column 1 of the JSON data is incomplete

I've encountered an issue with my script related to a JSON response error. Below is the code snippet in question: $(document).ready(function() { $('#btndouble').click(function(){ var address = $('#btcaddress').val(); ...

Converting Three.js camera rotation.y to a full 360 degrees rotation

Currently, I am attempting to rotate a 2D object in my Three.js scene to correspond with the camera's rotation.y value. However, I have encountered an issue with the radians returned by this value. The rotation seems strange, ranging from 0 to -1.4 ra ...

Firefox experiencing issues with overflowing HTML content

I am facing an issue with a table inside a div container where the content exceeds the container size. Interestingly, in Internet Explorer, the parent containers automatically expand to fit the table content. However, in Firefox, the div container only w ...

Loop through the XML string inside a for loop using Javascript

Hey everyone, I'm having some trouble with looping through strings for XML inside a for loop. I've attempted the following code but the loop doesn't seem to be working: var data = [{"name": "Tom", age: "20"}, {& ...

Issue with receiving request parameter in Spring MVC when using Ajax call

Having trouble sending a parameter using Ajax jquery to my spring class. Check out the code below. package com.controller; @Controller public class HelloWorldController { private static final Logger logger = LoggerFactory.getLogger(HelloWorldContr ...

What is the best way to eliminate the "0"s from the center of items within an array?

I have developed a table sorter that handles columns containing both letters and numbers, such as "thing 027". To facilitate sorting, I prepended zeros to the numbers. However, I am now looking for a cleaner way to remove these zeros from the numbers using ...

Importing a 3D Model Using Three.js

I've been trying to import a 3D model by following tutorials. I managed to successfully import using A-Frame Tags, but encountering issues with Three.js. The code snippets are from a tutorial on YouTube that I referred to: https://www.youtube.com/watc ...

Adjust the output number in a JavaScript BMI calculator to the nearest whole number when using the

Hey there, I'm currently working on a beginner project and could use some assistance. My project involves creating a basic BMI calculator using metric units, but I seem to be encountering issues with rounding numbers. Here is a snippet of my code: var ...

Responsive CSS - reordering div elements

#div1 { position: relative; max-width: 100%; height: 100px; background-color: green; color: white; } #div2 { position: relative; max-width: 100%; height: 100px; background- ...

What is the best way to incorporate a delay into a button using the Polymer framework?

I am in the process of creating a Polymer-based webpage, and I want to include a link to the paper-button I have created. I have managed to link it, but I would like to incorporate a delay so that users can see the ripple animation after clicking. In orde ...

Tips for placing text alongside a logo while maintaining navigation links on the right side

I am a beginner in the world of CSS and have been working on a practice project. However, I am struggling to achieve what the title suggests. I attempted using the margin-right: auto method that I've learned from various tutorials, but it only ends u ...

"Enhancing HTML tables with jQuery for a polished look

This table belongs to me: <tr class=items> <td id=id_1></td> <td id=city_id_1></td> <td id=temp_1></td> <td id=date_1></td> </tr> ...

Utilizing React with an alternative server-side language

I have a small PHP backend for my website and I want to incorporate React on the front end. However, being new to front-end development and React, I am finding this process confusing as most online examples assume a JavaScript backend with Node modules. W ...