How to use JQueryUI Datepicker when there is no model to bind the DateTime field?

Question

I'm already using this datepicker on another view, a Create() view that receives a model then I can show the datepicker by using:

<link rel="stylesheet"href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

...  
@Html.EditorFor(model => model.OrderDate, new { htmlAttributes = new { @class = "form-control", placeholder = "OrderDate", @readonly = "true" } })

...

@section Scripts
{
@Scripts.Render("~/bundles/jqueryui")
<script type="text/javascript">
    jQuery.validator.methods["date"] = function (value, element) { return true; }
    $(document).ready(function () {
        $("#OrderDate").val("");
        $('input[type=datetime]').datepicker({
            dateFormat: 'dd/mm/yy',
            changeMonth: true,
            changeYear: true,
            yearRange: "-1:+2",
            onClose: function (dateText, inst) {
                $("#cmdEnter").focus();
            }
        });
    });
</script>
}

Now the problem is that i need to use the datepicker in a View as one of the search fields on top, i'm trying to implement a date search by range. This view is an Index, meaning it doesn't receive a model it receives a model collection (PageList in this case):

@model PagedList.IPagedList<EntregaMedicamentos.Models.PedidoDisprofarmaViewModel>

So, in this case I can't use model => model.OrderDate, then I tryied using the Viewbag to pass that date there, something like..

@Html.TextBox("searchDateFrom", ViewBag.currentFilter2 as DateTime?, new { @class = "form-control", placeholder = "Desde fecha", @readonly = "true" })

So I changed from EditorFor to TextBox and also tried with Editor but the datepicker still doesn't want to pop-up on click, any ideas?

This is what a tried, still no pop-up:

@Html.TextBox("searchDateFrom", ViewBag.currentFilter2 as DateTime?, new { @class = "form-control", placeholder = "Desde fecha", @readonly = "true" })

....

@section scripts
{
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")
@Styles.Render("~/Content/cssjqryUi")

<script type="text/javascript">
    jQuery.validator.methods["date"] = function (value, element) { return true; }
    $(document).ready(function () {
        $("#searchDateFrom").val("");
        $('input[type=datetime]').datepicker({
            dateFormat: 'dd/mm/yy',
            changeMonth: true,
            changeYear: true,
            yearRange: "-1:+2",
            onClose: function (dateText, inst) {
                $("#cmdSearch").focus();
            }
        });
    });
</script>
...

Thanks!!

Tetsuya Yamamoto · Accepted Answer · 2018-12-26 02:07:07Z

1

You can append type="datetime" attribute inside TextBox helper like this:

@Html.TextBox("searchDateFrom", ViewBag.currentFilter2 as DateTime?, new { @class = "form-control", placeholder = "Desde fecha", 
              @readonly = "readonly", type = "datetime" })

Then add DisplayFormatAttribute matched with supplied format in datepicker:

[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
public DateTime searchDateFrom { get; set; }

Note that the @Html.TextBox() helper by default produces <input type="text" /> element, you need to specify type="datetime" to enable datetime calendar picker as provided in jQuery code.

You can see an example of datepicker implementation in this fiddle.

answered Dec 26, 2018 at 2:07

Tetsuya Yamamoto

25.1k8 gold badges43 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ecstatic · Accepted Answer · 2018-12-25 10:22:55Z

1

You can use

<input type="datetime" name="ordredate">

because @Html.TextBox() is not generating textbox type 'datetime'.

answered Dec 25, 2018 at 10:22

ecstatic

1142 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to use JQueryUI Datepicker when there is no model to bind the DateTime field?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related