Establish the predefined date for the air-datepicker

I am currently utilizing the air-datepicker inline feature.

My objective is to establish the starting date for it.

Below is the script detailing my attempt:

export function load_datepickers_inline():void {
const search_legs_0_datepicker = $("#search_legs_0_datepicker");
const leg_0_datepicker = $("#search_legs_0_datepicker").datepicker({
  language: gon.locale,
  classes: 'inline-picker',
  selectOtherMonths: true,
  showOtherMonths: true,
  changeMonth: true,
  changeYear:true,
  altField: '#search_legs_0_date',
  selectDate: new Date(search_legs_0_datepicker.attr("data-defaultDate")),
  minDate: new Date(search_legs_0_datepicker.attr('data-mindate')),
  maxDate: new Date(search_legs_0_datepicker.attr('data-maxdate')),
  altFormat: 'yy-mm-dd',
  onSelect: (dateText, inst) => {
    const date = new Date(dateText);
    if (!leg_0_datepicker) { return false; }
    leg_1_datepicker.datepicker("option", "minDate", date);
    if ($("#search_legs_0_hotel_date").length > 0) {
      $('#search_legs_0_hotel_date').datepicker().data('datepicker').update('minDate', date);
      $('#search_legs_0_hotel_date').datepicker().data('datepicker').datepicker("setDate", date);
      $('#search_legs_1_hotel_date').datepicker().data('datepicker').update('minDate', date);
    }
  }
})

const search_legs_1_datepicker = $("#search_legs_1_datepicker");
var leg_1_datepicker = $("#search_legs_1_datepicker").datepicker({
  selectOtherMonths: true,
  showOtherMonths: true,
  language: gon.locale,
  changeMonth: true,
  changeYear:true,
  classes: 'inline-picker',
  altField: '#search_legs_1_date',
  selectDate: new Date(search_legs_1_datepicker.attr("data-defaultDate")),
  minDate: new Date(search_legs_1_datepicker.attr('data-mindate')),
  maxDate: new Date(search_legs_1_datepicker.attr('data-maxdate')),
  altFormat: 'yy-mm-dd',
  onSelect: (formattedDate, date, inst) => {
    if ($("#search_legs_1_hotel_date").length > 0) {
      $('#search_legs_0_hotel_date').datepicker().data('datepicker').update('maxDate', date);
      $('#search_legs_1_hotel_date').datepicker().data('datepicker').update('maxDate', date);
      $('#search_legs_1_hotel_date').datepicker().data('datepicker').datepicker("setDate", date);
    }
  }
})

Everything seems to be in order, but the default date is not highlighted. Is there a specific setting required for this?

Thank you for your assistance.

Answer №1

According to the provided documentation, selectDate is a function that needs to be used in the following manner:

leg_1_datepicker.selectDate(new Date(2018, 3, 11));

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

Utilizing helper functions in Node based on their specific types

In my helper module, I have different files like content, user, etc. These files define various helpers that can be used in the router. Below is the code for the router: router.js var helper = require("./helper"); function index(response) { response ...

Using plain JavaScript, adding an element to an array by pushing the value of a string variable in an index position rather than pushing the

I have the following JavaScript code snippet: let array = []; const datas = [ 'name1', 'name2', 'name3', ]; async function getData() { datas.forEach((data) => { let myData = data.name; if(!array.include ...

Instructions on setting div opacity when Overflow is set to visibleExplanation on setting opacity for div with Overflow

In my HTML code, I have a div element and an image tag stacked one on top of the other. The div is smaller than the image. I have set the overflow property to visible for the div. My query is, when I add an image to the image tag, the content that overflow ...

Is the TypeScript compiler neglecting the tsconfig.json file?

I am new to TypeScript and currently exploring how to set it up in WebStorm. One of the first steps I took was creating a tsconfig.json file in the main directory of my project and updating the built-in TypeScript compiler to version 1.6.2. However, despit ...

Tips for correctly deleting a duplicate ref Object ID following the removal of a Document

Coming from a background in relational databases, I'm encountering a challenge with a pattern in Mongoose. Let's say we have SchemaA and SchemaB (for example, pets and people): const Person = new Schema({ name: String, pets: [{ ref: ...

Utilizing AJAX with a combination of JSON and HTML data types

I recently completed a tutorial on ajax and implemented a script that retrieves JSON data and appends it to a table. $.ajax({ url: 'insert.php', type: 'POST', data: {data1: name, data2: phone, data3: address}, dataTyp ...

Discover the best ways to repurpose an HTML page with varying jQuery/PHP code

After recently venturing into web development, I decided to create a guestbook that requires login information. Users with valid accounts have the ability to log in/out, create new entries, and edit their own content. They also have the option to change th ...

Using a combination of nested fetch() and array.map() does not allow for the return

My previous coding experience didn't present any issues with rendering HTML. Typically, I only needed to use one fetch() function. However, in this particular scenario, it appears that I require two fetch calls. The first fetch retrieves a product ID ...

Issue with Discord.js: Newly joined user's username appears as undefined

robot.on('guildmateEntry', person =>{ const greeting = new Discord.MessageEmbed() .setTitle(`Greetings to the realm, ${individual}!`) const room = person.guild.channels.cache.find(channel => channel.name === " ...

A method for dividing a string into separate characters and organizing them into an array of JSON objects

I have a collection of JSON objects with a fixed key 'type' and additional keys based on the type. Here is an example of how it looks: theArray = [ { "type": "text", "text": "= SUM(" ...

Extract the input value from the bootstrap-datepicker using JavaScript

I'm working on a Ruby-on-Rails project and I want to include a string from the bootstrap datepicker into a hidden field. However, I am unsure of how to reference an input class in this process. Below is the structure of my form: <%= simple_form_f ...

What is the reason behind the shifting behavior of e.currentTarget when using event delegation in jQuery?

Click here for the code snippet <div id="container"> <button id="foo">Foo button</button> <button id="bar">Bar button</button> </div> $('#container').on('click', function(e) { var targ ...

The shop named 'someStore' is currently unavailable! Please ensure that it is being offered by a valid Provider

I'm having trouble setting up a new project using React, Typescript, and MobX. Despite having a relatively simple piece of code, I can't seem to get MobX to work properly. It keeps showing me this error message: Uncaught Error: MobX injector: S ...

A guide on iterating through an array in vue.js and appending a new attribute to each object

To incorporate a new property or array item into an existing virtual DOM element in Vue.js, the $set function must be utilized. Attempting to do so directly can cause issues: For objects: this.myObject.newProperty = "value"; For arrays: ...

What is the best way to generate an array of objects by extracting specific properties from another array object?

Here is the information provided: const cocktail = [ { "idDrink":"13070", "strDrink":"Fahrenheit 5000", "strGlass":"Shot glass", "strInstructions":&qu ...

Troubleshooting: Angular version 4.3 Interceptor malfunctioning

I have been trying to implement new interceptors in Angular 4.3 to set the authorization header for all requests, but it doesn't seem to be working. I placed a breakpoint inside the interceptor's 'intercept' method, but the browser didn ...

Using jqGrid to load additional JSON data after the initial local data has already been populated in the

I encountered a specific issue: I have a compact form with four choices. Users can choose to fill them out or not, and upon clicking 'Ok', a jqGrid is loaded with data based on those selections. To accommodate dynamic column formatting, my servle ...

Steps for mandating the specification of a type parameter for a generic React component

When setting up a new instance of a generic React component, I noticed that the TypeScript type checker automatically defaults to unknown without requiring me to specify the type argument: Ideally, I would prefer if TypeScript prompted for the explicit ty ...

Using HTML and JavaScript to choose relatives from the extended family: Uncles and Aunts

Looking for a better way to target elements in your HTML code? <div class="chunk" id=""> <div class="chunkContent"> <div class="textLeft" ></div> <div class="textRight" ></div> <div class= ...

Issues with Disabling the Browser's Back Button with jquery

I have been attempting to prevent the back button from functioning in a specific Browser, Microsoft Bing. Interestingly, my code works only if I click somewhere in the window first. If I don't click anywhere and try to go back directly, it still allow ...