Comment utiliser JQueryUI Datepicker lorsqu'il n'y a pas de modèle pour lier le champ DateTime ?

JCIsola

J'utilise déjà ce sélecteur de date sur une autre vue, une vue Create () qui reçoit un modèle, puis je peux afficher le sélecteur de date en utilisant :

<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>
}

Maintenant, le problème est que je dois utiliser le sélecteur de date dans une vue comme l'un des champs de recherche en haut, j'essaie de mettre en œuvre une recherche de date par plage. Cette vue est un index, ce qui signifie qu'elle ne reçoit pas de modèle, elle reçoit une collection de modèles (PageList dans ce cas) :

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

Donc, dans ce cas, je ne peux pas utiliser model => model.OrderDate, alors j'ai essayé d'utiliser le Viewbag pour passer cette date là-bas, quelque chose comme ..

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

J'ai donc changé de EditorFor en TextBox et j'ai également essayé avec Editor, mais le sélecteur de date ne veut toujours pas apparaître au clic, des idées?

C'est ce qu'a essayé, toujours pas de 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>
...

Merci!!

Tetsuya Yamamoto

Vous pouvez ajouter un type="datetime"attribut à l'intérieur de l' TextBoxassistant comme ceci :

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

Ajoutez ensuite le DisplayFormatAttributeformat correspondant au format fourni dans le sélecteur de date :

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

Notez que l' @Html.TextBox()assistant produit par défaut un <input type="text" />élément, vous devez spécifier type="datetime"pour activer le sélecteur de calendrier datetime tel que fourni dans le code jQuery.

Vous pouvez voir un exemple d'implémentation de datepicker dans ce violon .

Articles connexes

Masquer le conteneur lorsqu'il n'y a pas de place

fausset Est-il possible de manière simple de masquer un conteneur situé entre deux autres conteneurs dans une disposition relative lorsqu'il n'y a pas assez de place pour afficher toutes les images à l'intérieur? fausset Je l'ai résolu en utilisant des méthode

Rapports de copie de modèle ARM Doublons lorsqu'il n'y en a pas

Murray Foxcroft J'ai un modèle ARM qui tente de configurer des règles de pare-feu pour un Azure Data Lake Store en fonction d'un ensemble de paramètres de pare-feu. La liste de paramètres pour les règles IP est distincte, il n'y a pas de duplication, mais le m