精华内容
下载资源
问答
  • js日期选择框

    2012-11-09 16:55:47
    js编写的漂亮的日期选择框,非常实用,直接引用即可,有多种日期格式可供选择
  • js日期选择框.rar

    2011-11-13 23:09:46
    日期选择框.rar日期选择框.rar日期选择框.rar日期选择框.rar
  • 目的是达到调用日期选择框,选择日期,他文本里不能输,只能在弹出框里选: 网页已经打开,我想选择2009-03-30的话,c#里该怎么写? js代码看到是这样: function Calender() { this._shell = create("div", ...
  • vue.js城市选择框组件 TRVLPicker (TRVLPicker) TRVLPicker is a responsive Vue.js datepicker component. From mobile to desktop it has a full-screen vertical layout, a single month layout, a double month ...

    vue.js城市选择框组件

    TRVLPicker (TRVLPicker)

    TRVLPicker is a responsive Vue.js datepicker component. From mobile to desktop it has a full-screen vertical layout, a single month layout, a double month layout, and a triple month layout.

    TRVLPicker是一个响应式Vue.js日期选择器组件。 从移动设备到台式机,它具有全屏垂直布局,单月布局,双月布局和三月布局。

    安装 (Install)

    npm install @trvl/picker
    import TRVLPicker from '@trvl/picker'
    
    export default {
        // …
        components: {
            TRVLPicker,
        },
        // …
    }

    用法 (Usage)

    基本的 (Basic)

    In its most basic form, TRVLPicker only requires the checkin and checkout props. Both should be a Date object and have a sync modifier:

    在最基本的形式中,TRVLPicker仅需要checkincheckout道具。 两者都应为Date对象并具有sync修饰符

    <template>
        <TRVLPicker
            :checkin.sync="checkin"
            :checkout.sync="checkout"
        />
    </template>
    
    <script>
        import TRVLPicker from '@trvl/picker'
    
        export default {
            components: {
                TRVLPicker,
            },
            data() {
                return {
                    checkin: new Date(2019, 2, 13),
                    checkout: new Date(2019, 2, 15),
                }
            },
        }
    </script>

    高级 (Advanced)

    To ensure a correct positioning of the datepicker in the full-screen layout it makes use of a Portal. Although not required, it is recommended to place a Portal target element outside your Vue app:

    为了确保日期选择器在全屏布局中的正确位置,它使用Portal 。 尽管不是必需的,但建议将Portal目标元素放置在Vue应用程序外部:

    <body>
        <div id="app">
            …
        </div>
    
        <div id="portal"></div>
    </body>

    道具 (Props)

    Prop Type Default Description
    breakpointSingle Number 580 Point at which the layout goes to a single month layout
    breakpointDouble Number 740 Point at which the layout goes to a double month layout
    breakpointTriple Number 0 (disabled) Point at which the layout goes to a triple month layout
    checkin Date Check-in date
    checkout Date Check-out date
    maxDate Date new Date() + 1 year Last possible check-out date
    maxStay Number 30 Maximum date range in days
    minDate Date new Date() First posssible check-in date
    portal String portal The ID of the portal
    Struts 类型 默认 描述
    breakpointSingle 580 布局转到单月布局的位置
    breakpointDouble 740 布局转到双月布局的位置
    breakpointTriple 0 (禁用) 布局转到三个月布局的位置
    checkin 日期 登记日期
    checkout 日期 离开日期
    maxDate 日期 new Date() + 1年 最后可能的退房日期
    maxStay 30 最大日期范围(天)
    minDate 日期 new Date() 第一次可能的入住日期
    portal portal 门户的ID

    插槽 (Slots)

    All slots are optional, but the checkin and checkout slots are highly recommended so as to customize their appearance.

    所有插槽都是可选的,但强烈建议checkincheckout插槽以自定义外观。

    报到 (Check-in)

    The template used for the check-in button.

    用于签入按钮的模板。

    <template slot="checkin" slot-scope="{ isActive, value }">
        <div :class="{ active: isActive }">
            <label for="checkin">Check-in</label>
            <input id="checkin" type="text" :value="value">
        </div>
    </template>

    The following data is available in the slot-scope:

    slot-scope提供以下数据:

    Data Type Description
    isActive Boolean Whether the check-in input is active
    value Date The raw check-in value
    数据 类型 描述
    isActive 布尔型 值机输入是否处于活动状态
    value 日期 原始值机值

    退房 (Check-out)

    The template used for the check-out button.

    用于签出按钮的模板。

    <template slot="checkout" slot-scope="{ isActive, value }">
        <div :class="{ active: isActive }">
            <label for="checkout">Check-in</label>
            <input id="checkout" type="text" :value="value">
        </div>
    </template>

    The following data is available in the slot-scope:

    slot-scope提供以下数据:

    Data Type Description
    isActive Boolean Whether the check-out input is active
    value Date The raw check-out value
    数据 类型 描述
    isActive 布尔型 结帐输入是否处于活动状态
    value 日期 原始结帐值

    (Close)

    The template used for the close button in the vertical layout.

    垂直布局中用于关闭按钮的模板。

    <template slot="close">
        <icon name="close" />
    </template>

    下一个 (Next)

    The template used for the navigation button to go to the next month.

    用于导航按钮的模板转到下个月。

    <template slot="next">
        <icon name="next" />
    </template>

    以前 (Previous)

    The template used for the navigation button to go to the previous month.

    用于导航按钮的模板可以转到上个月。

    <template slot="previous">
        <icon name="previous" />
    </template>

    方法 (Methods)

    By adding a ref to the datepicker a couple of methods can be accessed:

    通过将ref添加到日期选择器,可以访问以下两种方法:

    <template>
        <TRVLPicker
            ref="picker"
            …
        />
    </template>
    
    <script>
        export default {
            mounted() {
                this.$refs.picker.callMethod()
            },
        }
    </script>
    Method Parameters Description
    close Close the datepicker
    open checkin | checkout Open the datepicker on the given input (defaults to checkin)
    方法 参量 描述
    close 关闭日期选择器
    open checkin | checkout 在给定的输入上打开日期选择器(默认为checkin )

    大事记 (Events)

    Event Description
    close The datepicker is closed
    open The datepicker is opened
    事件 描述
    close 日期选择器已关闭
    open 日期选择器已打开

    贡献 (Contributing)

    # Project setup
    npm install
    
    # Compiles and hot-reloads for development
    npm run serve
    
    # Compiles and minifies for production
    npm run build
    
    # Lints and fixes files
    npm run lint
    
    # Runs unit tests
    npm run test:unit

    翻译自: https://vuejsexamples.com/a-responsive-vue-js-datepicker-component/

    vue.js城市选择框组件

    展开全文
  • vue.js城市选择框组件 日历 (vue-calendar) date-picker component for Vue.js Vue.js日期选择器组件 用法 (Usage) <template> <calendar :show-date-picker.sync="showDatePicker" :time.sync="time...

    vue.js城市选择框组件

    日历 (vue-calendar)

    date-picker component for Vue.js

    Vue.js的日期选择器组件

    用法 (Usage)

    <template>
        <calendar :show-date-picker.sync="showDatePicker" :time.sync="time" :date-value.sync="dateValue" v-if="showDatePicker" transition="calendar"></calendar>
    </template>

    现场演示 (live demo)

    http://ihanyang.github.io/demo/vue-calendar/

    http://ihanyang.github.io/demo/vue-calendar/

    翻译自: https://vuejsexamples.com/date-picker-component-for-vue-js-2/

    vue.js城市选择框组件

    展开全文
  • 表单验证+对话框+日期格式化+日期选择框+select美化js框架
  • vue.js城市选择框组件 Vue-flatPickr (Vue-flatPickr) Vue.js v2.x component for Flatpickr date-time picker Flatpickr日期时间选择器的Vue.js v2.x组件 If you are looking for the documentation of older ...

    vue.js城市选择框组件

    Vue-flatPickr (Vue-flatPickr)

    Vue.js v2.x component for Flatpickr date-time picker

    Flatpickr日期时间选择器的Vue.js v2.x组件

    If you are looking for the documentation of older version then switch to respective version branch.

    如果要查找旧版本的文档,请切换到相应的版本分支。

    特征 (Features)

    • Reactive v-model value

      React性v-model

      • You can change flatpickr value programmatically

        您可以通过编程方式更改Flatpickr值
    • Reactive config options

      React性配置选项

      • You can change config options dynamically

        您可以动态更改配置选项
      • Component will watch for any changes and redraw itself

        组件将监视任何更改并重新绘制自身
      • Vue.setVue.set修改配置
    • Emits all possible events

      发出所有可能的事件

    • Compatible with Bootstrap, Bulma or any other CSS framework

      BootstrapBulma或任何其他CSS框架兼容

    • Supports wrapped mode

      支持包装模式

      • wrap:true in config and component will take care of allwrap:true ,组件将负责所有操作
    • Play nice with vee-validate validation library

      使用vee-validate验证库玩得很好

    安装 (Installation)

    # npm
    npm install vue-flatpickr-component --save
    
    # Yarn
    yarn add vue-flatpickr-component

    用法 (Usage)

    最小的例子 (Minimal example)

    <template>
      <div>
        <flat-pickr v-model="date"></flat-pickr>
      </div>
    </template>
    
    <script>
      import flatPickr from 'vue-flatpickr-component';
      import 'flatpickr/dist/flatpickr.css';
      
      export default {    
        data () {
          return {
            date: null,       
          }
        },
        components: {
          flatPickr
        }
      }
    </script>

    详细的例子 (Detailed example)

    This example is based on Bootstrap 4 input group

    本示例基于Bootstrap 4 输入组

    <template>
      <section>
        <div class="form-group">
          <label>Select a date</label>
          <div class="input-group">
            <flat-pickr
                    v-model="date"
                    :config="config"                                                          
                    class="form-control" 
                    placeholder="Select date"               
                    name="date">
            </flat-pickr>
            <div class="input-group-btn">
              <button class="btn btn-default" type="button" title="Toggle" data-toggle>
                <i class="fa fa-calendar">
                  <span aria-hidden="true" class="sr-only">Toggle</span>
                </i>
              </button>
              <button class="btn btn-default" type="button" title="Clear" data-clear>
                <i class="fa fa-times">
                  <span aria-hidden="true" class="sr-only">Clear</span>
                </i>               
              </button>
            </div>
          </div>
        </div>
        <pre>Selected date is - {{date}}</pre>
      </section>
    </template>
    
    <script>
      // bootstrap is just for this example
      import 'bootstrap/dist/css/bootstrap.css';
      // import this component
      import flatPickr from 'vue-flatpickr-component';  
      import 'flatpickr/dist/flatpickr.css';
      // theme is optional
      // try more themes at - https://chmln.github.io/flatpickr/themes/
      import 'flatpickr/dist/themes/material_blue.css';
      // l10n is optional
      import {Hindi} from 'flatpickr/dist/l10n/hi';
      
      export default {
        name: 'yourComponent',
        data () {
          return {
            // Initial value
            date: new Date(),
            // Get more form https://chmln.github.io/flatpickr/options/
            config: {
              wrap: true, // set wrap to true only when using 'input-group'
              altFormat: 'M	j, Y',
              altInput: true,
              dateFormat: 'Y-m-d',
              locale: Hindi, // locale for this instance only          
            },                
          }
        },
        components: {
          flatPickr
        },    
      }
    </script>

    作为插件 (As plugin)

    import Vue from 'vue';
      import flatPickr from 'vue-flatpickr-component';
      import 'flatpickr/dist/flatpickr.css';
      Vue.use(flatPickr);

    This will register a global component <flat-pickr>

    这将注册一个全局组件<flat-pickr>

    大事记 (Events)

    • The components emits all possible events, you can listen to them in your component

      组件会发出所有可能的事件,您可以在组件中收听它们

    <flat-pickr v-model="date" @on-change="doSomethingOnChange" @on-close="doSomethingOnClose"></flat-pickr>
    • Events names has been converted to kebab-case.

      事件名称已转换为kebab-case。

    • You can still pass your methods in config like original flatpickr do.

      您仍然可以像原始flatpickr一样在配置中传递方法。

    可用道具 (Available props)

    The component accepts these props:

    该组件接受以下道具:

    Attribute Type Default Description
    v-model / value String / Date Object / Array / Timestamp / null null Set or Get date-picker value (required)
    config Object {wrap:false} Flatpickr configuration options
    events Array Array of all events Customise the events to be emitted
    属性 类型 默认 描述
    v模型/值 字符串/日期对象/数组/时间戳/空 null 设置或获取日期选择器值(必填)
    配置 目的 {wrap:false} Flatpickr配置选项
    大事记 数组 所有事件的数组 自定义要发出的事件

    在非模块环境中安装(没有webpack) (Install in non-module environments (without webpack))

    • Include required files

      包括所需文件

    <!-- Flatpickr related files -->
    <link href="https://unpkg.com/[email protected]/dist/flatpickr.min.css" rel="stylesheet">
    <script src="https://unpkg.com/[email protected]/dist/flatpickr.min.js"></script>
    <!-- Vue js -->
    <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
    <!-- Lastly add this package -->
    <script src="https://unpkg.com/[email protected]"></script>
    
    • Use the component anywhere in your app like this

      像这样在应用程序中的任何地方使用组件

    <main id="app">  
        <flat-pickr v-model="date" class="input"></flat-pickr> 
    </main>
    <script>
      // Initialize as global component
      Vue.component('flat-pickr', VueFlatpickr);
      
      new Vue({
        el: '#app',
        data: {
          date: null
        },    
      });
    </script>

    在本地主机上运行示例 (Run examples on your localhost)

    • Clone this repo

      克隆此仓库

    • You should have node-js >=6.10 <7.0.0 || >=9.x and yarn >=1.x pre-installed

      您应该让node-js> = 6.10 <7.0.0 || 预装> = 9.x和纱线> = 1.x

    • Install dependencies yarn install

      安装依赖项yarn install

    • Run webpack dev server yarn start

      运行webpack dev服务器yarn start

    • This should open the demo page at http://localhost:8000 in your default web browser

      这应该在默认的Web浏览器中打开位于http://localhost:8000的演示页面。

    翻译自: https://vuejsexamples.com/vue-js-component-for-flatpickr-datetime-picker/

    vue.js城市选择框组件

    展开全文
  • js日期时间选择框

    2012-04-05 17:20:29
    //日期选择控件体的样式 var s_tiannet_body = "width:150;background-color:#2650A6;display:none;z-index:9998;position:absolute;" + "border-left:1 solid #CCCCCC;border-top:1 solid #CCCCCC;border-right:1 ...

    // JavaScript Document
    var s_tiannet_turn_base = "height:16px;font-size:9pt;color:white;border:0 solid #CCCCCC;cursor:hand;background-color:#2650A6;";
    //翻年、月等的按钮
    var s_tiannet_turn = "width:28px;" + s_tiannet_turn_base;
    //关闭、清空等按钮样式
    var s_tiannet_turn2 = "width:22px;" + s_tiannet_turn_base;
    //年选择下拉框
    var s_tiannet_select = "width:64px;display:none;";
    //月、时、分选择下拉框
    var s_tiannet_select2 = "width:46px;display:none;";
    //日期选择控件体的样式
    var s_tiannet_body = "width:150;background-color:#2650A6;display:none;z-index:9998;position:absolute;" +
    "border-left:1 solid #CCCCCC;border-top:1 solid #CCCCCC;border-right:1 solid #999999;border-bottom:1 solid #999999;";
    //显示日的td的样式
    var s_tiannet_day = "width:21px;height:20px;background-color:#D8F0FC;font-size:10pt;";
    //字体样式
    var s_tiannet_font = "color:#FFCC00;font-size:9pt;cursor:hand;";
    //链接的样式
    var s_tiannet_link = "text-decoration:none;font-size:9pt;color:#2650A6;";
    //横线
    var s_tiannet_line = "border-bottom:1 solid #6699CC";
    //------------------ 变量定义 ---------------------------//
    var now = new Date();
    //var month = now.getMonth() + 1;
    //var date = now.getDate();


    var tiannetYearSt = now.getYear();//可选择的开始年份2009
    var tiannetYearEnd = now.getYear() + 2;//可选择的结束年份
    var tiannetDateNow = new Date();
    var tiannetYear = tiannetDateNow.getFullYear(); //定义年的变量的初始值
    var tiannetMonth = tiannetDateNow.getMonth()+1; //定义月的变量的初始值
    var tiannetDay = tiannetDateNow.getDate();
    var tiannetHour = 8;//tiannetDateNow.getHours();
    var tiannetMinute = 0;//tiannetDateNow.getMinutes();
    var tiannetArrDay=new Array(42);          //定义写日期的数组
    var tiannetDateSplit = "-";     //日期的分隔符号
    var tiannetDateTimeSplit = " ";    //日期与时间之间的分隔符
    var tiannetTimeSplit = ":";     //时间的分隔符号
    var tiannetOutObject;      //接收日期时间的对象
    var arrTiannetHide = new Array();//被强制隐藏的标签
    var m_bolShowHour = false;//是否显示小时
    var m_bolShowMinute = false;//是否显示分钟

    var m_aMonHead = new Array(12);         //定义阳历中每个月的最大天数
        m_aMonHead[0] = 31; m_aMonHead[1] = 28; m_aMonHead[2] = 31; m_aMonHead[3] = 30; m_aMonHead[4] = 31; m_aMonHead[5] = 30;
        m_aMonHead[6] = 31; m_aMonHead[7] = 31; m_aMonHead[8] = 30; m_aMonHead[9] = 31; m_aMonHead[10] = 30; m_aMonHead[11] = 31;
    // ---------------------- 用户可调用的函数 -----------------------------//
    //用户主调函数-只选择日期
    function setDay(obj){
    tiannetOutObject = obj;
    //如果标签中有值,则将日期初始化为当前值
    var strValue = tiannetTrim(tiannetOutObject.value);
    if( strValue != "" ){
    tiannetInitDate(strValue);
    }
    tiannetPopCalendar();
    }
    //用户主调函数-选择日期和小时
    function setDayH(obj){
    tiannetOutObject = obj;
    m_bolShowHour = true;
    //如果标签中有值,则将日期和小时初始化为当前值
    var strValue = tiannetTrim(tiannetOutObject.value);
    if( strValue != "" ){
    tiannetInitDate(strValue.substring(0,10));
    var hour = strValue.substring(11,13);
    if( hour < 10 ) tiannetHour = hour.substring(1,2);
    }
    tiannetPopCalendar();
    }
    //用户主调函数-选择日期和小时及分钟
    function setDayHM(obj){
    tiannetOutObject = obj;
    m_bolShowHour = true;
    m_bolShowMinute = true;
    //如果标签中有值,则将日期和小时及分钟初始化为当前值
    var strValue = tiannetTrim(tiannetOutObject.value);
    if( strValue != "" ){
    tiannetInitDate(strValue.substring(0,10));
    var time = strValue.substring(11,16);
    var arr = time.split(tiannetTimeSplit);
    tiannetHour = arr[0];
    tiannetMinute = arr[1];
    if( tiannetHour < 10 ) tiannetHour = tiannetHour.substring(1,2);
    if( tiannetMinute < 10 ) tiannetMinute = tiannetMinute.substring(1,2);
    }
    tiannetPopCalendar();
    }
    //设置开始日期和结束日期
    function setYearPeriod(intDateBeg,intDateEnd){
    tiannetYearSt = intDateBeg;
    tiannetYearEnd = intDateEnd;
    }
    //设置日期分隔符。默认为"-"
    function setDateSplit(strDateSplit){
    tiannetDateSplit = strDateSplit;
    }
    //设置日期与时间之间的分隔符。默认为" "
    function setDateTimeSplit(strDateTimeSplit){
    tiannetDateTimeSplit = strDateTimeSplit;
    }
    //设置时间分隔符。默认为":"
    function setTimeSplit(strTimeSplit){
    tiannetTimeSplit = strTimeSplit;
    }
    //设置分隔符
    function setSplit(strDateSplit,strDateTimeSplit,strTimeSplit){
    tiannetDateSplit(strDateSplit);
    tiannetDateTimeSplit(strDateTimeSplit);
    tiannetTimeSplit(strTimeSplit);
    }
    //设置默认的日期。格式为:YYYY-MM-DD
    function setDefaultDate(strDate){
    tiannetYear = strDate.substring(0,4);
    tiannetMonth = strDate.substring(5,7);
    tiannetDay = strDate.substring(8,10);
    }
    //设置默认的时间。格式为:HH24:MI
    function setDefaultTime(strTime){
    tiannetHour = strTime.substring(0,2);
    tiannetMinute = strTime.substring(3,5);
    }
    // ---------------------- end 用户可调用的函数 -----------------------------//
    //------------------ begin 页面显示部分 ---------------------------//
    var weekName = new Array("日","一","二","三","四","五","六");
    document.write('<div id="divTiannetDate" style="'+s_tiannet_body+'" style="本日历选择控件由tiannet根据前人经验完善而成!">');
    document.write('<div align="center" id="divTiannetDateText" Author="tiannet" style="padding-top:2px;">');
    document.write('<span id="tiannetYearHead" Author="tiannet" style="'+s_tiannet_font+'" '+
        'οnclick="spanYearCEvent();">&nbsp;年</span>');
    document.write('<select id="selTianYear" style="'+s_tiannet_select+'" Author="tiannet" '+
        ' onChange="tiannetYear=this.value;tiannetSetDay(tiannetYear,tiannetMonth);document.all.tiannetYearHead.style.display=\'\';'+
        'this.style.display=\'none\';">');
    for(var i=tiannetYearSt;i <= tiannetYearEnd;i ++){
    document.writeln('<option value="' + i + '">' + i + '年</option>');
    }
    document.write('</select>');
    document.write('<span id="tiannetMonthHead" Author="tiannet" style="'+s_tiannet_font+'" '+
        'οnclick="spanMonthCEvent();">&nbsp;&nbsp;月</span>');
    document.write('<select id="selTianMonth" style="'+s_tiannet_select2+'" Author="tiannet" '+
        'onChange="tiannetMonth=this.value;tiannetSetDay(tiannetYear,tiannetMonth);document.all.tiannetMonthHead.style.display=\'\';'+
        'this.style.display=\'none\';">');
    for(var i=1;i <= 12;i ++){
    document.writeln('<option value="' + i + '">' + i + '月</option>');
    }
    document.write('</select>');
    //document.write('</div>');
    //document.write('<div align="center" id="divTiannetTimeText" Author="tiannet">');
    document.write('<span id="tiannetHourHead" Author="tiannet" style="'+s_tiannet_font+'display:none;" '+
        'οnclick="spanHourCEvent();">&nbsp;时</span>');
    document.write('<select id="selTianHour" style="'+s_tiannet_select2+'display:none;" Author="tiannet" '+
        ' onChange="tiannetHour=this.value;tiannetWriteHead();document.all.tiannetHourHead.style.display=\'\';' +
        'this.style.display=\'none\';">');
    for(var i=0;i <= 23;i ++){
    document.writeln('<option value="' + i + '">' + i + '时</option>');
    }
    document.write('</select>');
    document.write('<span id="tiannetMinuteHead" Author="tiannet" style="'+s_tiannet_font+'display:none;" '+
        'οnclick="spanMinuteCEvent();">&nbsp;&nbsp;分</span>');
    document.write('<select id="selTianMinute" style="'+s_tiannet_select2+'display:none;" Author="tiannet" '+
        ' onChange="tiannetMinute=this.value;tiannetWriteHead();document.all.tiannetMinuteHead.style.display=\'\';'+
        'this.style.display=\'none\';">');
    for(var i=0;i <= 59;i ++){
    document.writeln('<option value="' + i + '">' + i + '分</option>');
    }
    document.write('</select>');
    document.write('</div>');
    //输出一条横线
    document.write('<div style="'+s_tiannet_line+'"></div>');
    document.write('<div align="center" id="divTiannetTurn" style="border:0;" Author="tiannet">');
    document.write('<input type="button" style="'+s_tiannet_turn+'" value="年↑" title="上一年" onClick="tiannetPrevYear();">');
    document.write('<input type="button" style="'+s_tiannet_turn+'" value="年↓" title="下一年" onClick="tiannetNextYear();">&nbsp;');
    document.write('<input type="button" style="'+s_tiannet_turn+'" value="月↑" title="上一月" onClick="tiannetPrevMonth();">');
    document.write('<input type="button" style="'+s_tiannet_turn+'" value="月↓" title="下一月" onClick="tiannetNextMonth();">');
    document.write('</div>');
    //输出一条横线
    document.write('<div style="'+s_tiannet_line+'"></div>');
    document.write('<table border=0 cellspacing=0 cellpadding=0 bgcolor=white onselectstart="return false">');
    document.write(' <tr style="background-color:#2650A6;font-size:10pt;color:white;height:22px;" Author="tiannet">');
    for(var i =0;i < weekName.length;i ++){
    //输出星期
    document.write('<td width="21" align="center" Author="tiannet">' + weekName[i] + '</td>');
    }
    document.write(' </tr>');
    document.write('</table>');
    //输出天的选择
    document.write('<table border=0 cellspacing=1 cellpadding=0 bgcolor=white onselectstart="return false">');
    var n = 0;
    for (var i=0;i<5;i++) {
    document.write (' <tr align=center id="trTiannetDay' + i + '" >');
    for (var j=0;j<7;j++){
    document.write('<td align="center" id="tdTiannetDay' + n + '" '+
        'onClick="tiannetDay=this.innerText;tiannetSetValue(true);" '
       +' style="' + s_tiannet_day + '">&nbsp;</td>');
    n ++;
    }
    document.write (' </tr>');
    }
    document.write (' <tr align=center id="trTiannetDay5" >');
    document.write('<td align="center" id="tdTiannetDay35" onClick="tiannetDay=this.innerText;tiannetSetValue(true);" '
        +' style="' + s_tiannet_day + '">&nbsp;</td>');
    document.write('<td align="center" id="tdTiannetDay36" onClick="tiannetDay=this.innerText;tiannetSetValue(true);" '
        +' style="' + s_tiannet_day + '">&nbsp;</td>');
    document.write('<td align="right" colspan="5"><a href="javascript:tiannetClear();" style="' + s_tiannet_link + '">清空</a>'+
        '&nbsp;<a href="javascript:tiannetHideControl();" style="' + s_tiannet_link + '">关闭</a>' +
        '&nbsp;<a href="javascript:tiannetSetValue(true);" style="' + s_tiannet_link + '">确定</a>&nbsp;' +
        '</td>');
    document.write (' </tr>');
    document.write('</table>');
    document.write('</div>');
    //------------------ end 页面显示部分 ---------------------------//
    //------------------ 显示日期时间的span标签响应事件 ---------------------------//
    //单击年份span标签响应
    function spanYearCEvent(){
    hideElementsById(new Array("selTianYear","tiannetMonthHead"),false);
    if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false);
    if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false);
    hideElementsById(new Array("tiannetYearHead","selTianMonth","selTianHour","selTianMinute"),true);
    }
    //单击月份span标签响应
    function spanMonthCEvent(){
    hideElementsById(new Array("selTianMonth","tiannetYearHead"),false);
    if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false);
    if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false);
    hideElementsById(new Array("tiannetMonthHead","selTianYear","selTianHour","selTianMinute"),true);
    }
    //单击小时span标签响应
    function spanHourCEvent(){
    hideElementsById(new Array("tiannetYearHead","tiannetMonthHead"),false);
    if(m_bolShowHour) hideElementsById(new Array("selTianHour"),false);
    if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false);
    hideElementsById(new Array("tiannetHourHead","selTianYear","selTianMonth","selTianMinute"),true);
    }
    //单击分钟span标签响应
    function spanMinuteCEvent(){
    hideElementsById(new Array("tiannetYearHead","tiannetMonthHead"),false);
    if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false);
    if(m_bolShowMinute) hideElementsById(new Array("selTianMinute"),false);
    hideElementsById(new Array("tiannetMinuteHead","selTianYear","selTianMonth","selTianHour"),true);
    }
    //根据标签id隐藏或显示标签
    function hideElementsById(arrId,bolHide){
    var strDisplay = "";
    if(bolHide) strDisplay = "none";
    for(var i = 0;i < arrId.length;i ++){
    var obj = document.getElementById(arrId[i]);
    obj.style.display = strDisplay;
    }
    }
    //------------------ end 显示日期时间的span标签响应事件 ---------------------------//
    //判断某年是否为闰年
    function isPinYear(year){
    var bolRet = false;
    if (0==year%4&&((year%100!=0)||(year%400==0))) {
    bolRet = true;
    }
    return bolRet;
    }
    //得到一个月的天数,闰年为29天
    function getMonthCount(year,month){
    var c=m_aMonHead[month-1];
    if((month==2)&&isPinYear(year)) c++;
    return c;
    }
    //重新设置当前的日。主要是防止在翻年、翻月时,当前日大于当月的最大日
    function setRealDayCount() {
    if( tiannetDay > getMonthCount(tiannetYear,tiannetMonth) ) {
    //如果当前的日大于当月的最大日,则取当月最大日
    tiannetDay = getMonthCount(tiannetYear,tiannetMonth);
    }
    }
    //在个位数前加零
    function addZero(value){
    if(value < 10 ){
    value = "0" + value;
    }
    return value;
    }
    //取出空格
    function tiannetTrim(str) {
    return str.replace(/(^\s*)|(\s*$)/g,"");
    }
    //为select创建一个option
    function createOption(objSelect,value,text){
    var option = document.createElement("OPTION");
    option.value = value;
    option.text = text;
    objSelect.options.add(option);
    }
    //往前翻 Year
    function tiannetPrevYear() {
    if(tiannetYear > 999 && tiannetYear <10000){tiannetYear--;}
    else{alert("年份超出范围(1000-9999)!");}
    tiannetSetDay(tiannetYear,tiannetMonth);
    //如果年份小于允许的最小年份,则创建对应的option
    if( tiannetYear < tiannetYearSt ) {
    tiannetYearSt = tiannetYear;
    createOption(document.all.selTianYear,tiannetYear,tiannetYear + "年");
    }
    checkSelect(document.all.selTianYear,tiannetYear);
    tiannetWriteHead();
    }
    //往后翻 Year
    function tiannetNextYear() {
    if(tiannetYear > 999 && tiannetYear <10000){tiannetYear++;}
    else{alert("年份超出范围(1000-9999)!");return;}
    tiannetSetDay(tiannetYear,tiannetMonth);
    //如果年份超过允许的最大年份,则创建对应的option
    if( tiannetYear > tiannetYearEnd ) {
    tiannetYearEnd = tiannetYear;
    createOption(document.all.selTianYear,tiannetYear,tiannetYear + "年");
    }
    checkSelect(document.all.selTianYear,tiannetYear);
    tiannetWriteHead();
    }
    //选择今天
    function tiannetToday() {
    tiannetYear = tiannetDateNow.getFullYear();
    tiannetMonth = tiannetDateNow.getMonth()+1;
    tiannetDay = tiannetDateNow.getDate();
    tiannetSetValue(true);
    //tiannetSetDay(tiannetYear,tiannetMonth);
    //selectObject();
    }
    //往前翻月份
    function tiannetPrevMonth() {
    if(tiannetMonth>1){tiannetMonth--}else{tiannetYear--;tiannetMonth=12;}
    tiannetSetDay(tiannetYear,tiannetMonth);
    checkSelect(document.all.selTianMonth,tiannetMonth);
    tiannetWriteHead();
    }
    //往后翻月份
    function tiannetNextMonth() {
    if(tiannetMonth==12){tiannetYear++;tiannetMonth=1}else{tiannetMonth++}
    tiannetSetDay(tiannetYear,tiannetMonth);
    checkSelect(document.all.selTianMonth,tiannetMonth);
    tiannetWriteHead();
    }
    //向span标签中写入年、月、时、分等数据
    function tiannetWriteHead(){
    document.all.tiannetYearHead.innerText = tiannetYear + "年";
    document.all.tiannetMonthHead.innerText = tiannetMonth + "月";
    if( m_bolShowHour ) document.all.tiannetHourHead.innerText = " "+tiannetHour + "时";
    if( m_bolShowMinute ) document.all.tiannetMinuteHead.innerText = tiannetMinute + "分";
    tiannetSetValue(false);//给文本框赋值,但不隐藏本控件
    }
    //设置显示天
    function tiannetSetDay(yy,mm) {

    setRealDayCount();//设置当月真实的日
    tiannetWriteHead();
    var strDateFont1 = "", strDateFont2 = "" //处理日期显示的风格
    for (var i = 0; i < 37; i++){tiannetArrDay[i]=""}; //将显示框的内容全部清空
    var day1 = 1;
    var firstday = new Date(yy,mm-1,1).getDay(); //某月第一天的星期几
    for (var i = firstday; day1 < getMonthCount(yy,mm)+1; i++){
    tiannetArrDay[i]=day1;day1++;
    }
    //如果用于显示日的最后一行的第一个单元格的值为空,则隐藏整行。
    //if(tiannetArrDay[35] == ""){
    // document.all.trTiannetDay5.style.display = "none";
    //} else {
    // document.all.trTiannetDay5.style.display = "";
    //}
    for (var i = 0; i < 37; i++){
    var da = eval("document.all.tdTiannetDay"+i)     //书写新的一个月的日期星期排列
    if (tiannetArrDay[i]!="") {
       //判断是否为周末,如果是周末,则改为红色字体
       if(i % 7 == 0 || (i+1) % 7 == 0){
       strDateFont1 = "<font color=#f0000>"
       strDateFont2 = "</font>"
       } else {
        strDateFont1 = "";
        strDateFont2 = ""
       }
       da.innerHTML = strDateFont1 + tiannetArrDay[i] + strDateFont2;
       //如果是当前选择的天,则改变颜色
       if(tiannetArrDay[i] == tiannetDay ) {
        da.style.backgroundColor = "#CCCCCC";
       } else {
        da.style.backgroundColor = "#EFEFEF";
       }
       da.style.cursor="hand"
    } else {
       da.innerHTML="";da.style.backgroundColor="";da.style.cursor="default"
    }
    }//end for
    tiannetSetValue(false);//给文本框赋值,但不隐藏本控件
    }//end function tiannetSetDay
    //根据option的值选中option
    function checkSelect(objSelect,selectValue) {
    var count = parseInt(objSelect.length);
    if( selectValue < 10 && selectValue.toString().length == 2) {
    selectValue = selectValue.substring(1,2);
    }
    for(var i = 0;i < count;i ++){
    if(objSelect.options[i].value == selectValue){
       objSelect.selectedIndex = i;
       break;
    }
    }//for
    }
    //选中年、月、时、分等下拉框
    function selectObject(){
    //如果年份小于允许的最小年份,则创建对应的option
    if( tiannetYear < tiannetYearSt ) {
    for( var i = tiannetYear;i < tiannetYearSt;i ++ ){
       createOption(document.all.selTianYear,i,i + "年");
    }
    tiannetYearSt = tiannetYear;
    }
    //如果年份超过允许的最大年份,则创建对应的option
    if( tiannetYear > tiannetYearEnd ) {
    for( var i = tiannetYearEnd+1;i <= tiannetYear;i ++ ){
       createOption(document.all.selTianYear,i,i + "年");
    }
    tiannetYearEnd = tiannetYear;
    }
    checkSelect(document.all.selTianYear,tiannetYear);
    checkSelect(document.all.selTianMonth,tiannetMonth);
    if( m_bolShowHour ) checkSelect(document.all.selTianHour,tiannetHour);
    if( m_bolShowMinute ) checkSelect(document.all.selTianMinute,tiannetMinute);
    }
    //给接受日期时间的控件赋值
    //参数bolHideControl - 是否隐藏控件
    function tiannetSetValue(bolHideControl){
    var value = "";
    if( !tiannetDay || tiannetDay == "" ){
    tiannetOutObject.value = value;
    return;
    }
    var mm = tiannetMonth;
    var day = tiannetDay;
    if( mm < 10 && mm.toString().length == 1) mm = "0" + mm;
    if( day < 10 && day.toString().length == 1) day = "0" + day;
    value = tiannetYear + tiannetDateSplit + mm + tiannetDateSplit + day;
    if( m_bolShowHour ){
    var hour = tiannetHour;
    if( hour < 10 && hour.toString().length == 1 ) hour = "0" + hour;
    value += tiannetDateTimeSplit + hour;
    }
    if( m_bolShowMinute ){
    var minute = tiannetMinute;
    if( minute < 10 && minute.toString().length == 1 ) minute = "0" + minute;
    value += tiannetTimeSplit + minute;
    }
    tiannetOutObject.value = value;
    //document.all.divTiannetDate.style.display = "none";
    if( bolHideControl ) {
    tiannetHideControl();
    }
    }
    //是否显示时间
    function showTime(){
    if( !m_bolShowHour && m_bolShowMinute){
    alert("如果要选择分钟,则必须可以选择小时!");
    return;
    }
    hideElementsById(new Array("tiannetHourHead","selTianHour","tiannetMinuteHead","selTianMinute"),true);
    if( m_bolShowHour ){
    //显示小时
    hideElementsById(new Array("tiannetHourHead"),false);
    }
    if( m_bolShowMinute ){
    //显示分钟
    hideElementsById(new Array("tiannetMinuteHead"),false);
    }
    }
    //弹出显示日历选择控件,以让用户选择
    function tiannetPopCalendar(){
    //隐藏下拉框,显示相对应的head
    hideElementsById(new Array("selTianYear","selTianMonth","selTianHour","selTianMinute"),true);
    hideElementsById(new Array("tiannetYearHead","tiannetMonthHead","tiannetHourHead","tiannetMinuteHead"),false);
    tiannetSetDay(tiannetYear,tiannetMonth);
    tiannetWriteHead();
    showTime();
    var dads = document.all.divTiannetDate.style;
    var iX, iY;

    var h = document.all.divTiannetDate.offsetHeight;
    var w = document.all.divTiannetDate.offsetWidth;
    //计算left
    if (window.event.x + h > document.body.offsetWidth - 10    )
    iX = window.event.x - h - 5 ;
    else
    iX = window.event.x + 5;
    if (iX <0)
    iX=0;
    //计算top
    iY = window.event.y;
    if (window.event.y + w > document.body.offsetHeight - 10   )
    iY = document.body.scrollTop + document.body.offsetHeight - w - 5 ;
    else
    iY = document.body.scrollTop +window.event.y + 5;
    if (iY <0)
    iY=0;
    dads.left = iX;
    dads.top = iY;
    tiannetShowControl();
    selectObject();
    }
    //隐藏日历控件(同时显示被强制隐藏的标签)
    function tiannetHideControl(){
    document.all.divTiannetDate.style.display = "none";
    tiannetShowObject();
    arrTiannetHide = new Array();//将被隐藏的标签对象清空
    }
    //显示日历控件(同时隐藏会遮挡的标签)
    function tiannetShowControl(){
    document.all.divTiannetDate.style.display = "";
    tiannetHideObject("SELECT");
    tiannetHideObject("OBJECT");
    }
    //根据标签名称隐藏标签。如会遮住控件的select,object
    function tiannetHideObject(strTagName) {

    x = document.all.divTiannetDate.offsetLeft;
    y = document.all.divTiannetDate.offsetTop;
    h = document.all.divTiannetDate.offsetHeight;
    w = document.all.divTiannetDate.offsetWidth;

    for (var i = 0; i < document.all.tags(strTagName).length; i++)
    {

    var obj = document.all.tags(strTagName)[i];
    if (! obj || ! obj.offsetParent)
       continue;
    // 获取元素对于BODY标记的相对坐标
    var objLeft   = obj.offsetLeft;
    var objTop    = obj.offsetTop;
    var objHeight = obj.offsetHeight;
    var objWidth = obj.offsetWidth;
    var objParent = obj.offsetParent;

    while (objParent.tagName.toUpperCase() != "BODY"){
       objLeft += objParent.offsetLeft;
       objTop   += objParent.offsetTop;
       objParent = objParent.offsetParent;
    }
    //alert("控件左端:" + x + "select左端" + (objLeft + objWidth) + "控件底部:" + (y+h) + "select高:" + objTop);

    var bolHide = true;
    if( obj.style.display == "none" || obj.style.visibility == "hidden" || obj.getAttribute("Author") == "tiannet" ){
       //如果标签本身就是隐藏的,则不需要再隐藏。如果是控件中的下拉框,也不用隐藏。
       bolHide = false;
    }
    if( ( (objLeft + objWidth) > x && (y + h + 20) > objTop && (objTop+objHeight) > y && objLeft < (x+w) ) && bolHide ){
       //arrTiannetHide.push(obj);//记录被隐藏的标签对象
       arrTiannetHide[arrTiannetHide.length] = obj;
       obj.style.visibility = "hidden";
    }


    }
    }
    //显示被隐藏的标签
    function tiannetShowObject(){
    for(var i = 0;i < arrTiannetHide.length;i ++){
    //alert(arrTiannetHide[i]);
    arrTiannetHide[i].style.visibility = "";
    }
    }
    //初始化日期。
    function tiannetInitDate(strDate){
    var arr = strDate.split(tiannetDateSplit);
    tiannetYear = arr[0];
    tiannetMonth = arr[1];
    tiannetDay = arr[2];
    }
    //清空
    function tiannetClear(){
    tiannetOutObject.value = "";
    tiannetHideControl();
    }
    //任意点击时关闭该控件
    function document.onclick(){
    with(window.event.srcElement){
    if (tagName != "INPUT" && getAttribute("Author") != "tiannet")
        tiannetHideControl();
    }
    }
    //按ESC键关闭该控件
    function document.onkeypress(){
    if( event.keyCode == 27 ){
    tiannetHideControl();
    }
    }

    //js结束

    //Template

    <body>
             (1)只选择日期   
    <input type="text" name="date"    readOnly onClick="setDay(this);"><br/>
    (2)选择日期和小时  
    <input type="text" name="dateh"   readOnly onClick="setDayH(this);"><br/>
    (3)选择日期和小时及分钟
    <input type="text" name="datehm" readOnly onClick="setDayHM(this);">

        
    </body>

    展开全文
  • vue.js城市选择框组件 vue-datepicker (vue-datepicker) calendar and datepicker component with material design for Vue.js 日历和日期选择器组件,具有Vue.js的材料设计 现场演示 (live Demo) ...
  • vue.js城市选择框组件 Vue-flatPickr (Vue-flatPickr) Vue.js v2.x component for Flatpickr date-time picker Vue.js V2.X的组件Flatpickr日期时间选择器 特征 (Features) Reactive v-model value You can ...
  • vue.js城市选择框组件A Vue.js component implementing the datetime picker control using the Eonasdan's bootstrap datetime picker plugin. 一个Vue.js组件,使用Eonasdan的bootstrap datetime picker插件实现...
  • JS日期选择框

    千次阅读 2007-07-18 17:43:00
     " </td><td align=center>今天' onfocus='this.blur()' style='width: 50' title='当前日期 快捷键:T'"+  " onclick=/"parent.returnDate(new Date().getDate() +'/'+ (new Date().getMonth() +1) +'/'+ ...
  • ![图片说明](https://img-ask.csdn.net/upload/201610/12/1476254794_306406.png)
  • 注: js控制元素展开不受元素...1. 使用js控制日期选择框的展开 ios: document.querySelector(".target").focus(); Android: document.querySelector(".target").click(); 2.控制select的展开 ios:document.que...
  • 带时间的日期选择框 Datetime.js 使用方法: setday(this,this) 如果JS加载不上,把JS里的内容复制到一个新的文本文件里,另存为*.js就可以了
  • jscalendar-1.0 日期选择框显示问题

    千次阅读 2013-07-24 19:29:25
    做网页甘特图的时候,由于任务进度要选择时间,用到了jscalendar-1.0这个日期控件,但是显示有问题,日期选择框不是放在最外层,鼠标一点击,选择框就消失了,导致无法选择日期,让我一度以为是自己代码问题,如下所...
  • Ext JS中的Ext.Date可以看作是JavaScript中date的加强版,提供了许多进阶的日期操作函数,下面我们就来看一下Ext JS框架中日期函数的用法及日期选择控件的实现
  • 日期选择框

    2018-07-10 18:18:09
    js实现的日期选择框css代码/* The main calendar widget. DIV containing a table. */ div.calendar { position: relative; } .calendar{ font-size: 11px; color: #000; cursor: default; background: #eef; ...
  • 大家应该都知道jscalendar这个日期选择框吧。 当在yui-ext中的dialog使用时,大家应该会想到会发生什么吧。日期选择框在变灰的背景后面。如下图: [img]...
  • <scripttype="text/javascript"charset="gb2312"src="../util/Calendar.js">functionTABLE1_onclick(){ } </script> <tr> <tdstyle="wid...
  • js日期时间选择

    2008-07-22 23:59:57
    js日期时间选择框,可以精确选择年月日,时分秒
  • 2、仍然定位不到日期选择框,继续搜索后觉得可能是因为“readonly”属性,于是决定使用js去掉,但是这个框没有Id,于是换用getElementsByName(半路出家,完全不懂js,不知道对不对),于是变成了 ``` js=...
  • 部分代码 js / php 对应版的日期格式化类 /* // @author : lael // blog : http://hi.baidu.com/lael80 // http://www.gzyd.net // all right reserved. */ var dateutils = function(){} /* d : 日期...
  • 今天找到一个显示日期时间选择框js控件 简直是太帅了 http://www.my97.net/dp/demo/index.htm 转载于:https://www.cnblogs.com/bluemaplestudio/archive/2010/04/13/1710746.html...
  • jsp日期选择框 ,无需第三方js控件

    万次阅读 2010-09-08 21:45:00
    -------------------------------------------------------------------------------------------------------------------------------代码如下:JS日期选择
  • 本人所用时间选择框是基于bootstrap框架,实现功能限制是,后台传入页面一个固定月份,前端只让选择本月份的日期日期格式为:年、月、日 需要引入的包: bootstrap-datetimepicker/css/bootstrap-datetimepicker....
  • 样式图如下效果:   <br />   文件目录结构如下所示:         两个按钮图片如下所示:       dateutil.js代码如下:  ...
  • JQuery 日期选择框

    2018-01-18 17:21:00
    一 jeDate日期控件,关于官方的文档请查看: http://www.jayui.com/jedate/ 1 引入js文件 <script type="text/javascript" src="${basePath}/js/jedate.js"></script> 2 input <input...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 604
精华内容 241
关键字:

js日期选择框