1. Home
  2. Forum
  3. Vue
  4. Enable Mask on DateTimePicker and TimePicker in vue3

Enable Mask on DateTimePicker and TimePicker in vue3

Hi,

I'm try to enable mask on DateTimePicker and TimePicker component programaticall (without template) on vue3. I've been following the official documentation for these components:

Demos:
https://ej2.syncfusion.com/vue/demos/#/material/datetimepicker/input-mask.html
https://ej2.syncfusion.com/vue/demos/#/material/timepicker/input-mask.html

Documentation: (examples don't work, they stay freezed on 'Loading....' status)
https://ej2.syncfusion.com/vue/documentation/datetimepicker/date-time-masking/#enable-the-masked-input

I've added MaskedDateTime in provide property at App.vue:

  provide: {
    grid: [Toolbar, Sort, Page, InfiniteScroll, Filter, DetailRow, CommandColumn, Edit, ForeignKey, RowDD, Selection],
    schedule: [Day, Week, WorkWeek, Month, DragAndDrop, Resize, TimelineViews],
    listbox: [CheckBoxSelection],
    datetimepicker: [MaskedDateTime],
    timepicker: [MaskedDateTime],
  },
});
</script>


And This is an extract from my DateTimePicker component.

import { DateTimePicker, DateTimePickerModel } from '@syncfusion/ej2-vue-calendars';
import { Ref } from 'vue';

const editDateTimePicker = (table: Ref): CreateWrite => {
  let dateTimePickerInstance: DateTimePicker;
  return {
    read: () => dateTimePickerInstance.value,
    write: (args: Args) => {
      const { field } = (args as any).column;
      const rowData: any = args.rowData ?? {};
      const cellValue: string = rowData[field] ?? [];
      const aDate = new Date(cellValue);

      const dateTimePickerOptions: DateTimePickerModel = {
        value: aDate,
        enableMask: true,
        format: 'dd/MM/yyyy HH:mm',
        change: onChangeValue,  //Section ommited to improve readability
      };

      dateTimePickerInstance = new DateTimePicker(dateTimePickerOptions);

      const element = args?.element as HTMLElement;
      dateTimePickerInstance.appendTo(element);
    },
  };
};

export default editDateTimePicker;


But mask doesn't appear at DateTimePicker neither TimePicker.

How can I solve this problem?


3 Replies
SP Sureshkumar P Syncfusion Team February 23, 2022 01:49 PM UTC

Hi Alberto ,  
 
We have checked your query and tried to reproduce your reported problem at our end, but it was unsuccessful. In Grid date column definition, we have set the format as “M/d/yyyy hh:mm a” and that format was applied in the Grid in initial rendering. While editing the record, we have enabled the mask and set the format as “dd/MM/yyyy HH:mm” for DateTimePicker component. The applied mask format was working properly while editing a record. Please refer the below code example and sample for more information. 
 
write: (args) => {  
          datePickerObj = new DateTimePicker({  
            value: new Date(args.rowData[args.column.field]),  
            enableMask: true,  
            format: "dd/MM/yyyy HH:mm",  
            floatLabelType: "Never",  
          });  
          datePickerObj.appendTo(elem);  
        },  
 
 
 
Sample: https://codesandbox.io/s/misty-pond-fntxxu?file=/src/App.vue  
 
Screenshot: 
 
 
If you still face the issue, please share the below details that will be helpful for us to provide better solution.  
 
1.       Please share your syncfusion package version.  
 
2.       Please share your sample datasource structure type, we would like to check on what type of date format you are maintaining for date column.  
 
3.       Share your issue scenario in video demonstration format. 
 
Regards, 
Sureshkumar P 


AP Alberto Provencio replied to Sureshkumar P February 24, 2022 02:13 PM UTC

Sorry but your example doesn't work.


We've already used enableMask and format attributes but it doesn't work.


How can we solve this problem?


RR Rajapandi Ravi Syncfusion Team February 25, 2022 02:22 PM UTC

Hi Alberto, 

In our previous update, we have provided the sample, the applied mask format was working properly while editing a record. Please refer the below sample for more information. 


Screenshot: 

 

Please share the below details that will be helpful for us to provide better solution.   
  
1.       Please share your syncfusion package version.   
  
2.       Please share your sample datasource structure type, we would like to check on what type of date format you are maintaining for date column. 

3)       Please share your complete Grid rendering code, we would like to check your Grid date column definition and format. 

4)       Share your issue scenario in video demonstration format. 

5)      Share any simple issue reproducible sample or try to reproduce the issue in the above attached sample. 


Regards, 
Rajapandi R 


Loader.
Up arrow icon