Javascript 日期范围选择器html5

我想拿出一个日期范围选择器，如下图所示

这是我现在正在做的更新代码和现在的输出

$（函数（）{
$（“#fromperiod”）.datepicker({
默认日期：“+1w”，
变化月：对，
月数：1，
onClose：函数（selectedDate）{
$（“#toperiod”）.datepicker（“选项”，“minDate”，selectedDate）；
}
});
$（“#toperiod”）.日期选择器({
默认日期：“+1w”，
变化月：对，
月数：1，
onClose：函数（selectedDate）{
$（“#fromperiod”）.datepicker（“选项”，“maxDate”，selectedDate）；
}
});
});
.picker{
显示：内联；
边框：1px实心浅灰色；
填充：4px；
}
输入{
边界：0；
}

时期
从…起
到
下面是一个如何设置其样式的示例，它创建一个换行的
#picker
元素，该元素获取阴影和边框，然后删除孩子的边框，并将其对齐


请看下面的例子，我修改了你的代码


$（函数（）{
$（“#from”）.datepicker({
默认日期：“+1w”，
变化月：对，
月数：1，
onClose：函数（selectedDate）{
$（“#至”）.datepicker（“选项”，“minDate”，selectedDate）；
}
});
$（“#到”）。日期选择器({
默认日期：“+1w”，
变化月：对，
月数：1，
onClose：函数（selectedDate）{
$（“#from”）.datepicker（“选项”，“maxDate”，selectedDate）；
}
});
});
.wrapper{
显示：内联；
边框：1px实心浅灰色；
填充：4px；
框阴影：插入1px 1px 1px rgba（0,0,0,1）
}
输入{
边界：0；
}
标签{
颜色：灰色；
}

期间：
发件人：
致：
我最近的任务是实现一个日期范围选择器，类似于Google Analytics中的日期范围选择器。经过一段时间的搜索，我发现它工作得非常好，并且可以很容易地使用

除非您正在学习或实践，否则使用现有代码、资产和库几乎总是最佳选择。“不要重新发明轮子”和“站在巨人的肩膀上”这两个短语往往因为这个原因而在教室和演讲厅里被反复使用
 嗯，它需要一些CSS样式才能看起来像你想要的输出，你试过什么吗？@zedd我试着在html代码中做一些更改。但还是一样。你能提供一些css样式部分的指导吗？我已经更新了我的代码。你能看看它有什么问题吗？修复样式
。选择器{display:inline；border:1px solid lightgray；padding:4px；}输入{border:0；}
我已经更新了代码和输出。你能看看它，看看有什么问题吗。thanks@susu好的，我已经更新了我的答案，用一个类来代替你修改过的代码中的ID。这给了一个很好的结果，如果你只是使用它的工作和输出是我想要得到的。谢谢：我以前试过。但它似乎与另一个日期输入有冲突。
.picker > * {
    display:inline;
    border:0;
}
.picker {
    border:1px solid lightgray;
    padding:4px;
    box-shadow:inset 1px 1px 1px rgba(0,0,0,.1)
}