Jquery时间微调器简化了

时间:2014-12-09 18:32:11

标签: jquery time spinner

我想使用JQueryUI example page中的时间微调器,但我不需要文化选择器,我希望它只能用德语风格(时间选择:0-24)。我怎么能简单地转换它?抱歉,我的英语很差,谢谢!

2 个答案:

答案 0 :(得分:0)

您指定所需的文化,然后初始化小部件:

<p>
  <label for="spinner">Time spinner:</label>
  <input id="spinner" name="spinner" value="20:30">
</p>

$.widget( "ui.timespinner", $.ui.spinner, {
    options: {
      // seconds
      step: 60 * 1000,
      // hours
      page: 60
    },

    _parse: function( value ) {
      if ( typeof value === "string" ) {
        // already a timestamp
        if ( Number( value ) == value ) {
          return Number( value );
        }
        return +Globalize.parseDate( value );
      }
      return value;
    },

    _format: function( value ) {
      return Globalize.format( new Date(value), "t" );
    }
});

Globalize.culture("de-DE");
$("#spinner").timespinner();

Demo

答案 1 :(得分:0)

我知道这个很旧,但是我自己搜索时就落在了这个上,最简单的方法是在jquery中使用start函数。使用微调器时,您可以找到按下的按钮,然后决定操作,此代码将添加或删除30分钟的弹出窗口,并以“ HH:mm”格式返回,您必须使用moment.js插件。

  $('#Timespinner').spinner({
      start: function( event, ui ) {
      if(event.currentTarget.className== 'ui-button ui-widget ui-spinner-button ui-spinner-up ui-corner-tr ui-button-icon-only'){
        time = moment($('#Timespinner').val(),"HH:mm").add(30,"minute")
      }else{
        time = moment($('#Timespinner').val(),"HH:mm").add(-30,"minute")
      }
        $('#Timespinner').val(moment(time).format("HH:mm"))
        return false;
      }
    })