2012-09-08 55 views
1

我有用户选择日期的代码。如何从datepicker ui获取年份?

我需要获得价值年,并把它放在div。

我该怎么做?

jsFissl Demo

许多THX。 代码:

<div class="demo"> 
<p>Date: <input type="text" id="datepicker"></p> 
</div> 
<div id="Year"></div> 

$("#datepicker").datepicker({ 
     changeMonth: true, 
     changeYear: true 

    }); 

     $("#Year").text($("#datepicker").val()); 

我尝试使用.substring(0, 4)但我不硝酸钾如何。

回答

0

这显示了你想要提取的年份。

HTML:

<meta charset="utf-8"> 
    <div class="demo"> 
    <p>Date: <input type="text" id="datepicker"></p> 
    <button>Show year</button> 
</div><!-- End demo --> 

JS:

$(function() { 
    $("#datepicker").datepicker({ 
     changeMonth: true, 
     changeYear: true 
    }); 

    $("button").click(function() { 
     var split = $("#datepicker").val().split('/'); 
     alert(split[2]); 
    }); 
});​ 

String类的split方法将字符串,并返回作为数组。

编辑:这做你想要的一切。 看看onSelect事件。

$(function() { 
    $("#datepicker").datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     onSelect: function(dateText) { 
      var split = $("#datepicker").val().split('/'); 
      $("#Year").text(split[2]); 
     } 
    }); 
});​ 
1

您可以将该输入值转换为Javascript日期以及从其方法中获取所有内容。

http://jsbin.com/ugaxob/2/edit

$(".btn-getdate").click(function() { 

    var dt = $("#datepicker").val(), 
     d = new Date(dt);  

    $("#Year").text(d.getFullYear()); 

}); 

去野外和使用MomentJs插件,你会得到这么多的乐趣(更新活生生的例子)


当您要执行什么在插件上,这就是所谓的根据事件行事,并且您应该在DatePicker中看到事件选项卡,您可以在其中找到onSelect

我的实例更改为根据选择进行操作,无需按任何链接或按钮。

+0

您的权利,下seloution正确但如何显示它没有按div – yossi

+0

中的按钮添加活动的现场示例,请阅读洞的答案,这样你就会知道从哪里获得帮助下一次你需要这样的事情:) – balexandre

+0

我想指出你out datepicker和timepicker,我喜欢使用,因为它们与[** Bootstrap Framework **](http://twitter.g ithub.com/bootstrap/scaffolding.html)(最常用的CSS框架之一),[** DatePicker **](http://www.eyecon。ro/bootstrap-datepicker /)和[** TimePicker **](http://jdewit.github.com/bootstrap-timepicker/)。 – balexandre

0

如何:JSFiddle 不需要做字符串操作,只是用选定的日期从datepicker创建Date对象,并使用getFullYear()方法来获得选择的年份......

$(function() { 
    $("#datepicker").datepicker({ 

     onSelect: function(date) { 
     var d = new Date(date); 
     alert(d.getFullYear()); 
     }, 
     changeMonth: true, 
     changeYear: true 
    }); 

}); 
相关问题