zoukankan      html  css  js  c++  java
  • JS DatePicker: jscalendar1.0___v1.51 (JS日期选择器)

    https://files.cnblogs.com/wucg/jscalendar-1.0___v1.51.zip

    JS DatePicker: jscalendar-1.0___v1.51

    from:

    http://sourceforge.net/projects/jscalendar/

    https://files.cnblogs.com/wucg/jscalendar-1.0___v1.51.zip

    Quick startup

    Installing the calendar used to be quite a task until version 0.9.3. Starting with 0.9.3 I have included the file calendar-setup.js whose goal is to assist you to setup a popup or flat calendar in minutes. You are encouraged to modify this file and not calendar.js if you need extra customization, but you're on your own.

    First you have to include the needed scripts and style-sheet. Make sure you do this in your document's <head> section, also make sure you put the correct paths to the scripts.

    <style type="text/css">@import url(calendar-win2k-1.css);</style>
    <script type="text/javascript" src="calendar.js"></script>
    <script type="text/javascript" src="lang/calendar-en.js"></script>
    <script type="text/javascript" src="calendar-setup.js"></script>
    

    2.1  Installing a popup calendar

    Now suppose you have the following HTML:

    <form ...>
      <input type="text" id="data" name="data" />
      <button id="trigger">...</button>
    </form>
    

    You want the button to popup a calendar widget when clicked? Just insert the following code immediately after the HTML form:

    <script type="text/javascript">
      Calendar.setup(
        {
          inputField  : "data",         // ID of the input field
          ifFormat    : "%m %d, %Y",    // the date format
          button      : "trigger"       // ID of the button
        }
      );
    </script>
    

    The Calendar.setup function, defined in calendar-setup.js takes care of ``patching'' the button to display a calendar when clicked. The calendar is by default in single-click mode and linked with the given input field, so that when the end-user selects a date it will update the input field with the date in the given format and close the calendar. If you are a long-term user of the calendar you probably remember that for doing this you needed to write a couple functions and add an ``onclick'' handler for the button by hand.

  • 相关阅读:
    前端开发流程
    前端组件化开发方向
    模板引擎
    css模块化
    js组件化、模块化开发
    前端开发流程
    模块化开发
    XSS攻击
    react组件化开发发布到npm
    js过滤字符串中的html标签
  • 原文地址:https://www.cnblogs.com/wucg/p/2212898.html
Copyright © 2011-2022 走看看