Grey out particular dates and weekends in Date selection field

As far as I know, you can't grey out dates in date fields. You can use validation to achieve similar things(to restrict date selection).

sri123 

sri123 said:

I should be able to grey out the weekends for the user while selecting any date on a date field.

Appian Date Picker Field does not support this feature.

I'd suggest you use standard field validations.  The real only alternative is to build your own novel calendar picker component (you could probably cobble something together using card Layout items arranged in tiles, etc).  If you have no idea how to do that, then I suggest just sticking with validations, as it's fairly straightforward.

+1 for validations. I would advise against buillding a custom component for this.

Disabling dates in the calendar is not possible in Appian's Date field. There are two alternatives

1. Display validations when user selects certain dates

2. Create your own calendar using OOTB components and you can customise as you wish.

Please refer this thread for quick start

community.appian.com/.../how-to-create-calendar-component-using-card-layout-and-display-the-attendance-marked-leaves-taken-and-current-date-in-different-color-coding

You can use validations or customize calendar to achieve this.  

Hi sri123 

Date Picker Field does not support this feature.

Can you have a look at this code once it may help you

a!localVariables(
  local!toDate,
  local!months: {
    "JANUARY",
    "FEBRUARY",
    "MARCH",
    "APRIL",
    "MAY",
    "JUNE",
    "JULY",
    "AUGUST",
    "SEPTEMBER",
    "OCTOBER",
    "NOVEMBER",
    "DECEMBER"
  },
  local!weekDays: {
    "MON",
    "TUE",
    "WED",
    "THU",
    "FRI",
    "SAT",
    "SUN"
  },
  local!date: date(
    year(local(now())),
    month(local(now())),
    day(local(now()))
  ),
  local!month: month(local!date),
  local!year: year(local!date),
  local!daysInMonth: daysinmonth(local!month, local!year),
  local!startDay: weekday(date(local!year, local!month, 1), 2),
  local!endDay: weekday(eomonth(local!date, 0), 2),
  local!dates: a!forEach(
    items: enumerate(local!daysInMonth),
    expression: date(local!year, local!month, fv!index)
  ),
  local!leftPad: reverse(
    todate(
      a!forEach(
        items: enumerate(local!startDay - 1),
        expression: a!subtractDateTime(
          date(local!year, local!month, 1),
          0,
          0,
          fv!index
        )
      )
    )
  ),
  local!rightPad: todate(
    a!forEach(
      items: enumerate(7 - local!endDay),
      expression: a!addDateTime(
        date(
          local!year,
          local!month,
          local!daysInMonth
        ),
        0,
        0,
        fv!index
      )
    )
  ),
  local!finalDates: a!flatten(
    {
      local!leftPad,
      local!dates,
      local!rightPad
    }
  ),
  local!maxRows: length(local!finalDates) / 7,
  a!sectionLayout(
    contents: {
      a!cardLayout(
        padding: "NONE",
        contents: {
          a!richTextDisplayField(
            value: {
              a!richTextIcon(
                icon: "angle-left",
                link: a!dynamicLink(
                  saveInto: {
                    a!save(
                      local!month,
                      if(local!month = 1, 12, local!month - 1)
                    ),
                    a!save(
                      local!year,
                      if(local!month = 12, local!year - 1, local!year)
                    ),
                    a!save(
                      local!date,
                      date(local!year, local!month, 1)
                    )
                  }
                ),
                linkStyle: "STANDALONE",
                size: "MEDIUM"
              ),
              a!richTextItem(
                text: "   " & local!months[local!month] & "  " & local!year & "   ",
                size: "MEDIUM",
                style: "STRONG"
              ),
              a!richTextIcon(
                icon: "angle-right",
                link: a!dynamicLink(
                  saveInto: {
                    a!save(
                      local!month,
                      if(local!month = 12, 1, local!month + 1)
                    ),
                    a!save(
                      local!year,
                      if(local!month = 1, local!year + 1, local!year)
                    ),
                    a!save(
                      local!date,
                      date(local!year, local!month, 1)
                    )
                  }
                ),
                linkStyle: "STANDALONE",
                size: "MEDIUM"
              )
            },
            align: "CENTER"
          )
        },
        style: "#1d659c",
        marginBelow: "EVEN_LESS"
      ),
      a!columnsLayout(
        columns: {
          a!forEach(
            items: local!weekDays,
            expression: a!columnLayout(
              contents: {
                a!cardLayout(
                  padding: "NONE",
                  contents: {
                    a!richTextDisplayField(
                      value: {
                        a!richTextItem(
                          text: fv!item,
                          size: "SMALL",
                          style: "STRONG"
                        )
                      },
                      align: "CENTER"
                    )
                  }
                )
              }
            )
          )
        },
        marginBelow: "NONE",
        spacing: "NONE",
        stackWhen: "NEVER"
      ),
      a!forEach(
        items: enumerate(local!maxRows),
        expression: a!columnsLayout(
          columns: {
            a!localVariables(
              local!index: fv!item,
              a!forEach(
                items: enumerate(7),
                expression: a!localVariables(
                  local!calendarDate: local!finalDates[(local!index * 7) + fv!index],
                  {
                    a!columnLayout(
                      contents: {
                        {
                          a!cardLayout(
                            padding: "EVEN_LESS",
                            showWhen: month(local!calendarDate) = month(local!date),
                            contents: {
                              a!columnsLayout(
                                columns: {
                                  a!columnLayout(
                                    contents: {
                                      a!sideBySideLayout(
                                        items: {
                                          a!sideBySideItem(item: {}, width: "MINIMIZE"),
                                          a!sideBySideItem(
                                            item: a!richTextDisplayField(
                                              value: {
                                                a!richTextItem(
                                                  text: day(local!calendarDate),
                                                  showWhen: month(local!calendarDate) = month(local!date),
                                                  size: "SMALL",
                                                  
                                                )
                                              },
                                              align: "RIGHT"
                                            )
                                          )
                                        },
                                        showWhen: month(local!calendarDate) = month(local!date)
                                      ),
                                      
                                    }
                                  )
                                }
                              )
                            },
                            style: if(or(fv!index = { 6, 7 }), "#808080", {})
                          )
                        }
                      }
                    )
                  }
                )
              )
            )
          },
          marginBelow: "NONE",
          spacing: "NONE",
          stackWhen: "NEVER"
        )
      )
    }
  )
)