【问题标题】:jquery ui date picker with default text in textboxjquery ui 日期选择器,文本框中有默认文本
【发布时间】:2014-08-07 19:07:13
【问题描述】:

有什么方法可以让我们获得默认文本值(不是某个日期,而是某种标签,显示在文本框内,但如果用户选择某个日期,则会更改为选定日期。

// I want the MM/DD/YYYY to be displayed inside text box if no date is selected by user

    <input id="datePicker" value ="MM/DD/YYYY">
    $(function() { 
    $( "#datepicker" ).datepicker( )});

我尝试使用 mm/dd/yyyy 添加一个虚拟输入框,并使用焦点和模糊方法显示和隐藏相同的输入框,但它无法正常工作。 有什么优雅的方法可以实现这一目标吗?任何帮助表示赞赏。 PS:我没有使用 html5,我需要这个东西在 ie 8 ,9 中工作。 它应该看起来像这样

【问题讨论】:

    标签: jquery jquery-ui-datepicker


    【解决方案1】:

    您可以在&lt;input&gt; 中添加placeholder="MM/DD/YYYY"

    &lt;input id="datePicker" placeholder="MM/DD/YYYY">

    【讨论】:

    • 感谢您的输入,因为我没有使用 html5,并且我需要此解决方案才能在 ie8 和 9 中工作。所以占位符不会帮助我。
    • 我明白了,在这种情况下,您可以使用 jQuery 插件,例如 jQuery Placeholder :)
    • 谢谢,我试试这个插件,然后告诉你。
    • 是的,感谢您的提醒,在使用此插件后,它在 IE 8 和 IE 9 中就像一个魅力。我接受这个作为答案。
    【解决方案2】:

    在 HTML 页面(或 onload)的脚本标签内添加这个。这将在输入框中显示当前日期。您可以在输入中使用title="Enter MM/DD/YYYY" 来显示工具提示。如果你真的想在文本中显示 MM/DD/YYYY,你可以使用 css 背景图片属性。我不擅长 css,但我想它会起作用(只需创建一个带有文本 MM/DD/YYYY 的小 png。

    Date.prototype.formatMMDDYYYY = function(){
            return this.getMonth() + 
            "/" +  this.getDate() +
            "/" +  this.getFullYear();
        }
    
        var dt = new Date();
        $('#datePicker').val(dt.formatMMDDYYYY());
    
    
            $(function() { 
            $( "#datePicker" ).datepicker( )});
    

    【讨论】:

    • 我的问题不是在文本框中有默认日期,而是一些不是日期的文本。我添加了一个示例图像。
    • 我可以建议的一个肮脏的技巧是使用样式stackoverflow.com/questions/10843966/…
    【解决方案3】:

    如果您想在所有站点中统一日期选择器的行为,只需覆盖 datepicker() 函数:

    $(function () {
        var pickerFn = $.fn.datepicker,
            placeholder = 'MM/DD/YYYY';
    
        $.fn.datepicker = function () {
            var datePicker = pickerFn.apply(this, arguments);  
    
            var self = this;
            self.attr('placeholder', placeholder);
    
            return datePicker;
        };
    });
    

    【讨论】:

      【解决方案4】:
      <input id="datePicker" placeholder="MM/DD/YYYY">
      
      <script type="text/javascript">
      $(function() {
        $('#datePicker').daterangepicker({
            autoUpdateInput: false
       });
      </script>
      

      【讨论】:

      • input[id="datePicker"]? #datePicker 有什么问题
      • 这没什么问题...我最初在我的代码中输入 [name=...] 所以我只是复制粘贴它并修改以匹配示例...我修改了它:) 谢谢
      猜你喜欢
      • 2011-04-19
      • 2013-05-05
      • 1970-01-01
      • 2015-09-05
      • 1970-01-01
      • 1970-01-01
      • 2011-10-02
      • 2011-10-16
      • 2011-05-31
      相关资源
      最近更新 更多