8

You have two options here. you can use the SFDC stylesheet to render the fields as per the classic view which will not necessarily work in LEX (Lightning Experience). This is going to be a more limited option as you are at the mercy of Classic styling. Roll your own stylesheets using Lightning Design System see here This option is only good if you are ...


4

I used a lazy load technique. In my example I'm using my datepicker grid component, but it's the same principle: First, define your placeholder: <div aura:id="datePickerContainer" class="slds-p-horizontal--small slds-m-top--x-small slds-size--1-of-2 slds-medium-size--1-of-3 slds-large-size--2-of-12"> {!v.body} <!-- initial date display - note, ...


4

you can use Jquery datepicker. It is easy to control these thing in jQuery Datepicker. Here is a code sample for you. <label for="from">From</label> <input type="text" id="from" name="from"/> <label for="to">to</label> <input type="text" id="to" name="to"/> var dateToday = new Date(); var dates = $("#from, #to")....


4

You should be able to add the handlers after creation - The reason being is because you don't need to make your aura:id values unique. If there are multiple components with the same local ID, find() returns an array of the components. source So with that in mind, in your iteration, give the input dates all the same id of say... aura:id="repeatedDate" ...


4

Ok. Based on sanket's answer and finding that if a valid value is entered first, I have defaulted to value to the current date/time and now it works. Basically the issue only happened if the lightning:input did not have an initial value. Once that value is set it works properly..... Bug?? Working markup Markup <aura:attribute name="userDateTime" type=...


4

I would create two picklists one for month and one for year. This would mean you will need triggers or validation rules to validate the data .


3

tl;dr: I wasn't able to keep the datepicker position adjusted, but I did find an explanation for why the standard datepicker is behaving the way it is. It took an amount of searching and luck, but I was able to find another question that had a similar (but different) issue. Datepicker widget location issue The answer by Mark Masterson contains some ...


3

The pattern attribute is for a Regex validation: Specifies the regular expression that the input's value is checked against the component does not support this, An interesting post for you to read to better understand the reasoning behind this would be Is there any way to change input type=“date” format?. Bascially, it comes down to web standards. ...


3

The lightning developer guide strongly recommend against using other javacsript libraries with lightning. Instead why use lightning components such as <ui:inputDate> or <lightning:input type="date"> It's going to save you a bunch of time, and you won't get weird bugs because different javascript libraries are fighting for control of the DOM.


2

There are two ways you can handle it. use the apex variable "thedateinput" in VF and then copy its value in ObjectB in Apex. obj.Document_Date__c = thedateinput ; Create a ObjectB variable and expose it on VF page Apex: public ObjectB__c objBVar{get;set;} Vf: <apex:inputfield id="someId" value="{!objBVar.Document_Date__c}" required="false"/> ...


2

I have recently created a datepicker component.Here is the blog post about it. The blog contains code and implementation instructions. Unfortunately no timepicker. Some quick implementation details - for use in a VF page - (once the component is built): You will want a structure like this: VF Page (instantiate and add callback) DatepickerWrapper (...


2

I also faced this problem, If you use standard <apex:inputField for Date data type you have to use doctype="html 5.0" and type="date" component in <apex:inputField tag. But HTML5 input tags may not be supported on all browsers. Where as jQuery Calendar can be used everywhere. As a workaround what I did is I created a <apex:inputHidden field and ...


2

One thing to make sure if you are using classic date picker is, don't set StandardStyleSheet="false" in the page.


2

Two potential problems: 1) You are using the Select event to fire the controller. Try using the change event. 2) If that doesn't work, and I have found that it doesn't always work on the ui:inputDate fields, you can try setting up a handler: <aura:handler name="change" value="{!v.nchangeWeek}" action="{!c.changeWeek}"/>


2

This is probably not relevant, but just in case, I'll go ahead and post it as a possible answer. I ran into an issue where I started getting "too many component" errors, and tracked down a solution here at: Intermittant error: Too many components for aura Basically, if you're dynamically creating components and didn't specify the child component as a ...


2

Thanks to @Eric for the suggestion of locating a possible js library that was loading in http rather than https, turns out there was one that was buried and I had missed. Fixing that reference allowed the datepicker calendar to popup when the date was clicked.


2

Accessing elements with $Component variable is sometimes tricky as it requires full path from the location where its accessed upto the element. Prepared a visual diagram, might help in understanding clearly- Here is an example to illustrate: <apex:page id="page"> <script> // method to print the value function ...


2

You should try onfocus="DatePicker.pickDate(false, this, false);" <apex:inputField value="{!DateOfBirth}" label="Date of birth" onfocus="DatePicker.pickDate(false, this, false);"/> <script type="text/javascript"> $j = jQuery.noConflict(); $j(document).ready(function() { var cYear = new Date().getFullYear() ; var ...


2

There's no officially approved way to modify date picker like this. Instead, you could just display an error when the user selects a Sunday, or you could write your own date picker (or use one from jQuery or something).


2

I just grabbed a random datepicker library to test Pikaday and did not run into any issues: Upload the zip file to your static resources & create a lwc: component.html: <template> <div class="slds-m-around_medium"> <input type="text" class="date-picker" lwc:dom="manual"></input> </div> </template> ...


2

If I have understood your problem correctly, I think you make use of the validity property as described in the documentation. So instead of checking the null values, you can directly check if the field is valid using the below code. var validity = component.find("field").get("v.validity"); console.log("Is it valid? ", validity.valid); //returns true


2

With standardStyleSheets="true", SFDC generates HTML markup that includes <div class="datePicker" id="datePicker" style="display: none; left: 230px; top: 42px;"><div class="dateBar"><img src="/img/s.gif" alt="Previous Month" class="calLeft" onblur="this.className = 'calLeft';" onclick="DatePicker.datePicker.prevMonth();" onfocus="this....


2

The Datepicker range selector shown in the Lightning Design System Library is just the CSS part - the javascript logic for those blueprints are not fully implemented. Currently the out of box components like lightning-input type=date does not support a range functionality as shown in the lightning design system documentation (although it might be in ...


2

There's no reason for dynamic queries here; Salesforce is smart enough to ignore criteria that doesn't make sense. You can simply use the following instead: @AuraEnabled(cacheable=true) public static RecordWrapper[] getFarmData(DateTime startDateTime, DateTime endDateTime) { RecordWrapper[] results = new RecordWrapper[0]; for(Farm__c record: [ ...


1

Tried the below and it works. the key is the static resource name you need to refer is $Asset.SLDS from documentation To reference assets in the Lightning Design System, such as SVG icons and other images, use the URLFOR() formula function and the $Asset.SLDS global variable. To use SVG icons, add the required XML namespaces by using xmlns="...


1

To expand on my comments, add an onfocus and an onblur listener to your inputs eg: <input type="text" id="datepicker" onfocus="{!c.handleOnfocus}"> Define your handleOnfocus method similar to this: handleOnfocus: function (component,event,helper){ var el = event.target; if(el){ el.style.visibility = "none"; } } In your onblur handler, ...


1

Just try to use the <input type=date id ='' /> since it is a mobile view SF1 then you can use type = date, it renders the mobile calendar view and it looks cool


1

You could create a Formula field that outputs the value of your birthday field and than remove the original field from the layout.


1

There is no readonly attribute associated to an input element when the ui:inputdata renders, so there is no question of making the ui:date readonly. I was going to recommend lightning:input but you do not get the nice date picker option with lightning:input component This is what I did, Downloaded momentJS from here: https://momentjs.com/ and load it into ...


1

To answer your immediate question, this issue is directly caused by the ui:inputDate component provided by Salesforce. It's still using the locale parameter that has been deprecated in Summer 17. The locale parameter is deprecated for several methods in the AuraLocalizationService object. The validation for the locale parameter has also been tightened to ...


Only top voted, non community-wiki answers of a minimum length are eligible