Penggunaan dan penyelesaian masalah kawalan masa jquery UI Datepicker-tutorial js-php.cn

Penggunaan dan penyelesaian masalah kawalan masa jquery UI Datepicker

PHPz

Lepaskan： 2021-05-28 16:03:14

ke hadapan

2472 orang telah melayarinya

Penggunaan dan penyelesaian masalah kawalan masa jquery UI Datepicker

Contoh dalam artikel ini berkongsi penggunaan datepicker dalam jqueryUI untuk menyelesaikan masalah kegagalan apabila digunakan bersama dengan UpdatePanel dalam asp.net.

1. Cara menggunakan datepicker jqueryUI

--> tapak web rasmi jqueryUI Muat turun gaya yang sesuai dengan tema sistem anda , tema jqueryUI: Alamat muat turun (http://jqueryui.com/themeroller/#themeGallery)

Penggunaan dan penyelesaian masalah kawalan masa jquery UI Datepicker

-->Fail yang dimuat turun
jquery-ui-1.10.3.folder tersuai; perbezaan antara tema yang berbeza ialah ia merujuk css yang berbeza
Dimuat turun secara lalai Gaya adalah seperti berikut:

Penggunaan dan penyelesaian masalah kawalan masa jquery UI Datepicker

Gaya lain, seperti gaya yang saya muat turun:

Penggunaan dan penyelesaian masalah kawalan masa jquery UI Datepicker

Yang dimuat turun jqueryUI berbeza kecuali untuk folder css , fail lain adalah sama

--> Perkenalkan fail gaya .min.css jquery-1.10.3.custom
(2) Perkenalkan fail skrip jquery-1.9.1.js dan jquery-ui-1.10.3.custom.min.js; memperkenalkan fail jquery ( 3) Keperluan saya ialah membuat masa mula dan pemilihan masa tamat.

Kodnya adalah seperti berikut:

Nota:

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

Salin selepas log masuk

(1)$("#ui-datepicker-p").css("font-size ", " 12px"); Digunakan untuk menukar saiz kawalan tarikh

(2) dateFormat: "yy-mm-dd", tukar format tarikh

(3) Kawalan tarikh berada dalam Versi Inggeris, tambahkan skrip untuk menukarnya dalam bahasa Cina

(4) Untuk penggunaan terperinci beberapa atribut dan kaedah datepicker, anda boleh merujuk kepada dokumentasi APInya, yang sangat terperinci

/* 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;]);
});

Salin selepas log masuk

--> ; Kongsi helah lain

Penggunaan $("[id$=txtASN]")

Id kawalan kotak teks yang ditetapkan bagi asp.net ialah txtASN, tetapi $("#txtASN") tidak boleh mendapatkan elemen dom kotak teks Sebabnya ialah selepas menyemak kod sumber, didapati bahawa ID kawalannya telah berubah Jika kawalan diletakkan di dalam panel atau induknya, ID input kawalan html yang dijana ialah Akan berubah, seperti pnlBaseInfo_txtASN

Penyelesaian: $("[id$=txtASN]"), maksudnya ialah mendapatkan elemen dom yang idnya berakhir dengan txtASN

-- >Kesan lengkap

Penggunaan dan penyelesaian masalah kawalan masa jquery UI Datepicker 2 UpdatePanel dalam asp.net

Masalah: Selepas dijalankan, klik "Query", halaman dimuat semula sebahagiannya dan didapati bahawa pemilih kalendar tidak datang keluar DatePicker gagal selepas postback tak segerak dalam Masalah UpdatePanel asp.netKawalan DatePicker boleh dipaparkan seperti biasa apabila halaman dimuatkan buat kali pertama, tetapi selepas mengklik pertanyaan, DatePicker gagal kerana postback tak segerak.

--> Analisis UpdatePanel
UpdatePanel digunakan terutamanya untuk muat semula separa dalam aplikasi untuk mengelakkan Postback keseluruhan halaman. Inti penyegaran separa UpdatePanel terletak pada fail MicrosoftAjaxWebForm.js. diberikan.

--> Analisis jQuery

Oleh kerana selepas UpdatePanel dimuat semula sebahagiannya, elemen kotak teks di dalamnya ditulis semula, dan pada masa ini keseluruhan pokok DOM tidak Tiada muat semula, jadi acara sedia jQuery tidak dicetuskan, jadi elemen kotak teks kehilangan kesan khas asalnya.
-->PenyelesaianLetakkan kod untuk memulakan DatePicker dalam Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(evt, args) {});

Anda boleh juga merujuk artikel berikut untuk belajar:

$(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"); //改变大小
  });
});

Salin selepas log masuk

Penggunaan kawalan masa pemetik tarikh UI jquery (1)

Penggunaan kawalan masa pemetik tarikh UI jquery (2 )

Penggunaan kawalan masa jquery UI Datepicker (3)

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang pembelajaran.