mominsamir / smDateTimeRangePicker

Angular Material Date Picker, DateTime Picker, Date Range Picker, Date Time range picker
http://mominsamir.github.io/smDateTimeRangePicker/
MIT License
130 stars 50 forks source link

Show only custom start and end date without label #142

Closed mailmrmanoj closed 7 years ago

mailmrmanoj commented 7 years ago

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()..

  pickerProvider.setRangeDefaultList([

            ]);

and the end result was like .. image

But I wanted to have a view like one below as soon as the user clicks on the date range picker

image

oscar09 commented 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>
vamsideepak commented 6 years ago

hello mr.oscar09 the code provided by you is not working to me can u please tell me where i should place that code.

oscar09 commented 6 years ago

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"