You need to sign in to do that
Don't have an account?
Rajesh Kumar SF
How to insert manually date with auto slash and with date picker both in one lightning-input in lwc ?
I am trying to build functionallity in the lightning-input lwc component, in which user can insert manually the date with auto slash functionallity or by date picker.
<template> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle example_disable_while_logging" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <ul class="dropdown-menu"> <li> <div class="input-group" style="display: inline-flex;"> <lightning-input id="dos_start" maxlength="10" onkeyup={checkValue} value={dDate} type="text" class="date-picker form-control" placeholder="Begin"></lightning-input> <span id="hoverOverAreal"> <a onclick={hoverOverAreal} html-log_this ="false"> <lightning-button-icon id="lnkimag1" style="margin-top: 8px;" icon-name="standard:date_input"></lightning-button-icon> <lightning-output-field style="width: 7em; margin-top: -15px;">(MMDDYYYY)</lightning-output-field> </a> </span> </div> </li> <li> <div class="input-group" style="display: inline-flex;"> <lightning-input id="dos_end" maxlength="10" value={eDate} onkeyup={checkValue} type="text" class="date-picker form-control" placeholder="End"></lightning-input> <span id="hoverOverArea2"> <a onclick={hoverOverArea2} html-log_this ="false"> <lightning-button-icon id="lnkimag2" style="margin-top: 8px;" icon-name="standard:date_input"></lightning-button-icon> <lightning-output-field style="width: 7em; margin-top: -15px;">(MMDDYYYY)</lightning-output-field> </a> </span> </div> </li> </ul> </button> </div> </template>
import { LightningElement, track } from 'lwc'; export default class CustomDatePicker extends LightningElement { @track edate= ""; checkValue(evt) { var str = evt.target.value; var stl = str.length; var char = ""; var c = ""; console.log('str: ' + str + ' len: ' + stl); if ( stl > 9 ) evt.preventDefault(); char = str; if ( stl == 2) char = str + "/"; if ( stl == 5) char = str + "/"; this.edate = char; console.log('this is char valueee:'+ char); var char; if(event.target.dataset.id === 'text'){ this.numberFieldValue = char; }else if(event.target.dataset.id === 'date'){ this.checkBoxFieldValue = char; } var dateInput = eDate ? eDate.which : window.event.keyCode; if(dateInput == 8){ dDate.char = dDate.char.substr(0, dDate.char.length); return; } var dateValue = dDate.char; var dateValueSplit = dateValue.split('/'); for(var a = 0; a< dateValueSplit.length; a++){ dateValueSplit[a] != dateValueSplit[a] + dateValueSplit[a]; if(dateValueSplit[a] != +dateValueSplit[a]){ dateValueSplit[a] = dateValueSplit[a].substr(0, dateValueSplit[a].length - 1); } } dateValue = dateValueSplit.join('/'); if(dateValue.length == 2 || dateValue.length == 5) dateValue += '/'; dDate.char = dateValue; } }
Try the code as suggested in the below blogs,
https://developer.salesforce.com/forums/?id=9060G0000005TVTQA2
https://success.salesforce.com/answers?id=906300000010wkuAAA
https://stackoverflow.com/questions/5005877/whats-the-best-way-to-automatically-insert-slashes-in-date-fields
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks.