代码之家 › 专栏 › 技术社区 › AnchovyLegend

非军事格式的日期范围选取器

daterangepicker jquery javascript

AnchovyLegend · 技术社区 · 7 年前

我正在从事一个项目,该项目要求daterange选取器采用非军事格式,同时仍然强制执行最小日期。尽管daterange选择器采用军用格式,但当前的设置仍然有效 timePicker24Hour: false, -我需要选择器为非军事格式。你知道这是为什么,以及如何做到这一点吗?

$('input[name="launchdate"]').daterangepicker({
                                    timePicker24Hour: false,
                                    timePickerIncrement: 15,
                                    singleDatePicker: true,
                                    showDropdowns: true,
                                    timePicker: true,
                                    autoApply: true,
                                    minDate: moment().hour(13).minutes(0),
                                    format: 'hh:mm A',
                                    locale: {
                                        format: "MM/DD/YYYY hh:mm A"
                                    }
                                });

1 回复 | 直到 7 年前

Felix Haeberle 7 年前

你的代码运行良好!

下面是一个简短的片段,它为您提供了 非军事时间格式 上午/下午(12小时)。

var minDateValue = moment().add(13, 'hours');
$('input[name="launchdate"]').daterangepicker({
    timePicker24Hour: false,
    timePickerIncrement: 15,
    singleDatePicker: true,
    showDropdowns: true,
    timePicker: true,
    autoApply: true,
    minDate: minDateValue,
    format: 'hh:mm A',
    locale: {
        format: "MM/DD/YYYY hh:mm A"
    }
});

<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
 
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />


<!-- Input -->
<input name="launchdate"/>

如果你想的话 获取军事时间格式 (24小时):

移除 A 在您的 format 选项和设置 timePicker24Hour 到 true .

编辑: 补充 moment().add(13, 'hours') 像 minDate 价值

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

2 年前

Community wiki · 无法从jquery文档调用函数

2 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前