L'utilisation et la résolution de problèmes du contrôle temporel jquery UI Datepicker-js tutoriel-php.cn

L'utilisation et la résolution de problèmes du contrôle temporel jquery UI Datepicker

PHPz

Libérer： 2021-05-28 16:03:14

avant

2496 Les gens l'ont consulté

L'utilisation et la résolution de problèmes du contrôle temporel jquery UI Datepicker

L'exemple de cet article partage l'utilisation de datepicker dans jqueryUI pour résoudre le problème d'échec lorsqu'il est utilisé conjointement avec UpdatePanel dans asp.net.

1. Comment utiliser le sélecteur de date de jqueryUI

--> le site officiel de jqueryUI Téléchargez le style qui convient au thème de votre système , thème jqueryUI : adresse de téléchargement (http://jqueryui.com/themeroller/#themeGallery)

Lutilisation et la résolution de problèmes du contrôle temporel jquery UI Datepicker

-->Fichiers téléchargés
dossier jquery-ui-1.10.3.custom ; la différence entre les différents thèmes est qu'ils font référence à différents CSS
Téléchargés par défaut Les styles sont les suivants :

Lutilisation et la résolution de problèmes du contrôle temporel jquery UI Datepicker

Autres styles, comme le style que j'ai téléchargé :

Lutilisation et la résolution de problèmes du contrôle temporel jquery UI Datepicker

Le style téléchargé jqueryUI est différent sauf pour le dossier css, les autres fichiers sont les mêmes

--> Étapes pour utiliser datePicker dans la page
(1) Introduisez le fichier de style jquery-ui-1.10.3.custom .min.css
(2) Introduisez les fichiers de script jquery-1.9.1.js et jquery-ui-1.10.3.custom.min.js ; introduire le fichier jquery

( 3) Mon besoin est de faire une sélection d'heure de début et d'heure de fin.

Le code est le suivant :

<script type="text/javascript">
    $(function () {
      $("#txtStartDate").datepicker({
        dateFormat: "yy-mm-dd",
        changeMonth: true,
        onClose: function (selectedDate) {
          $("#txtEndDate").datepicker("option", "minDate", selectedDate);
        }
      });
      $("#txtEndDate").datepicker({
        dateFormat: "yy-mm-dd",
        changeMonth: true,
        onClose: function (selectedDate) {
          $("#txtStartDate").datepicker("option", "maxDate", selectedDate);
        }
      });
      $("#ui-datepicker-p").css("font-size", "12px"); //改变大小
    });
  </script>
</head>
<body>
  <label for="from">开始时间：</label>
  <input type="text" id="txtStartDate" name="from"/>
  <label for="to">结束时间：</label>
  <input type="text" id="txtEndDate" name="to"/>
</body>

Copier après la connexion

Remarque :

(1)$("#ui-datepicker-p").css("font-size ", " 12px"); Utilisé pour changer la taille du contrôle de date
(2) dateFormat : "aa-mm-jj", changer le format de date

(3) Le contrôle de date est en Version anglaise, ajoutez un script pour le changer en chinois

/* Chinese initialisation for the jQuery UI date picker plugin. */
/* Written by Cloudream (cloudream@gmail.com). */
jQuery(function ($) {
  $.datepicker.regional[&#39;zh-CN&#39;] = {
    closeText: &#39;关闭&#39;,
    prevText: &#39;<上月&#39;,
    nextText: &#39;下月>&#39;,
    currentText: &#39;今天&#39;,
    monthNames: [&#39;一月&#39;, &#39;二月&#39;, &#39;三月&#39;, &#39;四月&#39;, &#39;五月&#39;, &#39;六月&#39;,
        &#39;七月&#39;, &#39;八月&#39;, &#39;九月&#39;, &#39;十月&#39;, &#39;十一月&#39;, &#39;十二月&#39;],
    monthNamesShort: [&#39;一&#39;, &#39;二&#39;, &#39;三&#39;, &#39;四&#39;, &#39;五&#39;, &#39;六&#39;,
        &#39;七&#39;, &#39;八&#39;, &#39;九&#39;, &#39;十&#39;, &#39;十一&#39;, &#39;十二&#39;],
    dayNames: [&#39;星期日&#39;, &#39;星期一&#39;, &#39;星期二&#39;, &#39;星期三&#39;, &#39;星期四&#39;, &#39;星期五&#39;, &#39;星期六&#39;],
    dayNamesShort: [&#39;周日&#39;, &#39;周一&#39;, &#39;周二&#39;, &#39;周三&#39;, &#39;周四&#39;, &#39;周五&#39;, &#39;周六&#39;],
    dayNamesMin: [&#39;日&#39;, &#39;一&#39;, &#39;二&#39;, &#39;三&#39;, &#39;四&#39;, &#39;五&#39;, &#39;六&#39;],
    weekHeader: &#39;周&#39;,
    dateFormat: &#39;yy-mm-dd&#39;,
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: true,
    yearSuffix: &#39;年&#39;
  };
  $.datepicker.setDefaults($.datepicker.regional[&#39;zh-CN&#39;]);
});

Copier après la connexion

(4) Pour une utilisation détaillée de certains attributs et méthodes de datepicker, vous pouvez vous référer à sa documentation API, qui est très détaillée

--> ; Partagez une autre astuce

Utilisation de $("[id$=txtASN]")

L'identifiant de contrôle de zone de texte défini de asp.net est txtASN, mais $("#txtASN") ne peut pas obtenir l'élément dom de la zone de texte. La raison en est qu'après avoir vérifié le code source, il s'avère que son ID de contrôle a changé si le contrôle est placé dans le. panneau ou le maître, l'ID d'entrée du contrôle HTML généré est Will change, tel que pnlBaseInfo_txtASN
Solution : $("[id$=txtASN]"), le sens est d'obtenir l'élément dom dont l'identifiant se termine par txtASN

-- >Effet complet

Lutilisation et la résolution de problèmes du contrôle temporel jquery UI Datepicker

2. avec UpdatePanel dans asp.net
Problème : Après l'exécution, cliquez sur "Requête", la page est partiellement actualisée, et il s'avère que le sélecteur de calendrier ne sortir
DatePicker échoue après une publication asynchrone dans le problème UpdatePanel d'asp.net
Le contrôle DatePicker peut être affiché normalement lors du premier chargement de la page, mais après avoir cliqué sur la requête, le DatePicker échoue en raison d'une publication asynchrone.
--> Analyse de UpdatePanel
UpdatePanel est principalement utilisé pour un rafraîchissement partiel dans l'application afin d'éviter la publication de la page entière.
Le cœur de l'actualisation partielle de UpdatePanel réside dans le fichier MicrosoftAjaxWebForm.js. Son processus d'actualisation partielle consiste à soumettre la page au serveur (y compris ViewState). Après avoir exécuté le code du serveur, le HTML dans UpdatePanel sera réactualisé de manière asynchrone. rendu.

--> Analyse de jQuery
Parce qu'après l'actualisation partielle de UpdatePanel, l'élément de zone de texte qu'il contient est réécrit, et à ce moment-là, le l'arborescence DOM entière n'est pas disponible. Il n'y a pas de rechargement, donc l'événement ready de jQuery n'est pas déclenché, donc l'élément de zone de texte perd ses effets spéciaux d'origine.
-->Solution
Mettez le code pour initialiser DatePicker dans Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(evt, args) {});

$(function () {
  Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function (evt, args) {
    $("[id$=txtStartDate]").datepicker({
      dateFormat: "yy-mm-dd",
      changeMonth: true,
      onClose: function (selectedDate) {
        $("[id$=txtEndDate]").datepicker("option", "minDate", selectedDate);
      }
    });
    $("[id$=txtEndDate]").datepicker({
      dateFormat: "yy-mm-dd",
      changeMonth: true,
      onClose: function (selectedDate) {
        $("[id$=txtStartDate]").datepicker("option", "maxDate", selectedDate);
      }
    });
    $("#ui-datepicker-p").css("font-size", "14px"); //改变大小
  });
});

Copier après la connexion

Vous Vous pouvez également vous référer aux articles suivants pour en savoir plus :

Utilisation du contrôle temporel jquery UI Datepicker (1)

Utilisation du contrôle temporel jquery UI Datepicker (2) )

Utilisation du contrôle du temps jquery UI Datepicker (3)

Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à tout le monde apprentissage.