Date field format issue

[saikiran Reddy]

Hi,

I am facing issue with date filed in the syncfusion query builder. Whenever I create a Query for date filed  syncfusion create a SQL query using getSqlFromRules method , ​like below

table_name.column_name<= '3/14/2023'

When I run this query with the above format MySQL gives an incorrect date value.

So, how can I change the Date type format like - 2023-03-14

Thank you,

[YuvanShankar Arunagiri]

Hi Saikiran,

We have checked your reported query and prepared the sample based on your requirement. Using the format property of Query builder column, we can set the format of the date value shown as below.

API link: https://ej2.syncfusion.com/angular/documentation/api/query-builder/columnsModel/

<ejs-querybuilder #querybuilder class="row" [dataSource]="dataSource">

    <e-columns>

      ……….

      <e-column field="HireDate" label="Hire Date" type="date" format="yyyy-MM-dd"></e-column>

    </e-columns>

  </ejs-querybuilder>

Output screenshot:

Sample link: https://stackblitz.com/edit/angular-exkcya?file=src%2Fapp.component.html

Get back to us if you need any further assistance on this. 

Regards,

YuvanShankar A

[saikiran Reddy]

Thank you YuvanShankar Arunagiri

[YuvanShankar Arunagiri]

You are welcome, Saikiran. Please get back to us if you need any further assistance on this.

If that post is helpful, please consider accepting it as the solution so that other members can locate it more quickly.

[saikiran Reddy]

Hi, 

Is there any way to stop allowing custom editing,

When I enter any random string in the date field, the validateFileds method returns true.

How can we restrict entering any value?

[YuvanShankar Arunagiri]

Saikiran,

Using the valueModel property of Query builder component, we can prevent the custom editing in date picker field. Kindly refer to the below code snippet and sample link.

API link for DatePicker component: https://ej2.syncfusion.com/angular/documentation/api/datepicker

<ejs-querybuilder #querybuilder class="row" [dataSource]="dataSource" [valueModel] = "{

    datePickerModel: {

      allowEdit: false

    }}">>

Sample link: https://stackblitz.com/edit/angular-exkcya?file=src%2Fapp.component.html

Get back to us if you need any further assistance on this.