Open Closed

Date Field Restrictions and Format #1464


0
viswajwalith created

ABP Framework version: v4.3.X UI type: Angular DB provider: EF Core / MongoDB Tiered (MVC) or Identity Server Separated (Angular): yes Exception message and stack trace: Steps to reproduce the issue:

Hi,

We would like to have date restrictions on certain date controls for not allowing future date and also would like to have a time entry. We assume ABP.io comes wth bootstrap datepicker but it is not working when set the restrictions.

We used the below JS to set that (which was working fine for normal textbox in other application:

$('#Observation_ObservationDate').datepicker({
    format: 'mm-dd-yyyy',
    endDate: '+0d',
    autoclose: true,
    "showTodayButton": true,
});

We used below Tag helper to create the date control :

<abp-input asp-for="Observation.ObservationDate" value="@DateTime.Now.ToString("yyyy-MM-dd")" type="date" />

HTML Markup:

<div class="form-group">
  <div class="form-item">
    <input type="text" value="2021-06-10" data-val="true" data-val-required="The ObservationDate field is required." id="Observation_ObservationDate" name="Observation.ObservationDate" class="form-control datepicker valid" placeholder=" " aria-describedby="Observation_ObservationDate-error" aria-invalid="false">
    <span class="lbl-icon">
      <i class="fi-rr-calendar"></i>
    </span>
    <label for="Observation_ObservationDate">ObservationDate
      <span class="requiredSymbol">*</span></label>
    <span class="text-danger-custom field-validation-valid" data-valmsg-for="Observation.ObservationDate" data-valmsg-replace="true"></span>
  </div>
</div>

Let us know how to customize the ABP.io control to have date restrictions (pas/future) and also using the control for accecpting only time .


5 Answer(s)
  • 0
    maliming created
    Support Team

    hi

    You can add abp-data-datepicker="false" to abp-input to prevent the framework from changing it.

    Then you can full use jquery to control it.

    <abp-input asp-for="Observation.ObservationDate" value="@DateTime.Now.ToString("yyyy-MM-dd")" type="date" abp-data-datepicker="false" />

  • 0
    viswajwalith created

    hi

    You can add abp-data-datepicker="false" to abp-input to prevent the framework from changing it.

    Then you can full use jquery to control it.

    <abp-input asp-for="Observation.ObservationDate" value="@DateTime.Now.ToString("yyyy-MM-dd")" type="date" abp-data-datepicker="false" />

    @maliming: It didn't worked even if we add the abp-data-datepicker="false" to abp-input, not sure how it worked for you.

    we managed this by destroying the datepicker object and recreating the same.

    $('#Observation_ObservationDate').datepicker("destroy"); $('#Observation_ObservationDate').datepicker({ format: 'mm-dd-yyyy', endDate: '+0d', autoclose: true, todayHighlight: true, todayBtn: true, });

  • 0
    maliming created
    Support Team

    hi

    Now it is a normal input element, I don't know why you need to destroy and create it again.

    Use abp-data-datepicker="false" will ignore abp.dom.initializers.initializeDatepickers method.

  • 0
    viswajwalith created

    hi

    Now it is a normal input element, I don't know why you need to destroy and create it again.

    Use abp-data-datepicker="false" will ignore abp.dom.initializers.initializeDatepickers method.

    thanks mailing, what ever you said sounds correct but not sure why it is not considering the respective attribute to false, do u think any file need to be Included?

  • 0
    maliming created
    Support Team

    do u think any file need to be Included?

    The letpon theme will include all necessary js files. I just test the code in index.cshtml