Hello,
I am using Wix input field $w(datePicker) and can’t figure out how to permanently show the calendar view on page load. I was thinking that a workaround could be to “click” the calendar icon on load, however, there is no “trigger” or “Click” code in wix.
How can I expand the calendar pop up on page load so it is shown to the user OR does anyone have suggestions for other date pickers I can use?
Thanks!
Tarra
Look at my article: https://girizano.wixsite.com/codecorner/home/date-picker-in-another-language
The only thing you would have to change is to set the html-component NOT to hiddenOnLoad.
Thanks @giri-zano ! I will try this out. It is so unfortunate that Wix can’t make this simple update to the date picker and we are required to do this massive workaround.
My only concern is that I need “disabled dates” coded into my datepicker - will this still be applicable if I go with your solution?
@tarrahopwood I agree fully. About the disabled dates: it is possible, but I did not implement it, because I didn´t need it. But FlatPickr does offer that possibility, you will just have to look up how to do it in the FlatPickr documentation and then .postMessage this info to the html-component. The communication is already done using an array and you could easily add more info.
@giri-zano Hi Giri! I have implemented! Thank you so much. I have modified the code to be a simple datepicker. instead of connecting it to the EVENTS collection and pulling in existing records - i want to INSERT a new record into my collection. Do you have a simple way of modifying the code to do this?
Also - you note that this cannot be on a dynamic page? however, i am using the date picker on a dynamic member page in which they are scheduling a delivery for a unique order - is this going to effect anything?
If its helpful - here is my modified code. I was hesitant to take out the code regarding dataset1:
$w.onReady( function () {
$w(“#dataset1”).onReady(() => {
sendDate(“#html1”, “fldStartDate”);
$w(“#html1”).onMessage((event, $w) => {
let boolEventIsString = ( typeof event.data === “string”);
if (!boolEventIsString) {
$w(“#datePicker1”).value = new Date(event.data);
$w(“#txtDate1”).text = convertLongDate($w(“#datePicker1”).value);
} else {
sendDate(“#html1”, “fldStartDate”);
}
});
$w(“#datePicker1”).onCustomValidation((value, reject) => {
$w(“#txtDate1”).text = convertLongDate(value);
$w(‘#dataset1’).setFieldValue(“fldStartDate”, value);
});
$w(“#dataset1”).onBeforeSave(() => {
$w(“#txtSaveMessage”).text = “Saving, please wait.”;
$w(“#txtSaveMessage”).show(); // unhide the “Dates saved text after row is saved”
});
$w(“#dataset1”).onAfterSave(() => {
$w(“#txtSaveMessage”).text = “Saved. Now reload”;
console.log(“In aftersave”);
});
$w(“#dataset1”).onItemValuesChanged((itemBeforeChange, updatedItem) => {
console.log(“in onItemValuesChanged”);
});
});
});
function convertLongDate(DateIn) {
let thisDay = DateIn.getDate();
let strthisDay = “0” + thisDay.toString();
strthisDay = strthisDay.substr(strthisDay.length - 2, 2);
let thisMonth = DateIn.getMonth() + 101;
let strthisMonth = thisMonth.toString();
strthisMonth = strthisMonth.substr(strthisMonth.length - 2, 2);
let thisYear = DateIn.getFullYear();
let formattedDate = strthisDay + “/” + strthisMonth + “/” + thisYear;
return formattedDate;
}
import wixData from “wix-data”;
export function sendDate(element, fieldname) {
var objMessage = ;
let thisdatDate = $w(‘#dataset1’).getCurrentItem()[fieldname];
objMessage.push(thisdatDate);
$w(element).postMessage(objMessage);
}
/////ON CLICK OF BUTTON - CREATE NEW ORDER WITH DELIVERY DATE//////
export function btnSave_click(event, $w) {
console.log(“in btnsave”);
var DATE = $w(“#datePicker1”).value;
var STATUSID = “8ffc283a-2e39-4e1c-9f4e-11466f1aa7ea”
let OrderCreate = {
“shipmentDate”: DATE,
“fufillmentStatus”: STATUSID,
};
wixData.insert(“Deliveries”, OrderCreate)
.then( (results) => {
let OrderCreated = results;
console.log(OrderCreated)
} )
. catch ( (err) => {
let errorMsg = err;
})
}