Closed mailmrmanoj closed 7 years ago
Not the best solution, but you could make something like this as a workaround:
$("#test .sm-input-container").on('focus', function(){
var me = $(this);
if(!me.closest("md-input-container").hasClass(".md-input-focused"))
{
$(".sm-calender-pane.show button[aria-label='Custom Range']").trigger('click');
}
});
HTML:
<sm-range-picker-input
id="test"
fname="Date of Pay"
label="Date of Pay"
form="test"
ng-model="vm.employee.default"
flex="50"
format="DD-MMM-YYYY"
floating-label="true"
divider="To"
week-start-day="Monday"
custom-to-home="true"
allow-clear="true"
allow-empty="true"
on-range-select="vm.dayofPaySelected(range)">
</sm-range-picker-input>
hello mr.oscar09 the code provided by you is not working to me can u please tell me where i should place that code.
are you getting any errors? If you are using the HTML code that I posted previously (with the same ID). Try the following code snippet in your browser's console:
$("#test .sm-input-container").on('focus', function(){ var me = $(this); console.log('FOCUS was triggered'); if(!me.closest("md-input-container").hasClass(".md-input-focused")) { console.log('INPUT focus triggered'); $(".sm-calender-pane.show button[aria-label='Custom Range']").trigger('click'); } });
If the selectors are correct, you should be seeing the messages: "focus was triggered" and "input focus triggered"
I wanted to show the start and end dates in smRangePickerInut withoust displaying Range picker configurations such as "Today","Last 7 days","This month" etc. However I managed to hide these selector options and show only "Custom Range" by using setRangeDefaultList()..
and the end result was like ..![image](https://cloud.githubusercontent.com/assets/7077567/24282470/9d5852ca-1085-11e7-9ad1-502002dcfaa2.png)
But I wanted to have a view like one below as soon as the user clicks on the date range picker