diff --git a/frontend/src/components/Filter.vue b/frontend/src/components/Filter.vue
index 5d982598..d5281901 100644
--- a/frontend/src/components/Filter.vue
+++ b/frontend/src/components/Filter.vue
@@ -44,19 +44,10 @@
                 />
               </div>
               <div id="value" class="!min-w-[140px]">
-                <Link
-                  v-if="typeLink.includes(f.field.fieldtype)"
-                  class="form-control"
-                  :value="f.value"
-                  :doctype="f.field.options"
-                  @change="(v) => updateValue(v, f)"
-                  placeholder="Value"
-                />
                 <component
-                  v-else
-                  :is="getValSelect(f.field.fieldtype, f.field.options)"
+                  :is="getValSelect(f)"
                   :value="f.value"
-                  @change="(e) => updateValue(e.target.value, f)"
+                  @change="(v) => updateValue(v, f)"
                   placeholder="Value"
                 />
               </div>
@@ -103,6 +94,8 @@
   </NestedPopover>
 </template>
 <script setup>
+import DatePicker from '@/components/Controls/DatePicker.vue'
+import DateRangePicker from '@/components/Controls/DateRangePicker.vue'
 import NestedPopover from '@/components/NestedPopover.vue'
 import FilterIcon from '@/components/Icons/FilterIcon.vue'
 import Link from '@/components/Controls/Link.vue'
@@ -114,6 +107,7 @@ const typeLink = ['Link']
 const typeNumber = ['Float', 'Int']
 const typeSelect = ['Select']
 const typeString = ['Data', 'Long Text', 'Small Text', 'Text Editor', 'Text']
+const typeDate = ['Date', 'Datetime']
 
 const props = defineProps({
   doctype: {
@@ -206,6 +200,7 @@ function getOperators(fieldtype, fieldname) {
     )
   }
   if (fieldname === '_assign') {
+    // TODO: make equals and not equals work
     options = [
       { label: 'Like', value: 'like' },
       { label: 'Not Like', value: 'not like' },
@@ -226,18 +221,33 @@ function getOperators(fieldtype, fieldname) {
   if (typeSelect.includes(fieldtype) || typeLink.includes(fieldtype)) {
     options.push(
       ...[
-        { label: 'Is', value: 'is' },
-        { label: 'Is Not', value: 'is not' },
+        { label: 'Equals', value: 'equals' },
+        { label: 'Not Equals', value: 'not equals' },
       ]
     )
   }
   if (typeCheck.includes(fieldtype)) {
     options.push(...[{ label: 'Equals', value: 'equals' }])
   }
+  if (typeDate.includes(fieldtype)) {
+    options.push(
+      ...[
+        { label: 'Is', value: 'is' },
+        { label: '>', value: '>' },
+        { label: '<', value: '<' },
+        { label: '>=', value: '>=' },
+        { label: '<=', value: '<=' },
+        { label: 'Between', value: 'between' },
+        { label: 'Timespan', value: 'timespan' },
+      ]
+    )
+  }
   return options
 }
 
-function getValSelect(fieldtype, options) {
+function getValSelect(f) {
+  const { field, operator } = f
+  const { fieldtype, options } = field
   if (typeSelect.includes(fieldtype) || typeCheck.includes(fieldtype)) {
     const _options =
       fieldtype == 'Check' ? ['Yes', 'No'] : getSelectOptions(options)
@@ -248,6 +258,33 @@ function getValSelect(fieldtype, options) {
         value: o,
       })),
     })
+  } else if (operator == 'is') {
+    return h(FormControl, {
+      type: 'select',
+      options: [
+        {
+          label: 'Set',
+          value: 'set',
+        },
+        {
+          label: 'Not Set',
+          value: 'not set',
+        },
+      ],
+    })
+  } else if (operator == 'timespan') {
+    return h(FormControl, {
+      type: 'select',
+      options: timespanOptions,
+    })
+  } else if (typeLink.includes(fieldtype)) {
+    return h(Link, { class: 'form-control', doctype: options })
+  } else if (typeNumber.includes(fieldtype)) {
+    return h(FormControl, { type: 'number' })
+  } else if (typeDate.includes(fieldtype) && operator == 'between') {
+    return h(DateRangePicker)
+  } else if (typeDate.includes(fieldtype)) {
+    return h(DatePicker)
   } else {
     return h(FormControl, { type: 'text' })
   }
@@ -260,16 +297,22 @@ function getDefaultValue(field) {
   if (typeCheck.includes(field.fieldtype)) {
     return 'Yes'
   }
+  if (typeDate.includes(field.fieldtype)) {
+    return null
+  }
   return ''
 }
 
 function getDefaultOperator(fieldtype) {
   if (typeSelect.includes(fieldtype) || typeLink.includes(fieldtype)) {
-    return 'is'
+    return 'equals'
   }
   if (typeCheck.includes(fieldtype) || typeNumber.includes(fieldtype)) {
     return 'equals'
   }
+  if (typeDate.includes(fieldtype)) {
+    return 'between'
+  }
   return 'like'
 }
 
@@ -320,15 +363,38 @@ function clearfilter(close) {
 }
 
 function updateValue(value, filter) {
-  filter.value = value
+  value = value.target ? value.target.value : value
+  if (filter.operator === 'between') {
+    filter.value = [value.split(',')[0], value.split(',')[1]]
+  } else {
+    filter.value = value
+  }
   apply()
 }
 
 function updateOperator(event, filter) {
+  let oldOperatorValue = event.target._value
+  let newOperatorValue = event.target.value
   filter.operator = event.target.value
+  if (!isSameTypeOperator(oldOperatorValue, newOperatorValue)) {
+    filter.value = getDefaultValue(filter.field)
+  }
+  if (newOperatorValue === 'is' || newOperatorValue === 'is not') {
+    filter.value = 'set'
+  }
   apply()
 }
 
+function isSameTypeOperator(oldOperator, newOperator) {
+  let textOperators = ['equals', 'not equals', '>', '<', '>=', '<=']
+  if (
+    textOperators.includes(oldOperator) &&
+    textOperators.includes(newOperator)
+  )
+    return true
+  return false
+}
+
 function apply() {
   let _filters = []
   filters.value.forEach((f) => {
@@ -364,8 +430,8 @@ function transformIn(f) {
 }
 
 const operatorMap = {
-  is: '=',
-  'is not': '!=',
+  is: 'is',
+  'is not': 'is not',
   equals: '=',
   'not equals': '!=',
   yes: true,
@@ -376,12 +442,16 @@ const operatorMap = {
   '<': '<',
   '>=': '>=',
   '<=': '<=',
+  between: 'between',
+  timespan: 'timespan',
 }
 
 const oppositeOperatorMap = {
-  '=': 'is',
+  is: 'is',
+  '=': 'equals',
+  '!=': 'not equals',
   equals: 'equals',
-  '!=': 'is not',
+  'is not': 'is not',
   true: 'yes',
   false: 'no',
   LIKE: 'like',
@@ -390,5 +460,78 @@ const oppositeOperatorMap = {
   '<': '<',
   '>=': '>=',
   '<=': '<=',
+  between: 'between',
+  timespan: 'timespan',
 }
+
+const timespanOptions = [
+  {
+    label: 'Last Week',
+    value: 'last week',
+  },
+  {
+    label: 'Last Month',
+    value: 'last month',
+  },
+  {
+    label: 'Last Quarter',
+    value: 'last quarter',
+  },
+  {
+    label: 'Last 6 Months',
+    value: 'last 6 months',
+  },
+  {
+    label: 'Last Year',
+    value: 'last year',
+  },
+  {
+    label: 'Yesterday',
+    value: 'yesterday',
+  },
+  {
+    label: 'Today',
+    value: 'today',
+  },
+  {
+    label: 'Tomorrow',
+    value: 'tomorrow',
+  },
+  {
+    label: 'This Week',
+    value: 'this week',
+  },
+  {
+    label: 'This Month',
+    value: 'this month',
+  },
+  {
+    label: 'This Quarter',
+    value: 'this quarter',
+  },
+  {
+    label: 'This Year',
+    value: 'this year',
+  },
+  {
+    label: 'Next Week',
+    value: 'next week',
+  },
+  {
+    label: 'Next Month',
+    value: 'next month',
+  },
+  {
+    label: 'Next Quarter',
+    value: 'next quarter',
+  },
+  {
+    label: 'Next 6 Months',
+    value: 'next 6 months',
+  },
+  {
+    label: 'Next Year',
+    value: 'next year',
+  },
+]
 </script>